Public
Edited
Jan 18, 2023
3 forks
230118_SYD
d3 = require("d3@6")
chart = {
const width = 400,
height = 450;
const svg = d3.create("svg")
.attr("viewBox", [50, 0, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], SYDbox);
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 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(SYDwater.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', 'lavender')
.style("fill-opacity", ".6")
.style('stroke-opacity','.4')
.style("stroke-width", '.25')
.style('stroke', 'black')
g.selectAll("path4") //d3 geopath
.data(SYDbuildings.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", '.25')
.style('stroke', 'steelblue')
g.selectAll("path5") //d3 geopath
.data(SYDroads.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(SYDspots)
.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.CATEGORY=='Restaurant'){color = 'firebrick'}
if(d.CATEGORY=='Place'){color = 'mediumvioletred'}
return color
}
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", 245)
.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','252')
.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','252')
.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.DESCRIPTION)
svg.append('line')
.attr('class','spotLine')
.attr('x1','245')
.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();
}
SYDbuildings = FileAttachment("SYD_buildings_004.geojson").json()
SYDbox = FileAttachment("SYD_boundingbox_001.geojson").json()
SYDroads = FileAttachment("SYD_roads_004.geojson").json()
SYDwater = FileAttachment("SYD_water_001.geojson").json()
SYDrails = FileAttachment("SYD_railways_001.geojson").json()
SYDspots = FileAttachment("220118_SYD_locations_V3.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.
