diff options
Diffstat (limited to '_posts/2015-03-29-visualizing-congress-with-d3.markdown')
| -rw-r--r-- | _posts/2015-03-29-visualizing-congress-with-d3.markdown | 24 |
1 files changed, 14 insertions, 10 deletions
diff --git a/_posts/2015-03-29-visualizing-congress-with-d3.markdown b/_posts/2015-03-29-visualizing-congress-with-d3.markdown index efde0b0..e27377d 100644 --- a/_posts/2015-03-29-visualizing-congress-with-d3.markdown +++ b/_posts/2015-03-29-visualizing-congress-with-d3.markdown @@ -6,22 +6,26 @@ category: writing date: 2015-03-29 00:00:00 --- -<style> -.d3container { - width: 100%; - margin-top: 2em; - margin-bottom: 2em; -} -</style> +<div> + <style scoped> + .d3container { + width: 100%; + margin-top: 2em; + margin-bottom: 2em; + } + </style> +</div> I've been wanting to learn [D3.js](http://d3js.org/) for a while now, so I decided to create some visualizations of the United States Congress, inspired by Neil deGrasse Tyson: <div class="center"> -<img src="/assets/images/vis_ndgt0.jpg"> -<img src="/assets/images/vis_ndgt1.jpg"><br> -<img src="/assets/images/vis_ndgt2.jpg"><br> + <img alt="What profession do all of these senators and congressmen have?" src="/assets/images/vis_ndgt0.jpg"> + <img alt="Law, law, law, law, business man, law, law, law..." src="/assets/images/vis_ndgt1.jpg"><br> + <img alt="Where are the scientists? Where are the engineers? Where's the rest of... life?" src="/assets/images/vis_ndgt2.jpg"><br> </div> +<!--more--> + It wasn't hard to find some [open-source Congress data](https://github.com/unitedstates/congress-legislators), and converting the [YAML](https://github.com/unitedstates/congress-legislators/blob/master/legislators-current.yaml) to [JSON](/assets/data/legislators-current.json) was [practically a one-liner in Ruby](https://gist.github.com/benburwell/20e76f70645c8003b088#file-yaml-to-json-rb). Armed with my trusty JSON data, I set off to learn the basics of D3. Conveniently, D3 packages some of the base functionality that we often turn to jQuery for, eliminating the need to include yet another library. Using CSS selectors to query the DOM, adding nodes and attributes, and fetching JSON data are just a few such functions. |