Iris scatter plot

Built with blockbuilder.org

forked from romsson's block: D3 bar chart without data-binding

forked from anonymous's block: D3 bar chart without data-binding

forked from romsson's block: D3 bar chart without data-binding

forked from anonymous's block: D3 bar chart without data-binding

forked from anonymous's block: Iris scatter plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    rect {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
  </style>
</head>

// On définit la taille et les marges du csv
    var margin = {top: 50, right: 50, bottom: 50, left: 50},
    w = 900 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", w+margin.left + margin.right)
      .attr("height", h+margin.bottom + margin.top);

// On load le csv
    d3.csv("iris.csv", function(error, data) {
      
   		// On fait en sorte que les points s'affichent au bon endroit selon x
      xValue = function(d){return d.petal_width}
      xmin = d3.min(data, xValue)
      xmax = d3.max(data, xValue)
      xMap = function(d) { return margin.left + (xValue(d)-xmin)*w/(xmax-xmin);}
      
      // On fait en sorte que les points s'affichent au bon endroit selon y
      yValue = function(d){return d.petal_length}
      ymin = d3.min(data, yValue)
      ymax = d3.max(data, yValue)
      yMap = function(d) { return margin.top + (yValue(d)-ymin)*h/(ymax-ymin);}
      
      // On fait en sorte que les points s'affichent avec la bonne couleur
      cValue = function(d){return(d.species)}
      color = d3.scaleOrdinal(d3.schemeCategory10);
      
      // On affiche les deux axes et leurs titres
      xScale = d3.scaleLinear().range([0, w]).domain([xmin,xmax]);
      xAxis =  d3.axisBottom().scale(xScale);
      yScale = d3.scaleLinear().range([0, h]).domain([ymin,ymax]);
      yAxis =  d3.axisLeft().scale(yScale);
      
      svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate("+margin.left+"," + (h+margin.top) + ")")
      .call(xAxis)
      
      svg.append("text")             
      .attr("transform","translate(" + (margin.left+w/2) + " ," + (h + margin.top + margin.bottom/2 + 20) + ")")
      .style("text-anchor", "middle")
      .text("Petal width");

svg.append("g")
      .attr("class", "y axis")
  		.attr("transform", "translate("+margin.left+","+ margin.top +")")
     	.call(yAxis)
      
      svg.append("text")             
      .attr("transform","translate(" + (margin.left/2-5) + " ," + (h/2 + margin.top) + ")rotate(-90)")
      .style("text-anchor", "middle")
      .text("Petal length");

// On affiche les points
      data.forEach(function(d, i) {
      	svg.selectAll(".dot").data(data).enter()
          .append("circle")
      		.attr("class", "dot")
      		.attr("r", 3.5)
      		.attr("cx", xMap)
      		.attr("cy", yMap)
      		.style("fill", function(d) { return color(cValue(d));}) 
				})
      
      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("rect")
     		.attr("x", w - 18)
     		.attr("width", 18)
     		.attr("height", 18)
     		.style("fill", color);

legend.append("text")
     		.attr("x", w - 24)
     		.attr("y", 9)
     		.attr("dy", ".35em")
     		.style("text-anchor", "end")
     		.text(function(d) { return d;})
     
    })
    
		
    
  </script>
</body>

https://d3js.org/d3.v4.min.js