Scatterplot

Scatterplot This scatterplot is constructed from a CSV file storing the dimensions of sepals and petals of various iris flowers.

forked from LuisSevillano's block: Scatterplot

forked from anonymous's block: Scatterplot

<!DOCTYPE html>
<meta charset="utf-8">
    <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;
    }
    </style>

//margin convention
    var margin = {top: 10, right: 20, bottom: 60, left: 30},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

//create x and y scale. We'll set the domain later
    var xScale = d3.scalePoint()
    .range([ height , 0]);

var yScale = d3.scalePoint()
    .range([ height , 0]);

//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.json("data.json",function(error, data){
      if(error)
    	{
        console.warn('data.json error', error);
    	}

var color = d3.scaleSequential(d3.interpolateRgb("#0000FF","#FF0000"))
      .domain([d3.min(data, function(d) { return d.hours; }),d3.max(data, function(d) { return d.hours; })]);
      
      var legend = d3.legendColor()
    		.labelFormat(d3.format(".2f"))
		  	.shapeWidth(30)
       .cells(10)
    		.scale(color);

svg.append("g")
    			.attr("class", "legendQuant")
		    	.attr("transform", "translate("+400+",20)");
      
	  	svg.select(".legendQuant")
  			 .call(legend);
      
        //set scales domain     
        xScale.domain(data.map( function(d) {          
            return d.process;
        }));

yScale.domain(data.map( function(d) {          
            return d.role;
        }));
			
         // x-axis
  		svg.append("g")
      	.attr("class", "x axis")
      	.attr("transform", "translate("+margin.top+"," +  height + ")")
	      .call(d3.axisBottom(xScale))
  	  .append("text")
    	  .attr("class", "label")
      	.attr("x", width)
	      .attr("y", -6)
  	    .style("text-anchor", "end")
    	  .text("Processes");
	
  			// y-axis
		  	svg.append("g")
    	  .attr("class", "y axis")
        .attr("transform", "translate("+ margin.top+",0)")
      	.call(d3.axisLeft(yScale))
	    .append("text")
  	    .attr("class", "label")
    	  .attr("transform", "rotate(-90)")
      	.attr("y", 6)
	      .attr("dy", ".71em")
  	    .style("text-anchor", "end")
    	  .text("Roles");

// draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d){return xScale(d.process) + margin.top;})
      .attr("cy", function(d){return yScale(d.role);})
      .style("fill", function(d) { return color(d.hours);}) 
    });

</script>
 </body>

Modified http://d3-legend.susielu.com/d3-legend.min.js to a secure url

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

https://d3-legend.susielu.com/d3-legend.min.js