| license: mit |
Built with blockbuilder.org
forked from romsson's block: Scatterplot Iris using different marks
forked from anonymous's block: Scatterplot Iris using different marks
forked from romsson's block: [introd3] scatterplot using iris dataset
forked from romsson's block: [introd3] scatterplot using iris dataset (template)
forked from romsson's block: [introd3] scatterplot using iris dataset (template)
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scaleLinear() | |
| .range([0, width]) | |
| var y = d3.scaleLinear() | |
| .range([0, height]) | |
| var r = d3.scaleSqrt() | |
| .range([5, 10]) | |
| var xAxis = d3.axisBottom() | |
| .scale(x); | |
| var yAxis = d3.axisLeft() | |
| .scale(y); | |
| var color = d3.scaleOrdinal(d3.schemeCategory20); | |
| 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.csv('iris.csv', function(error, data){ | |
| // pre-processing (transform text to numbers) | |
| data.forEach(function(d){ | |
| d.sepal_length = +d.sepal_length; | |
| d.petal_length = +d.petal_length; | |
| d.sepal_width = +d.sepal_width; | |
| d.petal_width = +d.petal_width; | |
| }); | |
| // update scales | |
| x.domain(d3.extent(data, function(d){ | |
| return d.sepal_length; | |
| })); | |
| y.domain(d3.extent(data, function(d){ | |
| return d.sepal_width; | |
| })); | |
| r.domain(d3.extent(data, function(d){ | |
| return d.petal_length; | |
| })); | |
| // Add axis names | |
| svg.append('g') | |
| .attr('transform', 'translate(0,' + height + ')') | |
| .attr('class', 'x axis') | |
| .call(xAxis); | |
| svg.append('g') | |
| .attr('transform', 'translate(0,0)') | |
| .attr('class', 'y axis') | |
| .call(yAxis); | |
| svg.append('text') | |
| .attr('x', 10) | |
| .attr('y', 10) | |
| .attr('class', 'label') | |
| .text('Sepal Width'); | |
| svg.append('text') | |
| .attr('x', width) | |
| .attr('y', height - 10) | |
| .attr('text-anchor', 'end') //start writing left to right | |
| .attr('class', 'label') | |
| .text('Sepal Length'); | |
| //draw circles | |
| svg.selectAll("circle").data(data).enter() | |
| .append("circle") | |
| .attr("class", "dot") | |
| .attr("r", function(d) {return r(d.petal_length); }) | |
| .attr("fill", function(d) { return color(d.species); }) | |
| .attr("transform", function(d) { | |
| return "translate(" + x(d.sepal_length) + "," + y(d.sepal_width) +")"; | |
| }) | |
| .on("click", function(d) { | |
| d3.selectAll("circle") | |
| .style("stroke-width", 0); | |
| d3.select(this) | |
| .style("stroke-width", 10) | |
| .style("stroke", "red"); | |
| }) | |
| // .on("mouseenter", function(d)){ | |
| // svg ... | |
| // create legend | |
| var legend = svg.selectAll(".legend") | |
| // .data( ... | |
| // legend.append("rect") | |
| // ... | |
| // legend.append("text") | |
| // ... | |
| }); | |
| </script> |
| sepal_length | sepal_width | petal_length | petal_width | 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.1 | setosa | |
| 5.0 | 3.2 | 1.2 | 0.2 | setosa | |
| 5.5 | 3.5 | 1.3 | 0.2 | setosa | |
| 4.9 | 3.1 | 1.5 | 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 |