| license: gpl-3.0 |
This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:
forked from mbostock's block: Scatterplot
forked from andrewwitherspoon's block: Scatterplot
| state | percent | salary | |
|---|---|---|---|
| Rhode Island | 0.0 | 66197 | |
| Wyoming | 20.3 | 57761 | |
| North Dakota | 19.5 | 50237 | |
| Massachusetts | 17.4 | 76981 | |
| DC | 14.4 | 75810 | |
| Montana | 13.3 | 51215 | |
| Vermont | 10.8 | 58901 | |
| New Hampshire | 10.7 | 58802 | |
| Nebraska | 9.8 | 51364 | |
| New York | 8.6 | 77957 | |
| California | 8.5 | 72842 | |
| Iowa | 8.4 | 54416 | |
| Maryland | 7.2 | 66482 | |
| Alaska | 3.1 | 67443 | |
| New Mexico | 2.9 | 47163 | |
| Nevada | 2.7 | 56943 | |
| South Dakota | 2.7 | 42025 | |
| Arkansas | 2.6 | 48220 | |
| Oklahoma | 2.0 | 44921 | |
| Minnesota | 1.6 | 56910 | |
| Kentucky | 0.9 | 51666 | |
| Oregon | 0.8 | 60064 | |
| Hawaii | 0.6 | 57431 | |
| Maine | 0.4 | 50229 | |
| Louisiana | 0.3 | 46733 | |
| Kansas | -0.1 | 49197 | |
| Connecticut | -1.2 | 72013 | |
| USA | -1.3 | 58064 | |
| Texas | -2.1 | 51758 | |
| Ohio | -3.3 | 56410 | |
| Alabama | -3.6 | 49781 | |
| South Carolina | -4.4 | 48542 | |
| Pennsylvania | -4.4 | 64991 | |
| Missouri | -4.7 | 47849 | |
| Mississippi | -4.7 | 42744 | |
| Tennessee | -4.7 | 48708 | |
| Florida | -4.8 | 49199 | |
| New Jersey | -5.3 | 69330 | |
| Wisconsin | -5.4 | 54766 | |
| Delaware | -5.5 | 59085 | |
| Georgia | -6.1 | 54190 | |
| Illinois | -6.2 | 61342 | |
| Utah | -6.4 | 46042 | |
| West Virginia | -6.7 | 45977 | |
| Virginia | -6.8 | 50834 | |
| Colorado | -6.8 | 50039 | |
| Michigan | -7.5 | 63878 | |
| Washington | -9.1 | 52539 | |
| Idaho | -9.2 | 45409 | |
| Arizona | -12.4 | 45477 | |
| North Carolina | -13.5 | 47985 | |
| Indiana | -13.9 | 50715 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .dot { | |
| stroke: #000; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 40, right: 40, bottom: 40, left: 40}, | |
| width = 500 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.linear() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var color = d3.scale.category10(); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| 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 + ")"); | |
| d3.tsv("data.tsv", function(error, data) { | |
| if (error) throw error; | |
| data.forEach(function(d) { | |
| d.percent = +d.percent; | |
| d.salary = +d.salary; | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d.percent; })).nice(); | |
| y.domain(d3.extent(data, function(d) { return d.salary; })).nice(); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("x", width) | |
| .attr("y", -6) | |
| .style("text-anchor", "end") | |
| .text("Percent change 00-16"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("2016 salary") | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", function(d) { return x(d.percent); }) | |
| .attr("cy", function(d) { return y(d.salary); }) | |
| .style("fill", function(d) { return color(d.correlation); }); | |
| svg.selectAll("stuff") | |
| .data(data) | |
| .enter().append("text") | |
| .attr("class", "text") | |
| .attr("x", function(d) { return x(d.percent); }) | |
| .attr("y", function(d) { return y(d.salary); }) | |
| .text( function(d) { return (d.state); }); | |
| }); | |
| </script> |