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();

}