D3 Examples - Getting Started with D3 Ch3

xxxxxxxxxx
 
<!DOCTYPE html>
<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; }
    .axis path{
      fill: none;
      stroke: black;
    }
    .axis {
     font-size: 8pt;
      font-family: sans-serif;
    }
    .tick{
      fill: none;
    }
    circle {
      stroke: black;
      stroke-width: 0.5px;
      fill: royalBlue;
      opacity:0.6;
      
    }
  </style>
</head>
​
<body>
  <script>
   d3.json('bus_perf.json', draw);
    function draw(data) {
      'use strict';
      
      var margin = 50;
      var width = 700;
      var height = 300;
      
      var x_max = d3.max(data, function(d){ return d.collision_with_injury});
      var y_max = d3.max(data, function(d){ return d.dist_between_fail});
      
      
      var yScale = d3.scaleLinear()
                                .domain([0, y_max])
                                .range([height-margin, margin]);
      var xScale = d3.scaleLinear()
                                .domain([0, x_max])
                                .range([margin, width-margin]);
      
      var xAxis = d3.axisBottom().scale(xScale);
      var yAxis = d3.axisLeft().scale(yScale);
      
      var svg = d3.select('body')
                            .append('svg')
                    .attr('width', width)
                    .attr('height', height)
                            .selectAll('circle')
                            .data(data)
                            .enter()
                            .append('circle')
                    .attr('cx', function(d){ return xScale(d.collision_with_injury)})
                    .attr('cy', function(d){ return yScale(d.dist_between_fail)})
                    .attr('r',5)
                                .attr('z-index', 0.2);
        d3.select("svg") 
          .append("g") 
            .attr("class", "x axis") 
            .attr("transform", "translate(0," + [height-margin] + ")") 
          .call(xAxis);
        
        d3.select("svg") 
          .append("g") 
            .attr("class", "y axis") 
            .attr("transform", "translate(" + margin + ", 0 )") 
          .call(yAxis);
         
        d3.select('.y.axis')
            .append('text')
            .text('mean distance between failure (miles)')
            .attr('transform', "rotate (-90, -43, 0) translate(-280)")
                    
        d3.select('.x.axis')
          .append('text')
            .text('collisions with injury (per million miles)')
            .attr('x', function(){return (width / 2) - margin})
            .attr('y', margin/1.5)
    }
​
  </script>
</body>
​
    