2015-04-16 17:48:43 : Adding tooltips for grand visual effect.
»
Find cca423fb54ae8645f22617c9e75cc3e59e215a03 on GitHub.
Adding tooltips for grand visual effect.
.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 @@ var yAxis = d3.svg.axis()
.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 @@ d3.csv("/media/files/message_mondays.csv", type, function(error, data) {
.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 @@ d3.csv("/media/files/message_mondays.csv", type, function(error, data) {
.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);-]{+mouseOver)+}
{+ .on('mousemove', mouseMove);+}
});
function type(d) {
@@ -102,7 +113,6 @@ function type(d) {
d.crashes = +d.crashes;
return d;
}
</script>
{% endblock %}
@@ -111,7 +121,6 @@ function type(d) {
<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 @@ The IowaDOT has extensive resources online, including an impressive interactive
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 {+an+} EXCEL file [-courtesy of the IowaDOT:-]{+with+} 82 weeks worth of sign messages and [-dates.-]{+dates was gleaming in my inbox.+} What I didn't have, though, was any numerical data. [-I've put in-]{+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 [-request—but-]{+lovely EXCEL file+} in {+hand, I summed by weeks (not knowing+} the [-meantime,-]{+way to do this right in Excel,+} I generated [-some numbers with a quick python script.-]{+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-]{+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 [-range(0, 82):-]
[- print random.randrange(13, 114, 1)-]{+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-]{+For those looking+} to [-`d3.js`,-]{+get into gear,+} the [-much beloved visual library. I learned a few things in getting up to speed. Having spent quite a bit-]{+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 [-time working-]{+the whole chaining syntax. I struggled somewhat+} with [-`jQuery`, it was a pleasure to use a library-]{+the scales, as well. It's just the kind've thing+} that [-offered-]{+takes+} a [-bit more out-of-the-box functionality.-]{+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.-]{+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 %}
2015-03-05 12:06:30 : Updating with real accident data (obtained Mar 3, 2015)
»
Find edbbd2e3e0f2849a1d419814e3b7379eb2bd8f60 on GitHub.
Updating with real accident data (obtained Mar 3, 2015)
track: True
---
{% block tail_scripts %}
<script [-src="http://d3js.org/d3.v3.min.js"></script>-]{+src="/media/js/d3.v3.min.js"></script>+}
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: [-30},-]{+40},+}
width = 960 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
@@ -19,7 +19,7 @@ var y = d3.scale.linear()
.range([height, -2]);
var hueScale = d3.scale.linear()
[-.rangeRound([120, 0]);-]{+.rangeRound([140, 20]);+}
var xTime = d3.time.scale()
.range([2, width]);
@@ -44,11 +44,10 @@ var svg = d3.select("#spicebeam").append("svg")
d3.csv("/media/files/message_mondays.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.date; }));
[- //xTime.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; })])
y.domain([0, d3.max(data, function(d) { return [-d.test;-]{+d.crashes;+} })]);
hueScale.domain([0, d3.max(data, function(d) { return [-d.test;-]{+d.crashes;+} })]);
svg.append("g")
.attr("class", "x axis")
@@ -69,13 +68,13 @@ d3.csv("/media/files/message_mondays.csv", type, function(error, data) {
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
[-.text("Crashes");-]{+.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(el.message).append("span").text("-]{+message.text("MSG: " + el.message).append("span").text("+} [" + formDate + "]");
}
svg.selectAll(".bar")
@@ -84,10 +83,14 @@ d3.csv("/media/files/message_mondays.csv", type, function(error, data) {
.attr("class", "bar")
.attr("x", function(d) { return xTime(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return [-y(d.test);-]{+y(d.crashes);+} })
.attr("height", function(d) { return height - [-y(d.test);-]{+y(d.crashes);+} })
.attr("fill", function(d) {
{+//if(d.date < new Date("12/30/2014"))+}
{+ if(d.crashes != 700) {+}
return "hsl(" + [-hueScale(d.test)-]{+hueScale(d.crashes)+} + ",90%,50%)";
{+}+}
{+ return "#aaa";+}
})
.on('mouseover', displayMessage);
@@ -96,7 +99,7 @@ d3.csv("/media/files/message_mondays.csv", type, function(error, data) {
function type(d) {
//d.date = +d.date;
d.date = new Date(d.date)
[-d.test-]{+d.crashes+} = [-+d.test;-]{++d.crashes;+}
return d;
}
@@ -104,11 +107,13 @@ function type(d) {
{% endblock %}
{% block post %}
{+*In this project, I looked at the freeway digital sign alerts in Iowa charted against statewide accident totals, both obtained via FOIA requests to the Iowa DOT.*+}
<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">156-]{+id="message">MSG: 156+} Traffic Deaths this Year - Don't Add to this number<span>[08-05-2013]</span></h2>[-<p class="small">Note: this graph is for illustration purposes only.</p>-]
{% 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 [-nurery-]{+nursery+} rhyme reminding you to buckle up.. I never once thought, "what a missed opportunity!"
{% endmark %}
They are not such dull thinkers in Iowa. Here, in the famously mild-mannered midwest, the highway signs have real sass. When we arrived and began our daily commute (Iowa City to Cedar Rapids), we immediately noticed the signs.
@@ -139,7 +144,7 @@ Nonetheless, about ten days later, an EXCEL file courtesy of the IowaDOT: 82 wee
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.
The full CSV is [-avalailable-]{+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!
2015-03-03 12:54:37 : Add latest news (accident data).
»
Find 43762c1345a69d1927e3f28cfd430482aa6734c7 on GitHub.
Add latest news (accident data).
{% block post %}
<div id="spicebeam"></div>
[-<h3-]{+<h2+} id="message">156 Traffic Deaths this Year - Don't Add to this [-number<span>[08-05-2013]</span></h3>-]{+number<span>[08-05-2013]</span></h2>+}
<p class="small">Note: this graph is for illustration purposes only.</p>
{% 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 nurery rhyme reminding you to buckle up.. I never once thought, "what a missed opportunity!"
@@ -141,5 +141,7 @@ Nonetheless, about ten days later, an EXCEL file courtesy of the IowaDOT: 82 wee
The full CSV is avalailable 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 %}
2015-03-02 21:45:41 : Adding message mondays to the mix.
»
Find baf7a458c0da1f5710a418c5b644479db3157b95 on GitHub.
Adding message mondays to the mix.
@@ -0,0 +1,145 @@
{+---+}
{+title: Message Mondays +}
{+summary: My first FOIA request, d3.js, and Iowa DOT's sassy highway signs. +}
{+thumbnail: message_mondays.jpg+}
{+date: 2015-03-01 14:08:56+}
{+track: True+}
{+---+}
{+{% block tail_scripts %}+}
{+<script src="http://d3js.org/d3.v3.min.js"></script>+}
{+<script type="text/javascript">+}
{+var margin = {top: 20, right: 20, bottom: 30, left: 30},+}
{+ width = 960 - margin.left - margin.right,+}
{+ height = 350 - margin.top - margin.bottom;+}
{+var x = d3.scale.ordinal()+}
{+ .rangeRoundBands([0, width], .06);+}
{+var y = d3.scale.linear()+}
{+ .range([height, -2]);+}
{+var hueScale = d3.scale.linear()+}
{+ .rangeRound([120, 0]);+}
{+var xTime = d3.time.scale()+}
{+ .range([2, width]);+}
{+var xAxis = d3.svg.axis()+}
{+ .scale(xTime)+}
{+ .orient("bottom")+}
{+ .tickFormat(d3.time.format("%b %y"))+}
{+ .ticks(d3.time.months, 1);+}
{+var yAxis = d3.svg.axis()+}
{+ .scale(y)+}
{+ .orient("left")+}
{+ .ticks(10);+}
{+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(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; })])+}
{+ y.domain([0, d3.max(data, function(d) { return d.test; })]);+}
{+ hueScale.domain([0, d3.max(data, function(d) { return d.test; })]);+}
{+ svg.append("g")+}
{+ .attr("class", "x axis")+}
{+ .attr("transform", "translate(0," + height + ")")+}
{+ .call(xAxis)+}
{+ .selectAll("text")+}
{+ .attr("y", "16")+}
{+ .attr("x", "0")+}
{+ .attr("dy", ".35em")+}
{+ .attr("transform", "rotate(0)")+}
{+ .style("text-anchor", "start");+}
{+ 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("Crashes");+}
{+ var message = d3.select("#message")+}
{+ format = d3.time.format("%m-%d-%Y");+}
{+ var displayMessage = function(el){+}
{+ var formDate = format(el.date); +}
{+ message.text(el.message).append("span").text(" [" + formDate + "]");+}
{+ }+}
{+ svg.selectAll(".bar")+}
{+ .data(data)+}
{+ .enter().append("rect")+}
{+ .attr("class", "bar")+}
{+ .attr("x", function(d) { return xTime(d.date); })+}
{+ .attr("width", x.rangeBand())+}
{+ .attr("y", function(d) { return y(d.test); })+}
{+ .attr("height", function(d) { return height - y(d.test); })+}
{+ .attr("fill", function(d) { +}
{+ return "hsl(" + hueScale(d.test) + ",90%,50%)"; +}
{+ })+}
{+ .on('mouseover', displayMessage);+}
{+});+}
{+function type(d) {+}
{+ //d.date = +d.date;+}
{+ d.date = new Date(d.date) +}
{+ d.test = +d.test;+}
{+ return d;+}
{+}+}
{+</script>+}
{+{% endblock %}+}
{+{% block post %}+}
{+<div id="spicebeam"></div>+}
{+<h3 id="message">156 Traffic Deaths this Year - Don't Add to this number<span>[08-05-2013]</span></h3>+}
{+<p class="small">Note: this graph is for illustration purposes only.</p>+}
{+{% 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 nurery rhyme reminding you to buckle up.. I never once thought, "what a missed opportunity!" +}
{+{% endmark %}+}
{+They are not such dull thinkers in Iowa. Here, in the famously mild-mannered midwest, the highway signs have real sass. When we arrived and began our daily commute (Iowa City to Cedar Rapids), we immediately noticed the signs. +}
{+<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://instagram.com/p/yUdp65JmMg/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_top">I often wonder about the Iowa DOT official in charge of the weekly sign change.</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A photo posted by Madison (@melizbre) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-01-26T14:00:40+00:00">Jan 26, 2015 at 6:00am PST</time></p></div></blockquote>+}
{+<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>+}
{+<br>+}
{+"IN THE BLINK OF AN EYE, YOU COULD DIE." Good morning to you, too. These signs alternate with a sobering daily ticker — "34 traffic deaths so far this year." Driving is serious stuff. That aside, the signs bring some humor and a note of (morbid) grace to the gray morning commute.+}
{+I decided to learn more. I wanted all the signs. +}
{+The IowaDOT has extensive resources online, including an impressive interactive map of the state's roadways, not to mention a surprisingly comprehensive staff [phone book](http://www.iowadot.gov/phonebook.htm). That said, they're much more interested in relaying information about current traffic conditions than historical ones.+}
{+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. +}
{+ #!/usr/bin/env python+}
{+ import random+}
{+ random.seed()+}
{+ for x in range(0, 82):+}
{+ print random.randrange(13, 114, 1) +}
{+ 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 headbeating. +}
{+ The full CSV is avalailable for download [here](/media/files/message_mondays.csv).+}
{+{% endblock %}+}