Scatterplot_Trivariate_d3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scatterplot-Trivariate</title>
		<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>

var w = 1000;
			var h = 500;
      var dataset;

d3.csv("county_crime_sample.csv", function(csv_data) {
        dataset = csv_data;
				var margin = {top: 50, right: 100, bottom: 50, left: 100};
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

svg.append("text")
				    .attr("x", (w)/2)
				    .attr("y", (margin.top / 4))
				    .attr("text-anchor", "middle")
						.attr("font-weight","bold")
				    .style("font-size", "16px")
				    .style("text-decoration", "underline")
				    .text("Scatterplot-Trivariate using County crime data");

w = svg.attr("width") - margin.left - margin.right;
        h = svg.attr("height") - margin.top - margin.bottom;

//+- operator is used for type conversion
        csv_data.forEach(function(d) {
              d.Totals_Violent_All = +d.Totals_Violent_All;
              d.Population = +d.Population;
              d.Totals_Property_All = +d.Totals_Property_All;
            });

var o = d3.scaleOrdinal()
                  .domain([d3.min(csv_data, function(d) { return d.Population; }),d3.max(csv_data, function(d) { return d.Population; })])
                  .range([3.5, 8.5]);

var xScale = d3.scaleLinear()
                .domain([d3.min(csv_data, function(d) { return d.Totals_Violent_All;}),d3.max(csv_data, function(d) { return d.Totals_Violent_All;})])
                .range([0, w]);

var yScale = d3.scaleLinear()
                .domain([d3.min(csv_data, function(d) { return d.Totals_Property_All; }),d3.max(csv_data, function(d) { return d.Totals_Property_All; })])
                .range([h,0]);

var rScale = d3.scaleLinear()
                .domain([d3.min(csv_data, function(d) { return d.Population; }),d3.max(csv_data, function(d) { return d.Population; })])
                .range([3.5,8.5]);

var g = svg.append("g")
                   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        //by default 1em = 16px if font size is not set for any element
        g.append("g")
         .attr("class", "x-axis")
         .attr("transform", "translate(0," + h + ")")
         .call(d3.axisBottom(xScale).ticks(10));

g.append("g")
         .attr("class", "y-axis")
         .call(d3.axisLeft(yScale).ticks(10))
         .append("text")
         .attr("transform", "rotate(-90)")
         .attr("y", 6)
         .attr("dy", "0.71em")
         .attr("text-anchor", "end");

g.selectAll(".dot")
         .data(csv_data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r",  function(d) { return rScale(d.Population); })
         .attr("cx", function(d) { return xScale(d.Totals_Violent_All); })
         .attr("cy", function(d) { return yScale(d.Totals_Property_All); })
				 .style("fill", "#CD5C5C")
				 .style("stroke", "	#D3D3D3");

var legend = svg.selectAll(".legend")
                       .data(o.domain())
                       .enter().append("g")
                       .attr("class", "legend")
                       .attr("transform", function(d, i) { return "translate(900," + (i+1) * 75 + ")"; });

legend.append("circle")
            .attr("class", "dot")
            .attr("r",  function(d) { return rScale(d); })
            .attr("cx", function(d) { return 0; })
            .attr("cy", function(d) { return 0; })
						.style("fill", "#CD5C5C")
						.style("stroke", "#D3D3D3");;
      legend.append("text")
            .attr("x", 20)
            .attr("y", 0)
            .attr("dy", ".35em")
            .style("text-anchor", "start")
            .text(function(d) { return d; });

svg.append("text")
				.attr("text-anchor", "middle")
				.attr("transform", "translate("+ (margin.left/4) +","+(h/2)+")rotate(-90)")
				.attr("font-weight","bold")
				.text("No of Property related crimes");

svg.append("text")
			 .attr("text-anchor", "end")
			 .attr("transform", "translate("+ (w/2 + margin.left) +","+(h + margin.top + margin.bottom)+")")
			 .attr("font-weight","bold")
			 .text("No of Violence related crimes");

});

</script>
	</body>
</html>

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