Created
April 2, 2015 01:28
-
-
Save BenHeubl/63debcf554e5ed798485 to your computer and use it in GitHub Desktop.
# of Deliberate Fires in London (Feb. 2015)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Loading CSV Data with D3</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| background-color: #eef7ff; | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| } | |
| rect { | |
| fill: red; | |
| } | |
| .barLabel { | |
| font-size: 12px; | |
| fill: #0d2e54; | |
| text-anchor: end; | |
| } | |
| .barValue { | |
| font-size: 12px; | |
| fill: red; | |
| } | |
| h1, p { | |
| position: relative; | |
| left: 10px; | |
| color: #0d2e54; | |
| } | |
| .hover rect{ | |
| fill: #9e2f50; | |
| transition: fill 0.2s; | |
| } | |
| .hover text { | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .footnote { | |
| position: relative; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var margin = {top: 10, right: 10, bottom: 0, left: 5}; | |
| var body = d3.select('body'); | |
| body.append('h1') | |
| .text('Deliberate Fires') | |
| body.append('p') | |
| .text('Number of Deliberate Fires counted by London Fire Brigade, per London Borough (for Month Feb. 2015)') | |
| var svg = d3.select('body').append('svg'), | |
| barHeight = 10, | |
| barSpace = 5 | |
| svg.attr('width', 900) | |
| .attr('height', 760) | |
| //Load in contents of CSV file | |
| d3.csv('londonfiresfinal.csv', function(data) { | |
| console.log(data); | |
| data.sort(function(a,b) { | |
| return d3.descending(+a.dellfires, +b.dellfires) | |
| }); | |
| svg.selectAll('g') | |
| .data(data) | |
| .enter() | |
| .append('g') | |
| var barGroup = d3.selectAll('g'); | |
| barGroup.append('rect') | |
| .attr({ | |
| 'width': function(d) { return d.dellfires * 20; }, | |
| 'height': barHeight, | |
| 'x': 150, | |
| 'y': function(d, i) { return margin.top + (barHeight + barSpace) * i; } | |
| }) | |
| barGroup.append('text') | |
| .text(function(d) { return d.boroughslondon; }) | |
| .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; }) | |
| .attr('class', 'barLabel') | |
| .attr('x', 140) | |
| barGroup.append('text') | |
| .attr('class', 'barValue') | |
| .attr('x', function(d) { return (d.dellfires * 20) + 155; } ) | |
| .attr('y', function(d, i) { return margin.top + 9 + (barHeight + barSpace) * i; }) | |
| .text(function(d) { return d.dellfires + ' #'; }) | |
| barGroup.attr('cursor', 'pointer') | |
| barGroup.on('mouseover', function() { | |
| d3.select(this) | |
| .classed('hover', true) | |
| }) | |
| barGroup.on('mouseout', function() { | |
| d3.select(this) | |
| .classed('hover', false) | |
| }) | |
| body.append('p') | |
| .text('Check out each Borough for its value by hovering over it') | |
| .attr('class', 'footnote') | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| boroughslondon | dellfires | ||
|---|---|---|---|
| BarkingDagenham | 10 | ||
| Barnet | 6 | ||
| Bexley | 9 | ||
| Brent | 2 | ||
| Bromley | 14 | ||
| Camden | 4 | ||
| City of London | 0 | ||
| Croydon | 10 | ||
| Ealing | 5 | ||
| Enfield | 10 | ||
| Greenwich | 7 | ||
| Hackney | 4 | ||
| HammersmithFulham | 4 | ||
| Haringey | 4 | ||
| Harrow | 5 | ||
| Havering | 9 | ||
| Hillingdon | 12 | ||
| Hounslow | 5 | ||
| Islington | 5 | ||
| KensingtonandChelsea | 1 | ||
| KingstonuponThames | 1 | ||
| Lambeth | 6 | ||
| Lewisham | 12 | ||
| Merton | 4 | ||
| Newham | 13 | ||
| Redbridge | 5 | ||
| RichmonduponThames | 1 | ||
| Southwark | 16 | ||
| Sutton | 5 | ||
| Tower Hamlets | 25 | ||
| Waltham Forest | 10 | ||
| Wandsworth | 1 | ||
| Westminster | 2 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment