base map - UD Fall 2023 Chinatown
d3 = require("d3@6")
chart = {
const width = 900,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, 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");
var p = svg.selectAll("polyline") //d3 geopath
.data(proposal_outline1)
.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')
g.selectAll("path2") //d3 geopath
.data(chinatownboundary.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", '1')
.style("stroke", "rgb(255,0,255)")
g.selectAll("path3") //d3 geopath
.data(chinatownBuildings.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)")
var c = svg.selectAll("circle") //d3 geopath
.data(chinatown_restaurant)
.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)
.style('stroke', 'black')
.style('fill','white')
.style('fill-opacity','1')
.on ('mouseover',restaurantdescription)
.on ('mouseout',removerd)
function restaurantdescription(event,d){
console.log(d)
svg
.append("text")
.attr ('x', '100')
.attr ('y', '815')
.attr ('class','spot_position')
.text (d.type)
.style ('font-family', 'helvetica')
.style ('font-size' , '12px')
.style ('fill','red')
svg
.append("text")
.attr ('x', '100')
.attr ('y', '830')
.attr ('class','spot_position')
.text (d.waste)
.style ('font-family', 'helvetica')
.style ('font-size' , '12px')
.style ('fill','red')
svg
.append("text")
.attr ('x', '100')
.attr ('y', '800')
.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', '175')
.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', '175')
.attr ('y1', '765')
.attr ('x2', '175')
.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 removerd(){
d3.selectAll("text.spot_position").remove()
d3.selectAll("line.remline").remove()
}
c .enter().append("circle")
.data(food_bank)
.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',4)
.style('fill','blue')
.style('fill-opacity','1')
.on ('mouseover',foodbankdescription)
.on ('mouseout',removefoodbank)
function foodbankdescription(event,d){
console.log(d)
svg
.append("text")
.attr ('x', '100')
.attr ('y', '830')
.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', '800')
.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', '175')
.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', '175')
.attr ('y1', '765')
.attr ('x2', '175')
.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 removefoodbank(){
d3.selectAll("text.spot_position").remove()
d3.selectAll("line.remline").remove()
}
svg
.append("text")
.attr ('x', '100')
.attr ('y', '750')
.text ('Chinatown Food System')
.style ('font-family', 'helvetica')
.style ('font-size' , '20px')
svg
.append("text")
.attr ('x', '100')
.attr ('y', '780')
.text ('Spot Description')
.style ('font-family', 'helvetica')
.style ('font-size' , '15px')
.style ('fill','grey')
svg
.append("line")
.attr ('x1', '100')
.attr ('y1', '755')
.attr ('x2', '345')
.attr ('y2', '755')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
svg
.append("line")
.attr ('x1', '100')
.attr ('y1', '785')
.attr ('x2', '211')
.attr ('y2', '785')
.style("stroke-width", '.4')
.style("stroke", "rgb(80,80,80)")
c .enter().append("circle")
.data(proposal_location)
.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',6)
.style('fill','black')
.style('fill-opacity','1')
.on ('mouseover',proposalline)
.on ('mouseout',removepropline)
function proposalline(event,d){
console.log(d)
svg
.append("text")
.attr ('x', '100')
.attr ('y', '820')
.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', '800')
.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', '175')
.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', '175')
.attr ('y1', '765')
.attr ('x2', '175')
.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')
p.enter().append("polyline")
.data(truck_proposal1)
.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', 'cyan')
.style('stroke-width','3')
.style('fill-opacity','1')
.attr ('class','remtruck')
.style('stroke-dasharray', '4')
}
function removepropline(){
d3.selectAll("text.spot_position").remove()
d3.selectAll("line.remline").remove()
d3.selectAll("polyline.remtruck").remove()
}
c .enter().append("circle")
.data(nyc_shelter)
.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',4)
.style('fill','red')
.style('fill-opacity','1')
.on ('mouseover',nycsheltername)
.on ('mouseout',removenycshelter)
function nycsheltername(event,d){
console.log(d)
svg
.append("text")
.attr ('x', '100')
.attr ('y', '830')
.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', '800')
.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', '175')
.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', '175')
.attr ('y1', '765')
.attr ('x2', '175')
.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 removenycshelter(){
d3.selectAll("text.spot_position").remove()
d3.selectAll("line.remline").remove()
}
return svg.node();
}
truck_proposal1 = FileAttachment("truck_proposal@2.txt").tsv({array:true})
proposal_outline1 = FileAttachment("proposal_outline@1.txt").tsv({array:true})
chinatownBuildings = FileAttachment("chinatown buildings@1.geojson").json()
chinatownboundary = FileAttachment("chinatown boundary.geojson").json()
Map_outline = FileAttachment("chinatown bounding box@1.geojson").json()
foodbank = FileAttachment("food_banks.geojson").json()
personal_spots_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSP2fIJSmwr53qRFv_bVp4IMs4O3rQ-8iHwHTyCsMsV1a41LNTP7xVOjLNAB6is9K_lJ-puWlroaM-1/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"
chinatown_restaurant_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSPHslbXIRz32KPE11Bx1aMB13fPkxs2Rvp9DfbwTTckhxKo2ov5OiaNifQdg_9rKm3zwWL0QKnL6dg/pub?output=csv"
chinatown_restaurant = d3.csv(chinatown_restaurant_link, d3.autoType)
food_bank_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQkMlMSf6KtWDzFPv1wiw5fraxrEOjkq3YUtd6mjFxLMJLUzIQDEg-v_VHvv73GefO-GIkYtBokYixe/pub?output=csv"
food_bank = d3.csv(food_bank_link, d3.autoType)
nyc_shelter_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRlCgrhPPR4WrjcYeiMDy8u1Jbz-bQiWuPAKjikqe-pYxt91QyqpjFKp-2grwc9Kjv-Mr8AZkIjYKUa/pub?output=csv"
nyc_shelter = d3.csv(nyc_shelter_link, d3.autoType)
proposal_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSky3BFLBDcLT_0UQrGNcmKcaHC2-7TGFKrSGDf_87hiemUvIirgqyNqWj9yc9stdMGylM7t35MQ1xw/pub?output=csv"
proposal_location = d3.csv(proposal_link, d3.autotype)
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.
