Created
January 20, 2016 00:25
-
-
Save suneric1/5fd767ce27a4684a9ed2 to your computer and use it in GitHub Desktop.
D3.CSV test
This file contains hidden or 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
| Model | SalesIn2014 | SalesIn2015 | StartingPrice | |
|---|---|---|---|---|
| 1/2 Series | 6621 | 10877 | 32850 | |
| 3 Series | 87451 | 89265 | 33150 | |
| 4 Series | 35583 | 40481 | 41650 | |
| 5 Series | 47187 | 41177 | 50200 | |
| 6 Series | 7757 | 6685 | 77300 | |
| 7 Series | 8648 | 8026 | 81300 | |
| X1 | 20217 | 12651 | 34800 | |
| X3 | 31029 | 28798 | 38950 | |
| X5 | 40933 | 48747 | 53900 |
This file contains hidden or 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> | |
| <!-- This was one of Scott Murray's Knight D3 course files, modified a bit. --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Week 1: CSV data</title> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | |
| </head> | |
| <body> | |
| <p class="csvdata"></p> | |
| <script> | |
| //Load in contents of CSV file | |
| d3.csv("bmw_data.csv", function(data) { | |
| data.forEach(initChart); | |
| //Now CSV contents have been transformed into | |
| //an array of JSON objects. | |
| //console.log("The first file is csv...") | |
| //Log 'data' to the console, for verification. | |
| //console.log(data1); | |
| //$("p.csvdata").text(JSON.stringify(data1)); | |
| }); | |
| function initChart(d){ | |
| d3.select("body").append("p").text(d.Model + " " + d.SalesIn2014 + " " + d.SalesIn2015); | |
| //d3.select("body").append("div").text(d.Model); | |
| //d3.select("body").append("div").text(d.SalesIn2014); | |
| //d3.select("body").append("div").text(d.SalesIn2015); | |
| } | |
| // Notice that the objects look the same. d3.csv() parses rows as objects. | |
| // Also this is a good point to talk about scope and breakpoints. | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment