| 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
| <!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="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([height, 0]); | |
| var r = d3.scaleSqrt() | |
| .range([2,10]); | |
| var xAxis = d3.axisBottom() | |
| .scale(x); | |
| var yAxis = d3.axisLeft() | |
| .scale(y); | |
| var color = d3.scaleOrdinal(d3.schemeCategory20); | |
| var symbols = d3.scaleOrdinal(d3.symbols); | |
| // creates a generator for symbols | |
| var symbol = d3.symbol().size(100); | |
| 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){ | |
| data.forEach(function(d){ | |
| d.sepal_length = +d.sepal_length; | |
| d.sepal_width = +d.sepal_width; | |
| d.petal_length = +d.petal_length; | |
| d.petal_width = +d.petal_width; | |
| }); | |
| x.domain(d3.extent(data, function(d){ | |
| return d.sepal_length; | |
| })).nice(); | |
| y.domain(d3.extent(data, function(d){ | |
| return d.sepal_width; | |
| })).nice(); | |
| r.domain(d3.extent(data, function(d){ | |
| return d.petal_length; | |
| })).nice(); | |
| // Axis | |
| 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') | |
| .attr('class', 'label') | |
| .text('Sepal Length'); | |
| // Use the ordinal scale symbols to generate symbols | |
| // such as d3.symbolCross, etc.. | |
| // -> symbol.type(d3.symbolCross)() | |
| svg.selectAll("path") | |
| .data(data) | |
| .enter().append("path") | |
| .attr("class", "symbol") | |
| .attr("d", function(d, i) { return symbol.type(symbols(d.species))(); }) | |
| .style("fill", function(d) { return color(d.species); }) | |
| .attr("transform", function(d) { | |
| return "translate(" + x(d.sepal_length) + "," + y(d.sepal_width) +")"; | |
| }); | |
| // color.domain() | |
| var legend = svg.selectAll(".legend") | |
| .data(color.domain()) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
| var clicked = null | |
| legend.append("path") | |
| .style("fill", function(d) { return color(d); }) | |
| .attr("d", function(d, i) { return symbol.type(symbols(d))(); }) | |
| .attr("transform", function(d, i) { | |
| return "translate(" + (width -10) + "," + 10 + ")"; | |
| }) | |
| .on("click", function(d) { | |
| // Sets the current cateogry opacity | |
| d3.selectAll(".symbol").style("opacity", 1) | |
| if(clicked !== d) { | |
| d3.selectAll(".symbol") | |
| .filter(function(e) { | |
| return e.species !== d | |
| }) | |
| .style("opacity", 0.1); | |
| // memorize the clicked category | |
| clicked = d; | |
| } else { | |
| // reset | |
| clicked = null; | |
| } | |
| }); | |
| legend.append("text") | |
| .attr("x", width - 24) | |
| .attr("y", 9) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "end") | |
| .text(function(d) { return d; }); | |
| }); | |
| </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 |