Scatterplot This scatterplot is constructed from a CSV file storing the dimensions of sepals and petals of various iris flowers.
| sepalLength | sepalWidth | petalLength | petalWidth | species | |
|---|---|---|---|---|---|
| 5.1 | 3.5 | 1.4 | 0.2 | setosa | |
| 4.9 | 3.0 | 1.4 | 0.2 | setosa | |
| 4.7 | 3.2 | 1.3 | 0.2 | setosa | |
| 4.6 | 3.1 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.6 | 1.4 | 0.2 | setosa | |
| 5.4 | 3.9 | 1.7 | 0.4 | setosa | |
| 4.6 | 3.4 | 1.4 | 0.3 | setosa | |
| 5.0 | 3.4 | 1.5 | 0.2 | setosa | |
| 4.4 | 2.9 | 1.4 | 0.2 | setosa | |
| 4.9 | 3.1 | 1.5 | 0.1 | setosa | |
| 5.4 | 3.7 | 1.5 | 0.2 | setosa | |
| 4.8 | 3.4 | 1.6 | 0.2 | setosa | |
| 4.8 | 3.0 | 1.4 | 0.1 | setosa | |
| 4.3 | 3.0 | 1.1 | 0.1 | setosa | |
| 5.8 | 4.0 | 1.2 | 0.2 | setosa | |
| 5.7 | 4.4 | 1.5 | 0.4 | setosa | |
| 5.4 | 3.9 | 1.3 | 0.4 | setosa | |
| 5.1 | 3.5 | 1.4 | 0.3 | setosa | |
| 5.7 | 3.8 | 1.7 | 0.3 | setosa | |
| 5.1 | 3.8 | 1.5 | 0.3 | setosa | |
| 5.4 | 3.4 | 1.7 | 0.2 | setosa | |
| 5.1 | 3.7 | 1.5 | 0.4 | setosa | |
| 4.6 | 3.6 | 1.0 | 0.2 | setosa | |
| 5.1 | 3.3 | 1.7 | 0.5 | setosa | |
| 4.8 | 3.4 | 1.9 | 0.2 | setosa | |
| 5.0 | 3.0 | 1.6 | 0.2 | setosa | |
| 5.0 | 3.4 | 1.6 | 0.4 | setosa | |
| 5.2 | 3.5 | 1.5 | 0.2 | setosa | |
| 5.2 | 3.4 | 1.4 | 0.2 | setosa | |
| 4.7 | 3.2 | 1.6 | 0.2 | setosa | |
| 4.8 | 3.1 | 1.6 | 0.2 | setosa | |
| 5.4 | 3.4 | 1.5 | 0.4 | setosa | |
| 5.2 | 4.1 | 1.5 | 0.1 | setosa | |
| 5.5 | 4.2 | 1.4 | 0.2 | setosa | |
| 4.9 | 3.1 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.2 | 1.2 | 0.2 | setosa | |
| 5.5 | 3.5 | 1.3 | 0.2 | setosa | |
| 4.9 | 3.6 | 1.4 | 0.1 | setosa | |
| 4.4 | 3.0 | 1.3 | 0.2 | setosa | |
| 5.1 | 3.4 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.5 | 1.3 | 0.3 | setosa | |
| 4.5 | 2.3 | 1.3 | 0.3 | setosa | |
| 4.4 | 3.2 | 1.3 | 0.2 | setosa | |
| 5.0 | 3.5 | 1.6 | 0.6 | setosa | |
| 5.1 | 3.8 | 1.9 | 0.4 | setosa | |
| 4.8 | 3.0 | 1.4 | 0.3 | setosa | |
| 5.1 | 3.8 | 1.6 | 0.2 | setosa | |
| 4.6 | 3.2 | 1.4 | 0.2 | setosa | |
| 5.3 | 3.7 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.3 | 1.4 | 0.2 | setosa | |
| 7.0 | 3.2 | 4.7 | 1.4 | versicolor | |
| 6.4 | 3.2 | 4.5 | 1.5 | versicolor | |
| 6.9 | 3.1 | 4.9 | 1.5 | versicolor | |
| 5.5 | 2.3 | 4.0 | 1.3 | versicolor | |
| 6.5 | 2.8 | 4.6 | 1.5 | versicolor | |
| 5.7 | 2.8 | 4.5 | 1.3 | versicolor | |
| 6.3 | 3.3 | 4.7 | 1.6 | versicolor | |
| 4.9 | 2.4 | 3.3 | 1.0 | versicolor | |
| 6.6 | 2.9 | 4.6 | 1.3 | versicolor | |
| 5.2 | 2.7 | 3.9 | 1.4 | versicolor | |
| 5.0 | 2.0 | 3.5 | 1.0 | versicolor | |
| 5.9 | 3.0 | 4.2 | 1.5 | versicolor | |
| 6.0 | 2.2 | 4.0 | 1.0 | versicolor | |
| 6.1 | 2.9 | 4.7 | 1.4 | versicolor | |
| 5.6 | 2.9 | 3.6 | 1.3 | versicolor | |
| 6.7 | 3.1 | 4.4 | 1.4 | versicolor | |
| 5.6 | 3.0 | 4.5 | 1.5 | versicolor | |
| 5.8 | 2.7 | 4.1 | 1.0 | versicolor | |
| 6.2 | 2.2 | 4.5 | 1.5 | versicolor | |
| 5.6 | 2.5 | 3.9 | 1.1 | versicolor | |
| 5.9 | 3.2 | 4.8 | 1.8 | versicolor | |
| 6.1 | 2.8 | 4.0 | 1.3 | versicolor | |
| 6.3 | 2.5 | 4.9 | 1.5 | versicolor | |
| 6.1 | 2.8 | 4.7 | 1.2 | versicolor | |
| 6.4 | 2.9 | 4.3 | 1.3 | versicolor | |
| 6.6 | 3.0 | 4.4 | 1.4 | versicolor | |
| 6.8 | 2.8 | 4.8 | 1.4 | versicolor | |
| 6.7 | 3.0 | 5.0 | 1.7 | versicolor | |
| 6.0 | 2.9 | 4.5 | 1.5 | versicolor | |
| 5.7 | 2.6 | 3.5 | 1.0 | versicolor | |
| 5.5 | 2.4 | 3.8 | 1.1 | versicolor | |
| 5.5 | 2.4 | 3.7 | 1.0 | versicolor | |
| 5.8 | 2.7 | 3.9 | 1.2 | versicolor | |
| 6.0 | 2.7 | 5.1 | 1.6 | versicolor | |
| 5.4 | 3.0 | 4.5 | 1.5 | versicolor | |
| 6.0 | 3.4 | 4.5 | 1.6 | versicolor | |
| 6.7 | 3.1 | 4.7 | 1.5 | versicolor | |
| 6.3 | 2.3 | 4.4 | 1.3 | versicolor | |
| 5.6 | 3.0 | 4.1 | 1.3 | versicolor | |
| 5.5 | 2.5 | 4.0 | 1.3 | versicolor | |
| 5.5 | 2.6 | 4.4 | 1.2 | versicolor | |
| 6.1 | 3.0 | 4.6 | 1.4 | versicolor | |
| 5.8 | 2.6 | 4.0 | 1.2 | versicolor | |
| 5.0 | 2.3 | 3.3 | 1.0 | versicolor | |
| 5.6 | 2.7 | 4.2 | 1.3 | versicolor | |
| 5.7 | 3.0 | 4.2 | 1.2 | versicolor | |
| 5.7 | 2.9 | 4.2 | 1.3 | versicolor | |
| 6.2 | 2.9 | 4.3 | 1.3 | versicolor | |
| 5.1 | 2.5 | 3.0 | 1.1 | versicolor | |
| 5.7 | 2.8 | 4.1 | 1.3 | versicolor | |
| 6.3 | 3.3 | 6.0 | 2.5 | virginica | |
| 5.8 | 2.7 | 5.1 | 1.9 | virginica | |
| 7.1 | 3.0 | 5.9 | 2.1 | virginica | |
| 6.3 | 2.9 | 5.6 | 1.8 | virginica | |
| 6.5 | 3.0 | 5.8 | 2.2 | virginica | |
| 7.6 | 3.0 | 6.6 | 2.1 | virginica | |
| 4.9 | 2.5 | 4.5 | 1.7 | virginica | |
| 7.3 | 2.9 | 6.3 | 1.8 | virginica | |
| 6.7 | 2.5 | 5.8 | 1.8 | virginica | |
| 7.2 | 3.6 | 6.1 | 2.5 | virginica | |
| 6.5 | 3.2 | 5.1 | 2.0 | virginica | |
| 6.4 | 2.7 | 5.3 | 1.9 | virginica | |
| 6.8 | 3.0 | 5.5 | 2.1 | virginica | |
| 5.7 | 2.5 | 5.0 | 2.0 | virginica | |
| 5.8 | 2.8 | 5.1 | 2.4 | virginica | |
| 6.4 | 3.2 | 5.3 | 2.3 | virginica | |
| 6.5 | 3.0 | 5.5 | 1.8 | virginica | |
| 7.7 | 3.8 | 6.7 | 2.2 | virginica | |
| 7.7 | 2.6 | 6.9 | 2.3 | virginica | |
| 6.0 | 2.2 | 5.0 | 1.5 | virginica | |
| 6.9 | 3.2 | 5.7 | 2.3 | virginica | |
| 5.6 | 2.8 | 4.9 | 2.0 | virginica | |
| 7.7 | 2.8 | 6.7 | 2.0 | virginica | |
| 6.3 | 2.7 | 4.9 | 1.8 | virginica | |
| 6.7 | 3.3 | 5.7 | 2.1 | virginica | |
| 7.2 | 3.2 | 6.0 | 1.8 | virginica | |
| 6.2 | 2.8 | 4.8 | 1.8 | virginica | |
| 6.1 | 3.0 | 4.9 | 1.8 | virginica | |
| 6.4 | 2.8 | 5.6 | 2.1 | virginica | |
| 7.2 | 3.0 | 5.8 | 1.6 | virginica | |
| 7.4 | 2.8 | 6.1 | 1.9 | virginica | |
| 7.9 | 3.8 | 6.4 | 2.0 | virginica | |
| 6.4 | 2.8 | 5.6 | 2.2 | virginica | |
| 6.3 | 2.8 | 5.1 | 1.5 | virginica | |
| 6.1 | 2.6 | 5.6 | 1.4 | virginica | |
| 7.7 | 3.0 | 6.1 | 2.3 | virginica | |
| 6.3 | 3.4 | 5.6 | 2.4 | virginica | |
| 6.4 | 3.1 | 5.5 | 1.8 | virginica | |
| 6.0 | 3.0 | 4.8 | 1.8 | virginica | |
| 6.9 | 3.1 | 5.4 | 2.1 | virginica | |
| 6.7 | 3.1 | 5.6 | 2.4 | virginica | |
| 6.9 | 3.1 | 5.1 | 2.3 | virginica | |
| 5.8 | 2.7 | 5.1 | 1.9 | virginica | |
| 6.8 | 3.2 | 5.9 | 2.3 | virginica | |
| 6.7 | 3.3 | 5.7 | 2.5 | virginica | |
| 6.7 | 3.0 | 5.2 | 2.3 | virginica | |
| 6.3 | 2.5 | 5.0 | 1.9 | virginica | |
| 6.5 | 3.0 | 5.2 | 2.0 | virginica | |
| 6.2 | 3.4 | 5.4 | 2.3 | virginica | |
| 5.9 | 3.0 | 5.1 | 1.8 | virginica |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Scatterplot chart</title> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <style media="screen"> | |
| body { | |
| font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| color: rgb(128,128,128); | |
| } | |
| h1{ | |
| font-weight: normal; | |
| font-size: 25px; | |
| color: #777; | |
| } | |
| circle:hover{ | |
| opacity: .8; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: rgb(197,197,197); | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| fill: rgb(128,128,128); | |
| } | |
| .axis text { | |
| font-size: 12px; | |
| } | |
| .virginica { | |
| fill: rgb(24,188,204); | |
| } | |
| .versicolor { | |
| fill: rgb(161,205,59); | |
| } | |
| .setosa { | |
| fill: rgb(240,140,0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //margin convention | |
| var margin = {top: 10, right: 20, bottom: 60, left: 30}, | |
| width = 960 - margin.left - margin.right, | |
| height = 650 - margin.top - margin.bottom; | |
| //create x and y scale. We'll set the domain later | |
| var xScale = d3.scale.linear() | |
| .range([ margin.bottom, width - margin.top - margin.bottom ]); | |
| var yScale = d3.scale.linear() | |
| .range([ height - margin.right, margin.top]); | |
| //d3 functions to format numbers https://github.com/mbostock/d3/wiki/Formatting | |
| var format = d3.format("s"); | |
| var formatComma = d3.format(","); | |
| //create x axis | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(8) | |
| .tickFormat(function(d) { | |
| return format(d); | |
| }); | |
| //create y axis | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .tickFormat(function(d) { | |
| return format(d); | |
| }); | |
| //create svg container | |
| 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 + ")"); | |
| //load data | |
| d3.csv("data.csv", type, function(error, data){ | |
| var trans = 15; | |
| //set scales domain | |
| xScale.domain(d3.extent(data, function(d) { | |
| return d.sepalWidth; | |
| })); | |
| yScale.domain(d3.extent(data, function(d) { | |
| return d.sepalLength; | |
| })); | |
| //create our circles, one for each country data | |
| var circles = svg.selectAll("circle") | |
| .data(data); | |
| //new elements | |
| circles | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d){ | |
| return xScale(d.sepalWidth); | |
| }) | |
| .attr("cy", height) | |
| .attr("fill", "white"); | |
| //update position to make the animation | |
| circles | |
| .sort(function(a, b) { | |
| return d3.ascending(+a.sepalWidth, +b.sepalWidth); | |
| }) | |
| .transition() | |
| .delay(function(d, i){return i*2;}) | |
| .duration(1000) | |
| .attr("cy", function(d) { | |
| return yScale(d.sepalLength); | |
| }) | |
| .attr("r", 4) | |
| .attr("opacity", ".9") | |
| .attr("class", function(d){ | |
| return d.species; | |
| }); | |
| //create title with data | |
| circles | |
| .append("title") | |
| .text(function(d) { | |
| return d.species +": "+formatComma(d.sepalWidth)+" cm sepal width and "+formatComma(d.sepalLength)+" cm sepal length"; | |
| }); | |
| //create axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (height) + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("y", 35) | |
| .attr("x",width/2-margin.left) | |
| .attr("dy", ".5em") | |
| .text("Sepal Width (cm)"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (margin.bottom - trans) + ",0)") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y",-55) | |
| .attr("x",-(height/2)-margin.top) | |
| .attr("dx", "1em") | |
| .text("Sepal Length (cm)"); | |
| }); | |
| function type(d){ | |
| d.sepalLength = + d.sepalLength; | |
| d.sepalWidth = +d.sepalWidth; | |
| return d; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment