D3 Examples - eat-to-pret-distance-ldn

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .axis path, 
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
​
  </style>
</head>
​
<body>
  <div id="histogram"></div>
<!--using Irene Ros's pattern fill https://iros.github.io/patternfills/    -->
  <svg height="10" width="10" xmlns="https://www.w3.org/2000/svg" version="1.1">    
    <defs> 
      <pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> 
      <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==" x="0" y="0" width="10" height="10"> 
      </image> 
      </pattern> 
    </defs> 
  </svg>
  <script>
    var margin = {top: 40, right: 30, bottom: 60, left: 60},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
​
    var xScale = d3.scale.linear().range([0, width]),
        yScale = d3.scale.linear().range([height, 0]);
    
    
    var xAxis = d3.svg.axis().scale(xScale)
                                .orient('bottom'),
        yAxis = d3.svg.axis().scale(yScale).orient('left');
    var svg = d3.select('#histogram').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 histogramData = d3.layout.histogram().bins(20);
​
    d3.csv('eat-to-pret-distance-matrix.csv', function(err, data){
      
      data.forEach(function(d){
        d.distance = +d['Distance(m)'];
      });
      
      
​
      var plottingData = histogramData.value(function(d){return d.distance})(data);
      
      console.log(plottingData)
      var xAxisTicksArr = plottingData.map(function(d){
        return d.x + 0.5 * d.dx
      });
      
      xAxis.tickValues(xAxisTicksArr);
      
      var maxX = d3.max(plottingData, function(d){return d.x + d.dx} );
      var maxY = d3.max(plottingData, function(d){return d.y});
      yScale.domain([0, 1.1 * maxY]);      
            xScale.domain([0, maxX]);
      
      var bars = svg.selectAll('rect.bar').data(plottingData)
       
      bars.enter().append('rect').attr('class', 'bar')
        .attr('width', function(d, i){return xScale(d.dx)})
        .attr('height', function(d, i){return height - yScale(d.y)})
        .attr('x', function(d, i){return xScale(d.x)})
        .attr('y', function(d, i){return yScale(d.y)})
        .attr('fill', "url(#diagonal-stripe-1)").attr('stroke', 'black')
      
      svg.append('g').attr('id', 'chartTitle')
        .attr('transform', 'translate(' + 0.25 * width + ',0)')
        .append('text').text('distance from an EAT to the nearest Pret shop')
      
      svg.append('g').attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height +')')
        .call(xAxis)
        .append('text').attr('x', width/2).attr('y', 50)
        .attr('text-align', 'center').text('distance (m)');
      
      svg.append('g').attr('class', 'y axis')
        .call(yAxis)
        .append('text').attr('x', 5).attr('y', 10).text('number of shops');
      
      
    })
  </script>
</body>
​
    