-
-
Save JenHLab/d0c2e21f121dcd99d8ad to your computer and use it in GitHub Desktop.
Week 3: D3 Table.
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
| Type | year2014 | year2013 | year2012 | year2011 | year2010 | |
|---|---|---|---|---|---|---|
| Drove alone | 76.9 | 76.7 | 76.8 | 77.1 | 76.9 | |
| Carpooled | 9.4 | 9.4 | 9.6 | 9.6 | 9.5 | |
| Public transportation (excluding taxicab) | 5.4 | 5.4 | 5.4 | 5.2 | 5.5 | |
| Walked | 2.3 | 2.3 | 2.2 | 2.1 | 2.2 | |
| Bicycle | 0.6 | 0.6 | 0.5 | 0.5 | 0.4 | |
| Taxicab, motorcycle, or other means | 1.2 | 1.4 | 1.4 | 1.6 | 1.7 | |
| Worked at home | 4.2 | 4.1 | 4.1 | 3.9 | 3.8 |
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Loading CSV Data with D3</title> | |
| </head> | |
| <style> | |
| </style> | |
| <body> | |
| <h1>Miami-Dade Commuters in 2014 and 2010</h1> | |
| <p>This table shows the percentage of commuters in Miami-Dade county in 2014 and 2010. </p> | |
| <div id="table"></div> | |
| <p><b>Source:</b> <em>Commuting Characteristics by Sex</em>. 2010-2014 American Community Survey. US Census.</p> | |
| </body> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script type="text/javascript"> | |
| //modified code from https://github.com/arnicas/interactive-vis-course/blob/gh-pages/Week3/d3_table.html | |
| //Load in contents of CSV file, and do things to the data. | |
| d3.csv("CommutersDade.csv", function(error, myData) { | |
| if (error) { | |
| console.log("Had an error loading file."); | |
| } | |
| var myArray = []; | |
| myData.forEach(function(d, i){ | |
| d.difference = (+d.year2014) - (+d.year2010); | |
| // Add a new array with the values of each: | |
| myArray.push([d.Type, d.year2014, d.year2010, d.difference]); | |
| }); | |
| console.log(myData); | |
| console.log(myArray); | |
| var table = d3.select("#table").append("table"); | |
| var header = table.append("thead").append("tr"); // after this, the header is the tr row. | |
| // do a data join and create th items for each data element in the array | |
| header | |
| .selectAll("th") | |
| .data(["Means of Transportation", "2014 (%)", "2010 (%)", "Difference 2014-2010"]) | |
| .enter() | |
| .append("th") | |
| .text(function(d) { return d; }) | |
| .style ("font-size", "18px") | |
| .style("background-clor", "blue"); | |
| var tablebody = table.append("tbody"); | |
| rows = tablebody | |
| .selectAll("tr") | |
| .data(myArray) | |
| .enter() | |
| .append("tr") | |
| //modified code from http://christopheviau.com/d3_tutorial/ | |
| .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")}) | |
| .on("mouseout", function(){d3.select(this).style("background-color", "white")}) | |
| ; | |
| // We built the rows using the nested array - now each row has its own array. | |
| cells = rows.selectAll("td") | |
| // each row has data associated; we get it and enter it for the cells. | |
| .data(function(d) { | |
| console.log(d); | |
| return d; | |
| }) | |
| .enter() | |
| .append("td") | |
| .style("border", "1px black solid") | |
| .style("padding", "10px") | |
| .text(function(d) { | |
| return d; | |
| }); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment