Built with blockbuilder.org
forked from lgoerl's block: sentiment time-series mouseover
license: mit |
Built with blockbuilder.org
forked from lgoerl's block: sentiment time-series mouseover
time | sentiment | |
---|---|---|
0.050000000000000003 | 0.0058870557494586301 | |
0.10000000000000001 | -0.33347108477513487 | |
0.14999999999999999 | 0.025406126841266623 | |
0.20000000000000001 | -0.12639670738183756 | |
0.25 | 0.14591616122089601 | |
0.29999999999999999 | 0.026446739525393344 | |
0.34999999999999998 | -0.036770970176370446 | |
0.39999999999999997 | -0.11253872200416092 | |
0.44999999999999996 | -0.07347167873214655 | |
0.49999999999999994 | -0.038324295869786154 | |
0.54999999999999993 | -0.062063532437040728 | |
0.59999999999999998 | -0.10914888183622309 | |
0.65000000000000002 | -0.10704310730357505 | |
0.69999999999999996 | -0.082435578508754159 | |
0.75 | -0.059812798725438279 | |
0.79999999999999993 | -0.05477781815132643 | |
0.84999999999999998 | -0.067515067291835651 | |
0.90000000000000002 | -0.06892188376035227 | |
0.94999999999999996 | -0.069458101573636855 | |
1.0 | -0.064073213752440336 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
.focus circle { | |
fill: none; | |
stroke: steelblue; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 50, bottom: 30, left: 50}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var bisecttime = d3.bisector(function(d) { return d.time; }).left, | |
formatValue = d3.format(",.2f"), | |
displayValue = function(d) { return formatValue(d); }; | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var line = d3.svg.line() | |
.x(function(d) { return x(d.time); }) | |
.y(function(d) { return y(d.sentiment); }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("data.csv", function(error, data) { | |
if (error) throw error; | |
data.forEach(function(d) { | |
d.time = +d.time; | |
d.sentiment = +d.sentiment; | |
}); | |
data.sort(function(a, b) { | |
return a.time - b.time; | |
}); | |
x.domain([data[0].time, data[data.length - 1].time]); | |
y.domain(d3.extent(data, function(d) { return d.sentiment; })); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Sentiment"); | |
svg.append("path") | |
.datum(data) | |
.attr("class", "line") | |
.attr("d", line); | |
var focus = svg.append("g") | |
.attr("class", "focus") | |
.style("display", "none"); | |
focus.append("circle") | |
.attr("r", 4.5); | |
focus.append("text") | |
.attr("x", 9) | |
.attr("dy", ".35em"); | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", width) | |
.attr("height", height) | |
.on("mouseover", function() { focus.style("display", null); }) | |
.on("mouseout", function() { focus.style("display", "none"); }) | |
.on("mousemove", mousemove); | |
function mousemove() { | |
var x0 = x.invert(d3.mouse(this)[0]), | |
i = bisecttime(data, x0, 1), | |
d0 = data[i - 1], | |
d1 = data[i], | |
d = x0 - d0.time > d1.time - x0 ? d1 : d0; | |
focus.attr("transform", "translate(" + x(d.time) + "," + y(d.sentiment) + ")"); | |
focus.select("text").text("Sentiment Value: " | |
+ displayValue(d.sentiment) | |
+ "\n Words: " | |
// + d.words | |
); | |
} | |
}); | |
</script> |