| 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 | gun_deaths | gun_ownership | |
|---|---|---|---|
| Alabama | 17.40 | 48.9 | |
| Alaska | 18.50 | 61.7 | |
| Arizona | 13.96 | 32.3 | |
| Arkansas | 16.35 | 57.9 | |
| California | 7.82 | 20.1 | |
| Colorado | 11.10 | 34.3 | |
| Connecticut | 4.20 | 16.6 | |
| Delaware | 8.97 | 5.2 | |
| Florida | 12.40 | 32.5 | |
| Georgia | 12.55 | 31.6 | |
| Hawaii | 1.64 | 45.1 | |
| Idaho | 12.41 | 56.9 | |
| Illinois | 8.55 | 26.2 | |
| Indiana | 12.87 | 33.8 | |
| Iowa | 7.54 | 33.8 | |
| Kansas | 10.82 | 32.2 | |
| Kentucky | 13.70 | 42.4 | |
| Louisiana | 18.53 | 44.5 | |
| Maine | 10.31 | 22.6 | |
| Maryland | 9.58 | 20.7 | |
| Massachusetts | 3.11 | 22.6 | |
| Michigan | 11.74 | 28.8 | |
| Minnesota | 7.49 | 36.7 | |
| Mississippi | 16.85 | 42.8 | |
| Missouri | 13.95 | 27.1 | |
| Montana | 15.47 | 52.3 | |
| Nebraska | 7.97 | 19.8 | |
| Nevada | 13.44 | 37.5 | |
| New Hampshire | 6.12 | 14.4 | |
| New Jersey | 5.48 | 11.3 | |
| New Mexico | 14.82 | 49.9 | |
| New York | 4.32 | 10.3 | |
| North Carolina | 12.26 | 28.7 | |
| North Dakota | 10.51 | 47.9 | |
| Ohio | 11.00 | 19.6 | |
| Oklahoma | 15.87 | 31.2 | |
| Oregon | 10.97 | 26.6 | |
| Pennsylvania | 11.21 | 27.1 | |
| Rhode Island | 4.18 | 5.8 | |
| South Carolina | 15.39 | 44.4 | |
| South Dakota | 8.05 | 35.0 | |
| Tennessee | 15.49 | 39.4 | |
| Texas | 10.47 | 35.7 | |
| Utah | 11.10 | 31.9 | |
| Vermont | 8.94 | 28.8 | |
| Virginia | 10.10 | 29.3 | |
| Washington | 8.86 | 27.7 | |
| West Virginia | 14.45 | 54.2 | |
| Wisconsin | 9.61 | 34.7 | |
| Wyoming | 15.27 | 53.8 |
| <!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.gun_deaths = +d.gun_deaths; | |
| d.gun_ownership = +d.gun_ownership; | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d.gun_deaths; })).nice(); | |
| y.domain(d3.extent(data, function(d) { return d.gun_ownership; })).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("Death rate"); | |
| 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("Gun ownserhip") | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", function(d) { return x(d.gun_deaths); }) | |
| .attr("cy", function(d) { return y(d.gun_ownership); }) | |
| .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.gun_deaths); }) | |
| .attr("y", function(d) { return y(d.gun_ownership); }) | |
| .text( function(d) { return (d.state); }); | |
| }); | |
| </script> |