London Borough Initial Data Map
d3 = require("d3@6")
chart = {
const width = 900,
height = 660;
const svg = d3.create("svg")
.attr("viewBox", [25, -25, width-100, height-50]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 100, height - 100], boundingBox);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
//text created from a dataset should go above text written directly
var t = svg.selectAll("text")
.data(londonBoroughsActual1.features)
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr("x", function(d) {return path1.centroid(d)[0]})
.attr("y", function(d) {return path1.centroid(d)[1]-5})
.style('font-family','montserrat')
.style('font-size','12px')
.style('text-anchor','middle')
.style('font-weight','light')//use 'fill' to change font color
.text(function(d){return d.properties.name})
.on('mouseover', addInfo)
.on('mouseleave', removeInfo)
function addInfo(event, d){
for (let index = 0; index < length; ++index) {
}
var path8 = d3.geoPath().projection(projection);
/* something like this will loop through the spreadsheet and match the hovered text w/ the right spreadsheet row, then draw text below the name of the borough
*/
for (let i = 0; i < londonSpreadsheetSheet1.length; i++) {
if(d.properties.objectid == londonSpreadsheetSheet1[i].objectid){
console.log(event)
svg
.append("text")
.attr('x',path8.centroid(d)[0])
.attr('y',path8.centroid(d)[1]+10)
.attr('class','hoverText')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','bold')//use 'fill' to change font color
.style('text-anchor','middle')
//.text(londonSpreadsheetSheet1[i].information)//change information to the field you want to write
.text(londonSpreadsheetSheet1[i].BoroughRecyclingRates)
svg
.append("text")
//.attr('x',path8.centroid(d)[0])
.attr('x',650)
.attr('y',path8.centroid(d)[1]+20)
.attr('class','hoverText')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','bold')//use 'fill' to change font color
//.style('text-anchor','middle')
//.text(londonSpreadsheetSheet1[i].information2)
.text(londonSpreadsheetSheet1[i].BoroughFoodWasteRecycling)//change information to the field you want to write
}
}
}
function removeInfo(){
svg.selectAll("text.hoverText").remove()
}
//this text, which is written directly, should go below text created from a dataset
svg
.append("text")
.attr('x','75')
.attr('y','30')
.style('font-family','montserrat')
.style('font-size','32px')
.style('font-weight','bold')//use 'fill' to change font color
.text('LONDON MAP')
svg
.append("text")
.attr('x','75')
.attr('y','50')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','light')//use 'fill' to change font color
.text('INITIAL FOOD WASTE DATA WITHIN BOROUGHS OF LONDON')
svg
.append("text")
.attr('x','75')
.attr('y','500')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','light')//use 'fill' to change font color
.text('9.5 MILLION TONNES OF FOOD WASTE')
svg
.append("text")
.attr('x','75')
.attr('y','520')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','light')//use 'fill' to change font color
.text('COMES FROM THE UK')
svg
.append("text")
.attr('x','75')
.attr('y','560')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','light')//use 'fill' to change font color
.text('2 MILLION TONNES OF FOOD WASTE')
svg
.append("text")
.attr('x','75')
.attr('y','580')
.style('font-family','montserrat')
.style('font-size','12px')
.style('font-weight','light')//use 'fill' to change font color
.text('COMES FROM LONDON')
/*
svg
.append("text")
.attr('x','200')
.attr('y','240')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Ealing')
svg
.append("text")
.attr('x','90')
.attr('y','240')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Hillington')
svg
.append("text")
.attr('x','180')
.attr('y','120')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Harrow')
svg
.append("text")
.attr('x','280')
.attr('y','120')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Barnet')
svg
.append("text")
.attr('x','240')
.attr('y','200')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Brent')
svg
.append("text")
.attr('x','160')
.attr('y','300')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Hounslow')
svg
.append("text")
.attr('x','220')
.attr('y','400')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Kingston')
svg
.append("text")
.attr('x','220')
.attr('y','410')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Upon Thames')
svg
.append("text")
.attr('x','380')
.attr('y','410')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Croydon')
svg
.append("text")
.attr('x','510')
.attr('y','410')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Bromley')
svg
.append("text")
.attr('x','440')
.attr('y','330')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Lewisham')
svg
.append("text")
.attr('x','500')
.attr('y','330')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Greenwich')
svg
.append("text")
.attr('x','570')
.attr('y','330')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Bexley')
svg
.append("text")
.attr('x','670')
.attr('y','200')
.style('font-family','georgia')
.style('font-size','8px')
.style('font-weight','light')//use 'fill' to change font color
.text('Havering')
*/
g.selectAll("path1") //d3 geopath
.data(londonBoroughsActual1.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "Cornsilk")
.style('stroke-opacity','.3')
.style("stroke-width", '0.75')
.style("stroke", "DarkOrange")
return svg.node();
}
boundingBox = FileAttachment("london bounding box2.geojson").json()
londonBoroughsActual1 = FileAttachment("London boroughs actual@1.geojson").json()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
londonSpreadsheetSheet1
LONDON SPREADSHEET - Sheet1 (2).csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
