230130_BER hover test not working / Anish De

Anish De

Workspace

Public

Edited

Feb 1, 2023

Fork of 230130_BER

# 230130_BER hover test not working

d3 = require("d3@6")

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', 'slateblue')

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

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

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

.style('stroke', 'rebeccapurple')

g.selectAll("path6") //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', 'lightblue')

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

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

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

.style('stroke', 'steelblue')

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', 3)

.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 = 'firebrick'}

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

return color

}

{

const yTitle = g => g.append("text")

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.attr("y", 10)

.attr("transform", `translate(${100+margin.left},0)`)

.text("Violations")

const xTitle = g => g.append("text")

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.attr("x", width/2)

.attr("y", height)

.text("Number of Apprehensions")

svg.append("g")

.attr("fill", "green")

.selectAll("rect")

.data(BERspots)

.join("rect")

.attr("x", x(0))

.attr("y", d => y(d.violation))

.attr("width", d => x(d.number_of_apprehensions) - x(0))

.attr("height", y.bandwidth())

.on("mouseover", function(d) {

d3.select(this).attr("fill", "white");

//Get this bar's x/y values, then augment for the tooltip

var yPosition =

parseFloat(d3.select(this).attr("y")) +

y.bandwidth() / 2;

var xPosition =

parseFloat(d3.select(this).attr("x")) / 2 + width / 2;

tooltip

.html(

`<div> <strong>Violation: </strong>${d.violation}</div><div><strong>Number of Apprehensions:</strong> ${d.number_of_apprehensions}</div>`

)

.style('visibility', 'visible');

//Update the tooltip position and value

//d3.select("#tooltip")

// .style("left", xPosition + "px")

// .style("top", yPosition + "px")

// .select("#value")

// .text(d.violation);

//Show the tooltip

//d3.select("#tooltip").classed("hidden", false);

})

.on('mousemove', function () {

tooltip

.style('top', d3.event.pageY - 10 + 'px')

.style('left', d3.event.pageX + 10 + 'px');

})

.on('mouseout', function () {

tooltip.html(``).style('visibility', 'hidden');

d3.select(this).transition().attr('fill', 'blue');

});

function spotText(event,d){

d3.select(this)

.attr('fill', 'indigo')

.attr('r', 6)

.style('stroke', 'mediumslateblue')

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

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

svg.append("rect")

.attr('class','whitebox')

.attr("x", 45)

.attr("y", 170)

.attr("height", 30)

.attr("width", 100)

.attr('stroke','black')

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

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

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

svg.append('text')

.attr('class','spots')

.attr('x','52')

.attr('y','183')

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

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

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

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

.text(d.Name)

svg.append('text')

.attr('class','spots')

.attr('x','52')

.attr('y','191')

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

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

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

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

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

.text(d.Neighborhood)

svg.append('line')

.attr('class','spotLine')

.attr('x1','45')

.attr('y1','183')

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

.attr('y2','183')

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

.style('stroke','black')

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

svg.append('line')

.attr('class','spotLine')

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

.attr('y1','183')

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

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

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

.style('stroke','black')

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

}

function removeSpotText(event,d) {

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

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

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

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

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

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

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.

Learn more