Last active
September 17, 2023 15:08
-
-
Save kaz-a/58224255b41e64810652d89b8f976673 to your computer and use it in GitHub Desktop.
Simple d3 bar chart
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> | |
| <meta charset="utf-8"> | |
| <title>Rent in the US</title> | |
| <style type="text/css"> | |
| @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'); | |
| body { | |
| width: 800px; | |
| margin: 20px auto; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 300; | |
| font-size: 11px; | |
| } | |
| .axis line, | |
| .axis path { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis--x line{ | |
| display: none; | |
| } | |
| .axis--x path { | |
| display: none; | |
| } | |
| .axis--y path { | |
| display: none; | |
| } | |
| h1, h3 { | |
| text-align: center; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| text-align: left; | |
| width: auto; | |
| height: auto; | |
| padding: 8px; | |
| font: 12px sans-serif; | |
| background: black; | |
| border-radius: 0px; | |
| pointer-events: none; | |
| color: white; | |
| } | |
| .mean { | |
| stroke-width: 1px; | |
| stroke: red; | |
| } | |
| </style> | |
| <body> | |
| <h1>Average Rent of 1-Bedroom Apartment in the US</h1> | |
| <h3><a href="http://time.com/money/4359971/average-apartment-cost-us-cities/">TIME Money</a> | June 2016</h3> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| var margin = {top: 10, right: 10, bottom: 100, left: 60}; | |
| var width = 800 - margin.left - margin.right, | |
| height = 600 - margin.top - margin.bottom; | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0,width],1); | |
| var x2 = d3.scale.ordinal() | |
| .rangeRoundBands([0,width],0); | |
| var y = d3.scale.linear() | |
| .range([height,0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var color = d3.scale.category10(); | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| d3.csv("rent.csv", ready); | |
| function ready(error, data) { | |
| if (error) throw error; | |
| data.forEach(function(d) { | |
| d.rent = +d.Rent; | |
| }); | |
| console.log("data", data); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| x.domain(data.map(function(d) { return d.City; })); | |
| y.domain([0, d3.max(data, function(d) { return d.rent; })]); | |
| x2.domain(data.map(function(d) { return d.City; })); | |
| svg.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .attr("y", 0) | |
| .attr("x", 9) | |
| .attr("dy", "-0.2em") | |
| .attr("transform", "rotate(90)") | |
| .style("text-anchor", "start"); | |
| svg.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(yAxis) | |
| .append("text") | |
| //.attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", "0em") | |
| .attr("text-anchor", "end") | |
| .text("Rent ($)"); | |
| bars = svg.append("g").attr("class", "bars"); | |
| bars.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.City); }) | |
| .attr("y", function(d) { return y(d.rent); }) | |
| .attr("width", 10) | |
| .attr("height", function(d) { return height - y(d.rent); }) | |
| .style("fill", "#ccc") | |
| .on("mouseover", function(d) { | |
| d3.select(this).style("fill", function(d) { return color(d.City); }) | |
| tooltip.text(d.City + ", " + d.State + " $" + d.rent) | |
| .style("opacity", 0.8) | |
| .style("left", (d3.event.pageX)+0 + "px") | |
| .style("top", (d3.event.pageY)-0 + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.style("opacity", 0); | |
| d3.select(this).style("fill", "#ccc"); | |
| }); | |
| var sum = d3.sum(data, function(d) { return d.rent; }); | |
| var average = sum/data.length; | |
| var line = d3.svg.line() | |
| .x(function(d, i) { return x2(d.City) + i; }) | |
| .y(function(d, i) { return y(average); }); | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "mean") | |
| .attr("d", line); | |
| svg.append("text") | |
| .attr("transform", "translate(" + (width+3) + "," + y(average) + ")") | |
| .attr("dy", "1em") | |
| .attr("text-anchor", "end") | |
| .style("fill", "red") | |
| .html("Average = $" + average); | |
| } | |
| </script> |
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
| City | State | Rent | |
|---|---|---|---|
| San Francisco | CA | 3600 | |
| San Jose | CA | 2536 | |
| New York | NY | 2200 | |
| Washington DC | DC | 2172 | |
| Boston | MA | 2025 | |
| Los Angeles | CA | 2014 | |
| Miami | FL | 2000 | |
| Pittsburgh | PA | 1850 | |
| Honolulu | HI | 1795 | |
| Seattle | WA | 1795 | |
| San Diego | CA | 1760 | |
| Anaheim | CA | 1606 | |
| Chicago | IL | 1595 | |
| Denver | CO | 1436 | |
| Minneapolis | MN | 1435 | |
| Nashville | TN | 1395 | |
| Atlanta | GA | 1387 | |
| Houston | TX | 1308 | |
| New Orleans | LA | 1298 | |
| Philadelphia | PA | 1295 | |
| Dallas | TX | 1271 | |
| Charlotte | NC | 1265 | |
| Baltimore | MD | 1175 | |
| Tampa | FL | 1100 | |
| Austin | TX | 1100 | |
| Portland | OR | 1095 | |
| Anchorage | AL | 995 | |
| Sacramento | CA | 995 | |
| Virginia Beach | VA | 975 | |
| Phoenix | AZ | 909 | |
| Jacksonville | FL | 896 | |
| Las Vegas | NV | 875 | |
| Newark | NJ | 850 | |
| Memphis | TN | 835 | |
| San Antonio | TX | 830 | |
| Kansas City | MO | 795 | |
| Omaha | NE | 759 | |
| Colorado Springs | CO | 750 | |
| Milwaukee | WI | 750 | |
| Louisville | KY | 750 | |
| Columbus | OH | 750 | |
| Indianapolis | IN | 732 | |
| Albuquerque | NM | 715 | |
| St. Louis | MO | 700 | |
| Oklahoma | City OK | 650 | |
| El Paso | TX | 600 | |
| Tuscon | AZ | 560 | |
| Detroit | MI | 550 | |
| Cleveland | OH | 525 | |
| Wichita | KS | 470 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment