230130_BER dashboardtest / Josie Moran

# 230130_BER dashboardtest

d3 = require("d3@6")

dashboard =

html`

${berlinborder}

</div>

${chart}

</div>

`

berlinborder = FileAttachment("BerlinBorder tan.png").image()

chart = {

const width = 350,

height = 300;

const svg = d3.create("svg")

.attr("viewBox", [50, 30, width-100, height-100]);

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 50, height - 50], BERbox);

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 path5 = d3.geoPath().projection(projection);

var path6 = d3.geoPath().projection(projection);

var path7 = d3.geoPath().projection(projection);

var path8 = d3.geoPath().projection(projection);

var path9 = d3.geoPath().projection(projection);

var g = svg.append("g").attr("id", "paths");

//i'm not using the boundary lines, so I'm going to comment them out

/*

g.selectAll("path1") //d3 geopath

.data(boundary.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", path1) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '.5')

.style("stroke", "rgb(0,0,0)")

*/

g.selectAll("path4") //d3 geopath

.data(BERwater.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements

.style('fill', 'maroon')

.style("fill-opacity", ".3")

.style('stroke-opacity','.7')

.style("stroke-width", '.1')

.style('stroke', 'rosybrown')

g.selectAll("path6") //d3 geopath

.data(BERwall.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements

.style('stroke-opacity','.7')

.style("stroke-width", '.5')

.style('stroke', 'firebrick')

.style('fill', 'lightblue')

.style("fill-opacity", "0")

g.selectAll("path7") //d3 geopath

.data(BERbuildings.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", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style('fill', 'tan')

.style("fill-opacity", ".5")

.style('stroke-opacity','.5')

.style("stroke-width", '.1')

.style('stroke', 'darkred')

/*

g.selectAll("path5") //d3 geopath

.data(BERroads.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", "none")

.style('stroke-opacity','.4')

.style("stroke-width", '.3')

.style('stroke', 'dodgerblue')

*/

var c = svg.selectAll("circle") //d3 geopath

.data(BERspots)

.enter() //there are more data than elements, this selects them

.append("circle") //appends path to data

.attr("cx", function(d) {return projection([d.Long,d.Lat])[0]})

.attr("cy", function(d) {return projection([d.Long,d.Lat])[1]})

.attr('r', 2)

.attr('fill',colorType) // add function to control color by 'type'

.attr('stroke-opacity','.65')

.attr("stroke-width", ".2")

.attr('stroke', 'pink')

.style('fill-opacity','1')

.on('mouseover', spotText)

.on('mouseout', removeSpotText)

function colorType(d,i) {

var color = 'black'

if(d.ActivityType=='club'){color = 'darkblue'}

if(d.ActivityType=='club-event space'){color = 'darkslateblue'}

if(d.ActivityType=='shop'){color = 'purple'}

if(d.ActivityType=='museum'){color = 'slateblue'}

if(d.ActivityType=='cafe'){color = 'indigo'}

if(d.ActivityType=='culture'){color = 'mediumslateblue'}

return color

}

function spotText(event,d){

d3.select(this)

.attr('fill',colorType)

.attr('r', 3.5)

.style('stroke', 'pink')

.style("stroke-opacity",'.65')

.style("stroke-width", '.3')

svg.append("rect")

.attr('class','whitebox')

.attr("x", 65)

.attr("y", 127)

.attr("height", 21)

.attr("width", 59)

.attr('stroke','black')

.attr("stroke-width", '.5')

.attr('stroke-opacity', '.4')

.style("fill", 'white');

svg.append('text')

.attr('class','spots')

.attr('x','70')

.attr('y','135')

.attr('font-family','Helvetica')

.attr('font-size','.22em')

.attr('text-anchor','start')

.attr('font-weight','bold')

.text(d.Name)

svg.append('text')

.attr('class','spots')

.attr('x','70')

.attr('y','140')

.attr('font-family','Helvetica')

.attr('font-size','.15em')

.attr('text-anchor','start')

.attr('font-weight','normal')

.attr('font-style','italic')

.text(d.Neighborhood)

svg.append('text')

.attr('class','spots')

.attr('x','70')

.attr('y','143')

.attr('font-family','Helvetica')

.attr('font-size','.15em')

.attr('text-anchor','start')

.attr('font-weight','normal')

.attr('font-style','italic')

.text(d.ActivityType)

svg.append('line')

.attr('class','spotLine')

.attr('x1','124')

.attr('y1','137')

.attr('x2',projection([d.Long,d.Lat])[0])

.attr('y2','137')

.style('stroke-width','.3')

.style('stroke','black')

.style('stroke-dasharray','1 1')

svg.append('line')

.attr('class','spotLine')

.attr('x1',projection([d.Long,d.Lat])[0])

.attr('y1','137')

.attr('x2',projection([d.Long,d.Lat])[0])

.attr('y2',projection([d.Long,d.Lat])[1])

.style('stroke-width','.3')

.style('stroke','black')

.style('stroke-dasharray','1 1')

}

function removeSpotText(event,d) {

d3.select(this).attr('fill', colorType)

d3.select(this).attr('r', 2)

d3.select(this).style('stroke', 'pink')

d3.select(this).style('fill-opacity','1')

d3.select(this).style('stroke-opacity','.65')

d3.select(this).style('stroke-width', '.2')

d3.selectAll('text.spots').remove()

d3.selectAll('line.spotLine').remove()

d3.selectAll('rect.whitebox').remove()

var wrap = svg.selectAll("text.spots")

.each(function(d,i) {wrap_text(d3.select(this), 100) } );

}

/*

c.enter.append('circle')// format to add additional circles

.data(spots)

.enter() //there are more data than elements, this selects them

.append("circle") //appends path to data

.attr("cx", function(d) {return projection([d.longitude,d.latitude])[0]})

.attr("cy", function(d) {return projection([d.longitude,d.latitude])[1]})

.attr('r',3)

.attr('fill','black')

.style('fill-opacity','1')

*/

return svg.node();

}

margin = ({top: 30, right: 20, bottom: 30, left: 40})

BERbuildings = FileAttachment("BER_buildingscropped_V2.geojson").json()

BERbox = FileAttachment("BER_bb.geojson").json()

BERwater = FileAttachment("BER_waterhatches_V1.geojson").json()

BERwall = FileAttachment("BER_wall.geojson").json()

BERrails = FileAttachment("BER_railways_V1.geojson").json()

BERspots = FileAttachment("BER_places_003.csv").csv()

import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"

tooltip = d3

.select('body')

.append('div')

.attr('class', 'tooltip')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background-color', 'white')

.style('border-radius', '4px')

.style('-webkit-border-radius', '10px')

.style('-moz-border-radius', '10px')

.style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('color', 'white')

.style('font-family','sans-serif')

.text('a simple tooltip');

Purpose-built for displays of data