SassOnTheRoad/London-Borough-Profiles.csv

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>


      body {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
      }

      h1 {
        font-size: 24px;
        margin: 0;
      }

      p {
        font-size: 14px;
        margin: 10px 0 0 0;
      }

      svg {
        background-color: white;
      }

      circle:hover {
        fill: CornflowerBlue;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }

      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }


</style>
</head>
  <body>

    <h1>Population Density of London Boroughs* </h1><p/>

Data in this dicircleory was downloaded from <a href="http://data.london.gov.uk/dataset/london-borough-profiles" target=_blank>data.london.gov.uk</a>on 21 March, 2015.<p/>

London Borough Profiles Data is licensed under the UK <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/2/" target=_blank>Open Government Licence (OGL)</a><p/>

<div id=chart>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

      var w = 800;
      var h = 400;

var padding = [ 20, 10, 50, 60 ];  //Top, right, bottom, left

var xScale = d3.scale.linear()
               .range([ padding[3], w - padding[1] - padding[3] ]);
               // .range([ 0, w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
                .range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
              .scale(xScale)
              .ticks(8)
              .orient("bottom");

var yAxis = d3.svg.axis()
              .scale(yScale)
              .ticks(10)
              .orient("left");

var svg = d3.select("div")
            .append("svg")
            .attr("width", w)
            .attr("height", h);


d3.csv("London-Borough-Profiles.csv", function(d) {
  d.sort(function(a, b) {
          return d3.descending(+a.pop, +b.pop);
        });
  svgbarChartIt(d);
  return {
    area: d.area,
    pop: d.pop,
    hec: d.hec
  };

});


function svgbarChartIt(d){

xScale.domain([
             d3.min(d, function(d) {return +d.pop;}),
            // 0,
             d3.max(d, function(d) {
              return +d.pop;
            })
             ]);

yScale.domain([
      d3.max(d, function(d) {
          return +d.hec;
        })
      ,
      d3.min(d, function(d) {
          return +d.hec;
        })
      ]  );


var circles = svg.selectAll("circle")
                .data(d)
                .enter()
                .append("circle");

    circles.attr("cx", function(d){
      return xScale(d.pop); //+ padding[3];
    })
          .attr("cy", 0)
          .attr("r", 1)
          .attr("fill", "steelblue")
          .append("title")
          .text(function(d) {
            return d.area + "'s population is " + d.pop + " and number of hectares is " + d.hec;
          });

    circles
      .sort(function(a,b){
          return d3.descending(+a.pop, +b.pop)
      })
      .transition()
      .delay(function(d,i){
          return i*50;
          }
        )
      .duration(2000)

       .attr("cy", function(d, i) {
            return yScale(d.hec);
          })
  .attr("r", 5)


    svg.append("g")
          .attr("class", "x axis")
         .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
          // .attr("transform", "translate("+ padding[3]+"," + (h - padding[2]) + ")")
          .call(xAxis);

    svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
          //.attr("transform", "translate(" + (padding[3] ) + ",0)")
          .call(yAxis);
};

</script>


<br/>
Note: exculdes City of London with 8000 residents and 290.4 hectares


  </body>
</html>

## London-Borough-Profiles.csv

          
            area
            pop
            hec

            
              Barking and Dagenham
              201000
              3610.8

            
              Barnet
              384600
              8674.8

            
              Bexley
              236200
              6058.1

            
              Brent
              322800
              4323.3

            
              Bromley
              318300
              15013.5

            
              Camden
              228500
              2178.9

            
              Croydon
              377200
              8650.4

            
              Ealing
              346600
              5554.4

            
              Enfield
              320600
              8083.2

            
              Greenwich
              275100
              4733.4

            
              Hackney
              259300
              1904.9

            
              Hammersmith and Fulham
              188200
              1639.7

            
              Haringey
              266000
              2959.8

            
              Harrow
              246000
              5046.3

            
              Havering
              247500
              11235

            
              Hillingdon
              287100
              11570.1

            
              Hounslow
              262200
              5597.8

            
              Islington
              217600
              1485.7

            
              Kensington and Chelsea
              160900
              1212.4

            
              Kingston upon Thames
              166100
              3726.1

            
              Lambeth
              316900
              2681

            
              Lewisham
              289400
              3514.9

            
              Merton
              205100
              3762.5

            
              Newham
              331400
              3619.8

            
              Redbridge
              289900
              5641.9

            
              Richmond upon Thames
              190900
              5740.7

            
              Southwark
              304100
              2886.2

            
              Sutton
              195600
              4384.7

            
              Tower Hamlets
              277900
              1978.1

            
              Waltham Forest
              268800
              3880.8

            
              Wandsworth
              319300
              3426.4

            
              Westminster
              228200
              2148.7
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>


	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: CornflowerBlue;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}




	</style>
	</head>
	<body>

	<h1>Population Density of London Boroughs* </h1><p/>

	Data in this dicircleory was downloaded from <a href="http://data.london.gov.uk/dataset/london-borough-profiles" target=_blank>data.london.gov.uk</a>on 21 March, 2015.<p/>

	London Borough Profiles Data is licensed under the UK <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/2/" target=_blank>Open Government Licence (OGL)</a><p/>

	<div id=chart>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var w = 800;
	var h = 400;

	var padding = [ 20, 10, 50, 60 ]; //Top, right, bottom, left

	var xScale = d3.scale.linear()
	.range([ padding[3], w - padding[1] - padding[3] ]);
	// .range([ 0, w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.ticks(8)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.ticks(10)
	.orient("left");

	var svg = d3.select("div")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	d3.csv("London-Borough-Profiles.csv", function(d) {
	d.sort(function(a, b) {
	return d3.descending(+a.pop, +b.pop);
	});
	svgbarChartIt(d);
	return {
	area: d.area,
	pop: d.pop,
	hec: d.hec
	};

	});


	function svgbarChartIt(d){

	xScale.domain([
	d3.min(d, function(d) {return +d.pop;}),
	// 0,
	d3.max(d, function(d) {
	return +d.pop;
	})
	]);

	yScale.domain([
	d3.max(d, function(d) {
	return +d.hec;
	})
	,
	d3.min(d, function(d) {
	return +d.hec;
	})
	] );


	var circles = svg.selectAll("circle")
	.data(d)
	.enter()
	.append("circle");

	circles.attr("cx", function(d){
	return xScale(d.pop); //+ padding[3];
	})
	.attr("cy", 0)
	.attr("r", 1)
	.attr("fill", "steelblue")
	.append("title")
	.text(function(d) {
	return d.area + "'s population is " + d.pop + " and number of hectares is " + d.hec;
	});

	circles
	.sort(function(a,b){
	return d3.descending(+a.pop, +b.pop)
	})
	.transition()
	.delay(function(d,i){
	return i*50;
	}
	)
	.duration(2000)

	.attr("cy", function(d, i) {
	return yScale(d.hec);
	})
	.attr("r", 5)



	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
	// .attr("transform", "translate("+ padding[3]+"," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
	//.attr("transform", "translate(" + (padding[3] ) + ",0)")
	.call(yAxis);
	};

	</script>


	<br/>
	Note: exculdes City of London with 8000 residents and 290.4 hectares



	</body>
	</html>
area	pop	hec
Barking and Dagenham	201000	3610.8
Barnet	384600	8674.8
Bexley	236200	6058.1
Brent	322800	4323.3
Bromley	318300	15013.5
Camden	228500	2178.9
Croydon	377200	8650.4
Ealing	346600	5554.4
Enfield	320600	8083.2
Greenwich	275100	4733.4
Hackney	259300	1904.9
Hammersmith and Fulham	188200	1639.7
Haringey	266000	2959.8
Harrow	246000	5046.3
Havering	247500	11235
Hillingdon	287100	11570.1
Hounslow	262200	5597.8
Islington	217600	1485.7
Kensington and Chelsea	160900	1212.4
Kingston upon Thames	166100	3726.1
Lambeth	316900	2681
Lewisham	289400	3514.9
Merton	205100	3762.5
Newham	331400	3619.8
Redbridge	289900	5641.9
Richmond upon Thames	190900	5740.7
Southwark	304100	2886.2
Sutton	195600	4384.7
Tower Hamlets	277900	1978.1
Waltham Forest	268800	3880.8
Wandsworth	319300	3426.4
Westminster	228200	2148.7