eat-to-pret-distance-ldn

<!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>

  <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)'];
      });

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js