Created
September 20, 2015 03:39
-
-
Save cornfact/5f7f3aa5a3185344e3cd to your computer and use it in GitHub Desktop.
Price of eggs
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
| eggDate | eggPrice | |
|---|---|---|
| 14-Aug | 1.979 | |
| 14-Sep | 1.97 | |
| 14-Oct | 1.951 | |
| 14-Nov | 2.032 | |
| 14-Dec | 2.21 | |
| 15-Jan | 2.113 | |
| 15-Feb | 2.088 | |
| 15-Mar | 2.133 | |
| 15-Apr | 2.065 | |
| 15-May | 1.962 | |
| 15-Jun | 2.57 | |
| 15-Jul | 2.57 | |
| 15-Aug | 2.943 |
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Loading CSV Data with D3</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| background-color: white; | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| h1 { | |
| font-size: 20px; | |
| margin: 0; | |
| } | |
| p { | |
| font-size: 14px; | |
| margin: 5px 0 0 0; | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| rect:hover { | |
| fill: #FFFF00; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| .y.axis path, | |
| .y.axis line { | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Fewer eggs, higher egg prices</h1> | |
| <p>The price of one dozen grade A eggs as calculated by USDA from August 2014 to August 2015</p> | |
| <script type="text/javascript"> | |
| //define size of graphic | |
| var w = 400; | |
| var h = 300; | |
| var padding = [ 20, 10, 20, 50 ]; //Top, right, bottom, left | |
| //define scale | |
| var widthScale = d3.scale.linear() | |
| .range([ 0, w - padding[1] - padding [3]]); | |
| var heightScale = d3.scale.ordinal() | |
| .rangeRoundBands([ padding[0], h - padding[2] ], 0.1); | |
| //define x axis | |
| var xAxis = d3.svg.axis() | |
| .scale(widthScale) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(heightScale) | |
| .orient("left"); | |
| //define svg | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load in contents of CSV file | |
| d3.csv("eggprices.csv", function(data) { | |
| //console.log(data); | |
| //console.log(data.map(function(d) { return d.eggDate; })); | |
| widthScale.domain([ 0, d3.max(data, function(d) { | |
| return +d.eggPrice; | |
| }) ]); | |
| heightScale.domain(data.map(function(d) { return d.eggDate; } )); | |
| var rects = svg.selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect"); | |
| rects.attr("x", padding[3]) | |
| .attr("y", function(d) { | |
| return heightScale(d.eggDate); | |
| }) | |
| .attr("width", function(d) { | |
| return widthScale(d.eggPrice); | |
| }) | |
| .attr("height", heightScale.rangeBand()) | |
| .append("title") | |
| .attr("fill", "black") | |
| .text(function(d) { | |
| return d.eggDate + "'s price of eggs is $" + d.eggPrice; | |
| }); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (padding[3] - 5) + ",0)") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment