Permalink
Browse files

Adding tooltips for grand visual effect.

  • Loading branch information...
samschmitz committed Apr 16, 2015
1 parent f803dad commit cca423fb54ae8645f22617c9e75cc3e59e215a03
Showing with 34 additions and 24 deletions.
  1. +34 −24 site/content/posts/posts/message-mondays.html
@@ -19,7 +19,7 @@
.range([height, -2]);
var hueScale = d3.scale.linear()
- .rangeRound([140, 20]);
+ .rangeRound([100, 11]);
var xTime = d3.time.scale()
.range([2, width]);
@@ -36,12 +36,30 @@
.orient("left")
.ticks(10);
+
+var msg = d3.select("body").append("div")
+ .attr("class", "tooltip")
+ .style("opacity", 1e-6);
+
+ format = d3.time.format("%m-%d-%Y");
+ var mouseOver = function(el) {
+ msg.html("<p><strong>"+ format(el.date) + "</strong></p><p>" + el.message + "</p>")
+ .style("opacity", 1);
+}
+
+function mouseMove() {
+ msg
+ .style("left", d3.event.pageX + "px")
+ .style("top", (d3.event.pageY - 100) + "px");
+}
+
var svg = d3.select("#spicebeam").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("/media/files/message_mondays.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.date; }));
xTime.domain([d3.min(data, function(d) { return d.date }), d3.max(data, function(d) { return d.date; })])
@@ -69,14 +87,7 @@
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Crashes (weekly)");
-
- var message = d3.select("#message")
- format = d3.time.format("%m-%d-%Y");
- var displayMessage = function(el){
- var formDate = format(el.date);
- message.text("MSG: " + el.message).append("span").text(" [" + formDate + "]");
- }
-
+
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
@@ -86,14 +97,14 @@
.attr("y", function(d) { return y(d.crashes); })
.attr("height", function(d) { return height - y(d.crashes); })
.attr("fill", function(d) {
- //if(d.date < new Date("12/30/2014"))
if(d.crashes != 700) {
+ // hack to display gray where I don't have data
return "hsl(" + hueScale(d.crashes) + ",90%,50%)";
}
return "#aaa";
})
- .on('mouseover', displayMessage);
-
+ .on('mouseover', mouseOver)
+ .on('mousemove', mouseMove);
});
function type(d) {
@@ -102,7 +113,6 @@
d.crashes = +d.crashes;
return d;
}
-
</script>
{% endblock %}
@@ -111,7 +121,6 @@
<div id="spicebeam"></div>
<p style="text-align: right;" class="source small"><strong>Source: <a href="http://www.iowadot.gov/">Iowa DOT</a></strong></p>
-<h2 id="message">MSG: 156 Traffic Deaths this Year - Don't Add to this number<span>[08-05-2013]</span></h2>
{% mark excerpt %}
If you drive in Iowa—on the interstate, at least—you can't miss the highway alert signs. I remember seeing these growing up in LA. They were usually switched off or had a nursery rhyme reminding you to buckle up.. I never once thought, "what a missed opportunity!"
{% endmark %}
@@ -131,22 +140,23 @@ <h2 id="message">MSG: 156 Traffic Deaths this Year - Don't Add to this number<sp
I got in touch with a few friendly folks out there—muckraking this ain't—and after after some back and forth, they encouraged me to file a FOIA request. With the friendly help of the [FOIA Machine](http://foiamachine.org) and the [USA](http://www.foia.gov/how-to.html) I learned that this was a codeword for "email with the magic words 'FOIA request' in it." Done. I immediately received a vacation auto-responder. Not bad. Not great.
-Nonetheless, about ten days later, an EXCEL file courtesy of the IowaDOT: 82 weeks worth of sign messages and dates. What I didn't have, though, was any numerical data. I've put in another request—but in the meantime, I generated some numbers with a quick python script.
+Nonetheless, about ten days later, an an EXCEL file with 82 weeks worth of sign messages and dates was gleaming in my inbox. What I didn't have, though, was any numerical data. Another request turned that around quickly—traffic data is easy, because it's clear that agencies monitor this stuff very closely themselves. The trick, I suppose, is to get at the data that people *don't* want to know. At any rate, another lovely EXCEL file in hand, I summed by weeks (not knowing the way to do this right in Excel, I generated the appropriate sum formulas, =SUM(B7:B13) in Python and pasted em' in).
#!/usr/bin/env python
- import random
+ # print =SUM(BX:BX+n)
+ start = 8
+ interval = 6
+ for i in range(52):
+ end = start + interval
+ print "=SUM(B%d:B%d)" % (start, end)
+ start += interval + 1
- random.seed()
- for x in range(0, 82):
- print random.randrange(13, 114, 1)
+Ha! I felt brilliant and stupid all at once. Honestly, I find it a lot more readable than the cryptic offset(...) Excel soutions, and easier than doing it all in Python. Numbers so summed, I turned to `d3.js`, the much beloved visual library. I learned a few things in getting up to speed. Having spent quite a bit of time working with `jQuery`, it was a pleasure to use a library that offered a bit more out-of-the-box functionality.
- With that, I turned to `d3.js`, the much beloved visual library. I learned a few things in getting up to speed. Having spent quite a bit of time working with `jQuery`, it was a pleasure to use a library that offered a bit more out-of-the-box functionality.
+For those looking to get into gear, the basic beginning tutorials on [d3js.org](http://d3js.org)—are really useful. The list of tutorials [here](https://github.com/mbostock/d3/wiki/Tutorials) is hit or miss, but there are some great ones too. I'd recommending reading Bostock's [write-ups](http://bost.ocks.org/mike/join/) on [joins](http://bost.ocks.org/mike/selection/) more than anything else, as that explains the basics of the whole chaining syntax. I struggled somewhat with the scales, as well. It's just the kind've thing that takes a little banging.
- For those looking to get into gear, the basic beginning tutorials on [d3js.org](http://d3js.org)—are really useful. The list of tutorials [here](https://github.com/mbostock/d3/wiki/Tutorials) is hit or miss, but there are some great ones too. I'd recommending reading Bostock's [write-ups](http://bost.ocks.org/mike/join/) on [joins](http://bost.ocks.org/mike/selection/) more than anything else, as that explains the basics of the whole chaining syntax. I struggled somewhat with the scales, as well. It's just the kind've thing that takes a little headbeating.
+It's interesting how rapidly patterns become clear. Traffic accidents spike immediately before Thanksgiving.
The full CSV is available for download [here](/media/files/message_mondays.csv).
- **Update:** I just heard back from the DOT with the full accident data, so I'll get that up soon!
-
-
{% endblock %}

0 comments on commit cca423f

Please sign in to comment.