SassOnTheRoad · April 20, 2021 03:30 · Apr 19, 2015 · Apr 19, 2015 · Apr 19, 2015 · Apr 19, 2015
diff --git a/index.html b/index.html
@@ -51,6 +51,7 @@ <h1>Population Density of London Boroughs* </h1><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>
@@ -77,7 +78,7 @@ <h1>Population Density of London Boroughs* </h1><p/>
               .ticks(10)
               .orient("left");
 
-var svg = d3.select("body")
+var svg = d3.select("div")
             .append("svg")
             .attr("width", w)
             .attr("height", h);
@@ -168,6 +169,8 @@ <h1>Population Density of London Boroughs* </h1><p/>
 
 </script>
 
+
+<br/>
 Note: exculdes City of London with 8000 residents and 290.4 hectares 
 
 

diff --git a/index.html b/index.html
@@ -50,8 +50,7 @@ <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/>
-
-* exculding City of London with 8000 residents and 290.4 hectares 
+
 
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
@@ -168,6 +167,9 @@ <h1>Population Density of London Boroughs* </h1><p/>
 };
 
 </script>
+
+Note: exculdes City of London with 8000 residents and 290.4 hectares 
+
 
 
   </body>

diff --git a/index.html b/index.html
@@ -59,7 +59,7 @@ <h1>Population Density of London Boroughs* </h1><p/>
       var w = 800;
       var h = 400;
 
-var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
+var padding = [ 20, 10, 50, 60 ];  //Top, right, bottom, left
 
 var xScale = d3.scale.linear()
                .range([ padding[3], w - padding[1] - padding[3] ]);

diff --git a/London-Borough-Profiles.csv b/London-Borough-Profiles.csv
@@ -1,5 +1,4 @@
 area,pop,hec
-City of London,8000,290.4
 Barking and Dagenham,201000,3610.8
 Barnet,384600,8674.8
 Bexley,236200,6058.1

diff --git a/index.html b/index.html
@@ -45,18 +45,19 @@
 </head>
   <body>
 
-    <h1>Population Density of London Boroughs </h1><p/>
+    <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/>
 
+* exculding City of London with 8000 residents and 290.4 hectares 
 
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 
-      var w = 600;
-      var h = 600;
+      var w = 800;
+      var h = 400;
 
 var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
 

diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
 </head>
   <body>
 
-    <h1>The Population Density of London Boroughs </h1><p/>
+    <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/>
 

diff --git a/London-Borough-Profiles.csv b/London-Borough-Profiles.csv
@@ -0,0 +1,34 @@
+area,pop,hec
+City of London,8000,290.4
+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
diff --git a/index.html b/index.html
@@ -0,0 +1,173 @@
+<!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>The 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/>
+
+
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script>
+
+      var w = 600;
+      var h = 600;
+
+var padding = [ 20, 10, 50, 50 ];  //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("body")
+            .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>
+
+
+  </body>
+</html>
No results found