wwymak · February 13, 2016 19:40
diff --git a/eat-to-pret-distance-matrix.csv b/eat-to-pret-distance-matrix.csv
diff --git a/eat-to-pret-distances.png b/eat-to-pret-distances.png
diff --git a/index.html b/index.html
 <!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 http://iros.github.io/patternfills/    -->
  <svg height="10" width="10" xmlns="http://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>
diff --git a/thumbnail.png b/thumbnail.png
InputID	TargetID	Distance	Distance(m)
ChIJZf2Jlc4EdkgRqIM-ef2y6es	ChIJXTn0yM4EdkgRSaV_zGoczWw	0.000414318	33.14544047
ChIJM1ObHN8EdkgRx1AtnTH31qI	ChIJn02Ng9sEdkgRxFrkfZDwJO0	0.00081524	65.21917804
ChIJX55_pLEEdkgR4Tb2RgSm3tM	ChIJJz_dQcoEdkgRGJNfDHFSARc	0.005485031	438.8024655
ChIJhUvcPtwEdkgRT_ZdtjwD7vA	ChIJ9xPWINwEdkgRm21aBvx6c4I	0.001029683	82.37464658
ChIJAZyKwNYEdkgRF6IBLG_KdzY	ChIJkQ6vidYEdkgR3l8oTFFaHOc	0.001613939	129.1151129
ChIJ78268CsbdkgRhoDFQqqxaaU	ChIJLbaLZNEEdkgRkdhk1IC66dM	0.001272168	101.7734658
ChIJZ3p4J8gEdkgRpw9Xd1bY1VE	ChIJJz_dQcoEdkgRGJNfDHFSARc	0.005201036	416.0828961
ChIJIUh4NRwQdkgRCiO3lEld7k4	ChIJW3HUgvsPdkgRHVK8WIOke1s	0.01162429	929.9432284
ChIJFZgdDpQPdkgRMEpKpZm8OCs	ChIJh2hxb8IPdkgR9eNM6VlzhRw	0.013065664	1045.253151
ChIJvXDL-BQFdkgRzAXJgE9GR8A	ChIJm5PP8xQFdkgRqJ3drpKBd9s	0.000882745	70.6196179
ChIJlZtzVEcFdkgRfA7PjHaxoS0	ChIJm5PP8xQFdkgRqJ3drpKBd9s	0.002694606	215.5684615
ChIJQ7JO2RUFdkgR3S3kXSKDJxo	ChIJm5PP8xQFdkgRqJ3drpKBd9s	0.003475502	278.0401833
ChIJG_QAVUcFdkgRgb7ozuk7Fio	ChIJAUcwsUAFdkgRvLG4jKsvyAk	0.001213205	97.05643554
ChIJe2xkxVwFdkgRt-yQHKsFoUc	ChIJjRFTJGgFdkgRba5rK1FUVzA	0.004591071	367.2856832
ChIJF4orfSkFdkgRoUzNBBV1_No	ChIJLRAXYykFdkgR52YTXGm4mbg	5.35E-05	4.279371915
ChIJVyC1TSgFdkgR_FukgMUzS5Y	ChIJt9Ib5ikFdkgREeL9ioPdO8E	0.000574261	45.94091858
ChIJx1KNojQFdkgRaQtevn4ZDyo	ChIJ_zYPnzQFdkgRpEeQBNyx5EM	0.00068661	54.92878298
ChIJV0yRnPsPdkgResYplqR-jcw	ChIJW3HUgvsPdkgRHVK8WIOke1s	9.38E-05	7.507005794
ChIJR1T_EvsPdkgRxQSr7hmH8HA	ChIJW3HUgvsPdkgRHVK8WIOke1s	0.001202632	96.2105225
ChIJI109CbEEdkgReXH5KfoSfCk	ChIJy7I4rbEEdkgRujW-okIbjKk	0.001474337	117.9469407
ChIJnchGdK0cdkgRiQG5XF2lCxE	ChIJy7I4rbEEdkgRujW-okIbjKk	0.001471889	117.7511108
ChIJsWilWq0EdkgRcS2ALUGwfFg	ChIJv7tN9VEbdkgR-x1r3rR08OU	0.001235219	98.81752913
ChIJ96qJwawEdkgRiQbSyBVaqlA	ChIJFW73wKwEdkgRR16suIecCH0	0.000427178	34.17421156
ChIJc2qvKLMEdkgRNiEE9fzTygM	ChIJXYJvQbMEdkgR5YBRlzyL0ok	0.0015451	123.6079651
ChIJA1T6T60EdkgR3zRk7PVqCeY	ChIJv7tN9VEbdkgR-x1r3rR08OU	0.001238487	99.07898231
ChIJqw76w6kEdkgR9lPi1oMJ0nA	ChIJQWeCq1cDdkgRRbujoFQNFEs	0.004014109	321.1287447
ChIJUb4rzqoEdkgROE8Fp4Bng00	ChIJU5na0aoEdkgR7LvEgTv_OC4	0.000661114	52.88913991
ChIJYyCDk6oEdkgR9Qk24nSRpV8	ChIJU5na0aoEdkgR7LvEgTv_OC4	0.000700399	56.03189035
ChIJlytowykFdkgRoygigq7lNjM	ChIJt9Ib5ikFdkgRXf6TmP9fypk	0.000427812	34.22499297
ChIJGRcFC9cEdkgRq548BFG2sqE	ChIJCd2GdNcEdkgRoNIgxqQZIAU	0.000242574	19.40589766
ChIJey7q0NUEdkgRl1qKU9uirkY	ChIJiYD0MrMcdkgRF4eGhkvCcBg	0.001334483	106.758674
ChIJy4wwwNYEdkgRBYCVUncNXGQ	ChIJkQ6vidYEdkgR3l8oTFFaHOc	0.000604104	48.32829399
ChIJvZJyRtQEdkgRXb7lEjO3pP8	ChIJiYD0MrMcdkgRF4eGhkvCcBg	0.001184025	94.72200674
ChIJZTUIcVQDdkgR2YGX8DAvnnI	ChIJQWeCq1cDdkgRRbujoFQNFEs	0.003968703	317.4962629
ChIJEVlmolUDdkgRcNPqyEXEhGw	ChIJk9krn1UDdkgRm-gSFUrBIQ8	0.000322932	25.83459758
ChIJ10QUYVUDdkgRZ_ovfyQDSb0	ChIJE-3oZVUDdkgR-Zwc_Bb8qVE	0.000151579	12.12631651
ChIJQRAjZVUbdkgR_p3C_f4EVqg	ChIJnXwny6ocdkgRTFOMp1TeWmg	0.000415056	33.20444211
ChIJgRZUBcwEdkgR6Oz7Du-QB00	ChIJR1HwAMwEdkgRdQzNGPcDmY8	0.000757618	60.60943663
ChIJQSatxssEdkgRajA4d0GenBo	ChIJ3xfbA7UEdkgRWr1cZKgjF6w	0.000341312	27.30497508
ChIJoe0suM0EdkgRFib4u-pE__4	ChIJC_nmpM0EdkgRRvUA-s8mjyM	0.000590571	47.24571752
ChIJDbbVuc0EdkgR-ikkkP7WAcg	ChIJC_nmpM0EdkgRRvUA-s8mjyM	0.000590571	47.24571752
ChIJsylzQ0sbdkgRGRiqZWtT404	ChIJKURPusoEdkgRVrsJw23K0n8	0.000898903	71.91223673
ChIJAWYM7dIEdkgRB4EK5EPS4KM	ChIJoRdT2dIEdkgRffqtefL9cfY	0.001718231	137.4584446
ChIJy2Jcts0EdkgRjIM6LbTZcO0	ChIJC_nmpM0EdkgRRvUA-s8mjyM	0.000998154	79.8523265
ChIJZZmpzywFdkgRr77xZKj7OWQ	ChIJUz1xUC0FdkgRzQRgXAadGxs	0.000729658	58.37261933
ChIJGRDPcCsFdkgRMGlRoCcA2TM	ChIJW2PvnysFdkgRoxmUGXvcaJQ	0.000573754	45.90031704
ChIJ-6YT4CoFdkgR94uEjo6ZMH8	ChIJiYD0MrMcdkgRdbDnU2E-_6c	0.001279707	102.3765636
ChIJFYV2pyEQdkgR8HCXh3qh9EE	ChIJd_iCWdoPdkgRQn8V_Lk8-mk	0.013042226	1043.378074
ChIJ-wFAD9UadkgRA63k8TOHP6w	ChIJ008ma9IadkgRL5g33zkhH6I	0.00089416	71.53276486
ChIJMdWxZtIadkgRKwprbt10mTo	ChIJ008ma9IadkgRL5g33zkhH6I	0.000932972	74.63776931
ChIJlVCx2tIadkgRlDT9abkO9V4	ChIJ3ex31SwFdkgROME1zALRhSU	0.001183104	94.64833404
ChIJIeY9YdIadkgRC6Kdh-2RX6w	ChIJ008ma9IadkgRL5g33zkhH6I	0.000928992	74.31933864
ChIJl283f9oPdkgRR0K3ThRaQak	ChIJd_iCWdoPdkgRQn8V_Lk8-mk	0.001736943	138.9554599
ChIJ4QwXclQDdkgRqCYmnuvGnmg	ChIJxaBWfFMDdkgRCFeRIGGTE3M	0.001636045	130.8836256
ChIJm-FEgFMDdkgRfDZFCuqhF2Y	ChIJxaBWfFMDdkgRCFeRIGGTE3M	0.000377912	30.23299072
ChIJf32wTE0DdkgR_06HZLbIwL8	ChIJRVi-MVMDdkgRYPsTO99GDWw	0.001723888	137.9110691
ChIJnchGdK0cdkgRAEDEVHY_D1M	ChIJ2XcfNVIDdkgRWXqP_XcHIDk	0.000582272	46.58178528
ChIJ7yvbZVIDdkgRpeaaYA8oN3Y	ChIJszXIgE0DdkgRirQHxH4olcE	0.001285764	102.8611429
ChIJc_2MaFIDdkgRTXpkREssmhs	ChIJszXIgE0DdkgRirQHxH4olcE	0.001197445	95.79559706
ChIJT2SwXdMadkgRX32iKhydbKw	ChIJuwqRZdMadkgRATbxCKXuS8g	0.000520511	41.64085455
ChIJq74fUg8QdkgRr6deajsZ_l0	ChIJ2R9xYFUFdkgRWqdrX3QKbdc	0.014191117	1135.289346
ChIJ7R3sEVADdkgRs34dJHoMvTs	ChIJf9hrZDYDdkgR3wdRDyH0nu4	0.001370894	109.6715597
ChIJEeVPVkkDdkgRqHMBW5FGnj4	ChIJzWQ1ik4DdkgRWb2Wv7NMzO8	0.000878804	70.30431725
ChIJ-RsLhE4DdkgRMkFSROLsuKs	ChIJJz2Pf04DdkgRGSsoYWdrt2w	0.000887376	70.99004956
ChIJcxABlM4adkgRkYxIF10Se5I	ChIJc-vtlM4adkgRPd9l7yvVh_o	0.000252683	20.21465765
ChIJheOuzrIcdkgRKPtTqsUuSXs	ChIJ_4zMTk0DdkgRXQtbqq49y-E	0.000694701	55.57604203
ChIJPfdMqk0DdkgRjzI1yd1Do0o	ChIJWcH0qE0DdkgRvzY5PG8TRjY	0.000350478	28.03825729
ChIJvVfdYVIDdkgRJnEYzbJ4jUY	ChIJszXIgE0DdkgRirQHxH4olcE	0.001303961	104.3168469
ChIJrWiIYEsDdkgRCXCmfPaz9Og	ChIJ7_INYEsDdkgRayI8bBaLrzU	7.01E-05	5.611291473
ChIJnchGdK0cdkgRXtdtj6KVg30	ChIJm7E_cU0DdkgRXgGmL9hSBOU	0.000725972	58.07777957
ChIJT6nUkFQDdkgR_8i3zFZyYHc	ChIJiYD0MrMcdkgR4_c9QSB_i5A	0.00091896	73.51680907
ChIJbzZAgksDdkgRZG0cQfD1SJ0	ChIJB4Qij0sDdkgRoStcfL92tnk	0.000296517	23.72133824
ChIJuU1L7awcdkgR18c0Wdc8CkI	ChIJv9zKgE8DdkgRM99ijeRaOZM	0.001346901	107.7520555
ChIJM2nE97IcdkgRHImACOmJ1WQ	ChIJd5n3WbIcdkgR-rHD0tGNSQM	0.000584461	46.75684164
ChIJnchGdK0cdkgRHvx2pLm9lAg	ChIJv9zKgE8DdkgRM99ijeRaOZM	0.001272381	101.7905064
ChIJLxjtrUwDdkgRs2lJcq5JkoI	ChIJiYD0MrMcdkgR4_c9QSB_i5A	0.001057448	84.59580623
ChIJuU1L7awcdkgRC3u997mTqRM	ChIJQ0aKfqscdkgRYoLYHYEPPBk	0.001313916	105.1132503
ChIJXWz5HiwbdkgR3zSNBJKhaOY	ChIJf096Ey0bdkgRXm3KzEpCKPs	0.000518507	41.4805863
ChIJcQ_vOikbdkgRpOrEDZd0GWI	ChIJRXt9IikbdkgRefI-7h8qD-Q	0.000503168	40.25347687
ChIJ78268CsbdkgRSi5_rRyHknI	ChIJvY296ysbdkgR1c8PMfIsqBs	0.000869133	69.53065833
ChIJE11CJy0bdkgRn10enYTEpIs	ChIJQeu76SwbdkgRG8qLfRo3Y80	0.001271266	101.7012437
ChIJb_jh69cadkgR40tL1zADR9s	ChIJf1NhqNcadkgR0VWCi_6JuNk	0.00192628	154.1023955
ChIJ-wFAD9UadkgR7yIKClgPE70	ChIJqxC-atUadkgR8FEQLVamAQo	0.001019085	81.52683857
ChIJ-wFAD9UadkgRpQaiawy9yZI	ChIJqxC-atUadkgR8FEQLVamAQo	0.001246068	99.68541944
ChIJI7XfvywbdkgRa3mgI7u7DtU	ChIJQeu76SwbdkgRG8qLfRo3Y80	0.000589788	47.18302678
ChIJpSilUNUadkgRdVC9KBVJOgY	ChIJqxC-atUadkgR8FEQLVamAQo	0.00113033	90.42637491
ChIJ9Y2iR9UadkgRycoGX9HKk5o	ChIJqxC-atUadkgR8FEQLVamAQo	0.000711243	56.89940653
ChIJEfbCfU4bdkgRG8VxNqN6Tv4	ChIJC7iCNUwbdkgR_5GMbSaFTcI	0.0017266	138.128038
ChIJ8V_CfU4bdkgRSaMXyqu-Ouo	ChIJC7iCNUwbdkgR_5GMbSaFTcI	0.001397529	111.8023299
ChIJNWq11VMbdkgRknNwVP3UY7c	ChIJczM1JlQbdkgRbJ6zgiPyKuA	0.000424754	33.98031807
ChIJqcny5UwbdkgRjETj-DDDBpc	ChIJ7xPe-0wbdkgRJi8gPHl19rU	0.000553177	44.25412071
ChIJi7zduFIbdkgRu2SMnK_j3Mc	ChIJj73HI1cbdkgRAeM4LfIH-9E	0.000448864	35.90914936
ChIJsbL4c0wbdkgRKgcp40eJY2M	ChIJiSQ5j0sbdkgRo8ECgQ2T9bM	0.001582919	126.6335473
ChIJuXIcpq0cdkgRq35QqUUwKHc	ChIJczM1JlQbdkgRYhler1AoOLE	0.000371972	29.75776336
ChIJjzqXJVQbdkgRiIz4hmEMQRc	ChIJczM1JlQbdkgRYhler1AoOLE	0.000373779	29.902306
ChIJLRYNXEsbdkgRRe0CzFpczZc	ChIJiSQ5j0sbdkgRo8ECgQ2T9bM	0.002109685	168.7748095
ChIJJcYS5lIbdkgRDCfBhM3aYms	ChIJP3UC71IbdkgRY7usI9oHIoE	0.00043431	34.74482615
ChIJ13apHVUbdkgRQ5afGox-7JE	ChIJteVO-VQbdkgR1FcXi-nVBCw	0.000503233	40.25861756
ChIJU5njWUwbdkgR5_-iWZYwB4k	ChIJryV1WDQbdkgRuNEgDUHAmhE	0.000116126	9.290063509
ChIJ6Y5TGTUbdkgRaSoXJBIigC8	ChIJryV1WDQbdkgRuNEgDUHAmhE	0.001552385	124.1908276
ChIJ6Y5TGTUbdkgRevH_sXWpSR8	ChIJv9CNnzUbdkgRS3RQQeYBOEQ	0.000102215	8.177189737
ChIJh511FTUbdkgRDU0K8Ed_CjU	ChIJv9CNnzUbdkgRS3RQQeYBOEQ	0.00149816	119.852838
ChIJTSQx_zUbdkgR2Hz6zuNCP9o	ChIJUyHy_kkbdkgRa_U3bJ6n9w8	0.000648335	51.86683071
ChIJRfMwclUbdkgREnsbxJu0GoY	ChIJ4VpJgaocdkgRhtXABluAzuk	0.001221534	97.72275886
ChIJuX77JKscdkgR2zAT7QMYwBg	ChIJE10tFascdkgRb5kUtFURO8s	0.000971922	77.75378123
ChIJnchGdK0cdkgRWeVW5Ti-M_Y	ChIJPV3T6KscdkgRLNBf4DPLP7U	0.001218312	97.46492456
ChIJOSQ_kKkcdkgRqJD1YfNf0tw	ChIJPV3T6KscdkgRLNBf4DPLP7U	0.001111693	88.9354736
ChIJuXIcpq0cdkgR5QdgcmaZ9pA	ChIJsdv7sa0cdkgR0ychIoO81DE	0.000941937	75.35495737
ChIJ4-VKla0cdkgRLqikrqePM-o	ChIJsdv7sa0cdkgR0ychIoO81DE	0.001018744	81.49951224
ChIJu1Q2uksbdkgRakcnrgD-Y6M	ChIJiSQ5j0sbdkgRo8ECgQ2T9bM	0.000810761	64.86090224
ChIJ5U6lwdEadkgRjR68h3ItheM	ChIJ008ma9IadkgRL5g33zkhH6I	0.002789702	223.1761916
ChIJgzWLT68cdkgRmuPhKMpfYzk	ChIJY7uxr64cdkgRvNLezzjPV2Q	0.000813851	65.10807016
ChIJj7C5BbAcdkgRmTwe4xUUgCw	ChIJqfHHE7AcdkgRJXl_L7MOKcg	0.000203725	16.29801068
ChIJe3hX3K4cdkgRmCom-abeFEM	ChIJY7uxr64cdkgRvNLezzjPV2Q	0.001804281	144.3424765
ChIJ4R7fO68cdkgR7l1NNucWTCc	ChIJY7uxr64cdkgRvNLezzjPV2Q	0.001792147	143.3717888
ChIJ_5IZbbQcdkgR0WuShotxt-E	ChIJny8AL7IcdkgRTR3sJ79inRM	0.001924404	153.9523095
ChIJbQH7SLIcdkgRt-j4phdzYQc	ChIJd5n3WbIcdkgR-rHD0tGNSQM	0.00064619	51.69518662
ChIJVSOGwK0cdkgRMfSUQhJJIEw	ChIJsdv7sa0cdkgR0ychIoO81DE	0.001046034	83.6827143
ChIJhddTXLQcdkgR8Vz35A47H0g	ChIJRbatIrUcdkgRFmDa3MXBRnE	0.00362292	289.8336084
ChIJAWYM7dIEdkgRhko_L_PVDjs	ChIJoRdT2dIEdkgRffqtefL9cfY	0.001467336	117.3868719
ChIJsZTrb98EdkgRa7NuzWqPDdU	ChIJPyC0BN8EdkgRDs-1vaiXmoI	0.0014499	115.992035
ChIJM1ObHN8EdkgRUky38W_SMis	ChIJPyC0BN8EdkgRDs-1vaiXmoI	0.000783469	62.67754175
	<!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 http://iros.github.io/patternfills/ -->
	<svg height="10" width="10" xmlns="http://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>