Created
March 13, 2016 21:14
-
-
Save martin-martin/8d71b426ffa229330e04 to your computer and use it in GitHub Desktop.
visual comment on a graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>d3eath sentence</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type='text/css'> | |
| /*some style for the visualization*/ | |
| body { | |
| max-width: 400px; | |
| margin: auto; | |
| text-align: center; | |
| } | |
| p { | |
| color: lightgray; | |
| } | |
| a { | |
| color: gray; | |
| } | |
| .chart, | |
| .axis { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: vertical; | |
| font-size: 10px; | |
| } | |
| .chart div { | |
| font-family: sans-serif; | |
| background-color: black; | |
| color: white; | |
| width: 20px; | |
| height: 50px; /*this gets overwritten in the draw() function*/ | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| // data of death sentences in the USA for 4 years | |
| var data = [ | |
| { | |
| 'year': 2000, | |
| 'deaths': 85 | |
| }, | |
| { | |
| 'year': 2005, | |
| 'deaths': 60 | |
| }, | |
| { | |
| 'year': 2010, | |
| 'deaths': 46 | |
| }, | |
| { | |
| 'year': 2015, | |
| 'deaths': 28 | |
| } | |
| ]; | |
| // drawing the bar chart | |
| function draw(data) { | |
| d3.select('.chart') | |
| .selectAll('div') | |
| .data(data) | |
| .enter() | |
| .append('div') | |
| .style('height', function(d) { return d.deaths * 10 + 'px'; }) | |
| .text(function(d) { return d.deaths; }); | |
| // highlighting the data-associated ticks | |
| d3.selectAll('.five') | |
| .style('color', 'black'); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <!-- introduction and explanation --> | |
| <h1>number of death sentences executed in the USA<br><em>for specific years</em></h1> | |
| <p style="color:black;">what <a href="http://viz.wtf/image/140698552508">this graph</a> <strong>misses</strong> are reproducible <strong>values</strong></p> | |
| <hr> | |
| <!-- creating an amateur axis object... --> | |
| <div class="axis"> | |
| <p class="five">2000</p> | |
| <p>2001</p> | |
| <p>2002</p> | |
| <p>2013</p> | |
| <p>2014</p> | |
| <p class="five">2005</p> | |
| <p>2006</p> | |
| <p>2007</p> | |
| <p>2018</p> | |
| <p>2019</p> | |
| <p class="five">2010</p> | |
| <p>2011</p> | |
| <p>2012</p> | |
| <p>2013</p> | |
| <p>2014</p> | |
| <p class="five">2015</p> | |
| </div> | |
| <!-- basic html structure where the d3 bars get appended --> | |
| <div class='chart'></div> | |
| <script type='text/javascript'> | |
| // calling the function that populates the div | |
| draw(data); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I tried to express my comments on a graph through creating a visualization.
It was an interesting task to try to see what are the main problems that I noticed in the original visualization, and in what way could I communicate them visually.
This mini-project is a slight alteration, but still part of the p6 of the Udacity Data Analyst Nanodegree.