base map - UD Fall 2023 Richard Gennaro
d3 = require("d3@6")
chart = {
const width = 900,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [100, 100, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], Map_outline);
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");
g.selectAll("path2") //d3 geopath
.data(subLns.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','1')
.style("stroke-width", '.75')
.style("stroke", "rgb(0,255,255)")
g.selectAll("path2") //d3 geopath
.data(bus_lanes.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','.5')
.style("stroke-width", '.5')
.style("stroke", "rgb(255,0,255)")
g.selectAll("path3") //d3 geopath
.data(financial_district_buildings.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", "rgb(240,240,240)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path3") //d3 geopath
.data(parks_financialDistrict.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", "rgb(0,255,0)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
var c = svg.selectAll("circle") //d3 geopath
.data(construction_pts.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',3)
.style('fill','blue')
.style('fill-opacity','1')
c .enter().append("circle")
.data(personal_spots)
.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',5)
.style('fill','red')
.style('fill-opacity','1')
.on ('mouseover',spotDescription)
.on ('mouseout',removespotdescription)
function spotDescription(event,d){
console.log(d)
svg
.append("text")
.attr ('x', '100')
.attr ('y', '875')
.attr ('class','spot_position')
.text (d.description)
.style ('font-family', 'helvetica')
.style ('font-size' , '12px')
.style ('fill','red')
svg
.append("text")
.attr ('x', '100')
.attr ('y', '850')
.attr ('class','spot_position')
.text (d.name)
.style ('font-family', 'helvetica')
.style ('font-size' , '12px')
.style ('fill','red')
var wrap = svg.selectAll("text.spot_position")
.each(function(d, i) { wrap_text(d3.select(this), 200) });//control how many pixels wide our text block can be
svg
.append("line")
.attr ('x1', projection([d.long,d.lat])[0])
.attr ('y1', projection([d.long,d.lat])[1])
.attr ('x2', '300')
.attr ('y2', projection([d.long,d.lat])[1])
.attr ('class','remline')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray', '4')
svg
.append("line")
.attr ('x1', '300')
.attr ('y1', '860')
.attr ('x2', '300')
.attr ('y2', projection([d.long,d.lat])[1])
.attr ('class','remline')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray', '4')
}
function removespotdescription(){
d3.selectAll("text.spot_position").remove()
d3.selectAll("line.remline").remove()
}
svg
.append("text")
.attr ('x', '100')
.attr ('y', '775')
.text ('Day in the Financial District')
.style ('font-family', 'helvetica')
.style ('font-size' , '20px')
svg
.append("text")
.attr ('x', '100')
.attr ('y', '830')
.text ('Spot Description')
.style ('font-family', 'helvetica')
.style ('font-size' , '15px')
.style ('fill','grey')
svg
.append("line")
.attr ('x1', '100')
.attr ('y1', '785')
.attr ('x2', '345')
.attr ('y2', '785')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
svg
.append("line")
.attr ('x1', '100')
.attr ('y1', '835')
.attr ('x2', '211')
.attr ('y2', '835')
.style("stroke-width", '.4')
.style("stroke", "rgb(80,80,80)")
var p = svg.selectAll("polyline") //d3 geopath
.data(waterFill)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d})
.style('fill','blue')
.style('stroke', 'black')
.style('stroke-width','.3')
.style('opacity','.2')
p.enter().append("polyline")
.data(waterdetail)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d})
.style('fill','none')
.style('stroke', 'black')
.style('stroke-width','.3')
.style('fill-opacity','.5')
return svg.node();
}
waterdetail = FileAttachment("waterDetail@1.txt").tsv({array:true})
waterFill = FileAttachment("Water fill@1.txt").tsv({array:true})
bus_lanes = FileAttachment("bus_lanes.geojson").json()
parks_financialDistrict = FileAttachment("parks_financial district.geojson").json()
financial_district_buildings = FileAttachment("financial_district_buildings.geojson").json()
subLns = FileAttachment("subway_lines@1.geojson").json()
Map_outline = FileAttachment("personal map_outline.geojson").json()
subSts = FileAttachment("sub_stops.geojson").json()
construction_pts = FileAttachment("construction_pts.geojson").json()
personal_spots_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT4kOTsp3eRKvOatjYubvqoFMcaVMidFGQekEmqAHBaxLnDcE8JhD9u0VZzFzlp5aKz-FiptANW8Suc/pub?output=csv'
personal_spots = d3.csv(personal_spots_link, d3.autoType)
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.
