xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .svg-container { width:50%; height: 400px; margin:auto; } #container { display: flex; flex-direction:row; justify-content: center; } #chart1 { background-color: #ffbdbd; } #chart2 { background-color: #c9c9ff; } .graph { width : 100%; height: 400px; } </style></head><body> <div id="container"> <div id="chart1" class="svg-container"> </div> <div id="chart2" class="svg-container"> </div> </div> <script> 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; }); // Feel free to change or delete any of the code you see in this editor! function create_scatterplot(el, data, var_x, var_y, size) { var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = el.node().getBoundingClientRect().width - margin.left - margin.right, height = el.node().getBoundingClientRect().height - 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 = el.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 + ")"); var tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); 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(); 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'); // we use the ordinal scale symbols to generate symbols // such as d3.symbolCross, etc.. // -> symbol.type(d3.symbolCross)() svg.selectAll(".symbol") .data(data) .enter().append("path") .attr("id", function(d,i){return "id_"+ i;}) .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) +")"; }) .on("mouseenter", function(d,i){ d3.selectAll(".symbol").style("opacity",1); d3.selectAll("#id_"+i) .style("opacity",0.11) }); var legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 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 + ")"; }); legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; }); } create_scatterplot(d3.select("#chart1"),data); create_scatterplot(d3.select("#chart2"),data); }); </script></body> https://d3js.org/d3.v4.min.js