base map - UD Fall 2023- Wenji Pu
d3 = require("d3@6")
chart = {
const width = 960,
height = 960;
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], personalMapOutline);
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")
.data(mapsubways.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path2)
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '2')
.style("stroke", "rgb(192,199,191)")
g.selectAll("path3")
.data(mapbuildings.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "rgb(224,216,184)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.1')
.style("stroke-width", '.1')
.style("stroke", "rgb(0,0,0)")
var c = svg.selectAll("circle")
.data(artgalleries.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',2)
.style("stroke",'rgb(224,192,128)')
.style("stroke-width",'1.2')
.style('fill','none')
.on('mouseover',artgalleriesText)
.on('mouseout',removeartgalleriesText)
function artgalleriesText(event,d){
svg
.append("text")
.attr('x','100')
.attr('y','630')
.attr('class','artgalleries_name')
.style('font-faimly','helvetica')
.style('font-size','10px')
.style('font-weight','light')
.text(d.properties.name)
svg
.append("line")
.attr('x1','200')
.attr('y1','610')
.attr('x2',path1.centroid(d)[0])
.attr('y2',path1.centroid(d)[1])
.attr('class','fLine')
.style("stroke-width", '0.5')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray','4 2')
}
function removeartgalleriesText(){
d3.selectAll('text.artgalleries_name').remove()
d3.selectAll('line.fLine').remove()
}
c.enter().append("circle")
.data(subwaystations.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',4)
.style("stroke",'none')
.style('fill','rgb(192,199,191)')
.style('fill-opacity','1')
c.enter().append("text")
.data(subwaystations.features)
.enter()
.append("text")
.attr("x", function(d) {return path1.centroid(d)[0]})
.attr("y", function(d) {return path1.centroid(d)[1]-7})
.style('font-faimly','helvetica')
.style('font-size','6px')
.style('font-weight','lighter')
.text(function(d) {return d.properties.name})
c.enter().append("circle")
.data(omakase1.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',4)
.style("stroke",'none')
.style('fill','red')
.style('fill-opacity','1')
.on('mouseover',omakase1Text)
.on('mouseout',removeomakase1Text)
function omakase1Text(event,d){
svg
.append("text")
.attr('x','70')
.attr('y','750')
.attr('class','omakase1_name')
.style('font-faimly','helvetica')
.style('font-size','12px')
.style('stroke','red')
.style("stroke-width", '0.3')
.style('font-weight','light')
.text(d.properties.name)
svg
.append("text")
.attr('x','70')
.attr('y','770')
.attr('class','omakase1_description')
.style('font-faimly','helvetica')
.style('font-size','10px')
.style('stroke','red')
.style("stroke-width", '0.3')
.style('font-weight','light')
.text(d.properties.description)
svg
.append("line")
.attr('x1','150')
.attr('y1','760')
.attr('x2',path1.centroid(d)[0])
.attr('y2',path1.centroid(d)[1])
.attr('class','fLine')
.style("stroke-width", '0.5')
.style("stroke", "red")
.style('stroke-dasharray','4 2')
}
function removeomakase1Text(){
d3.selectAll('text.omakase1_name').remove()
d3.selectAll('text.omakase1_description').remove()
d3.selectAll('line.fLine').remove()
}
svg
.append("text")
.attr('x','100')
.attr('y','100')
.style('font-faimly','helvetica')
.style('font-size','16px')
.style('font-weight','bold')
.text('NYC Want to Go')
svg
.append("text")
.attr('x','100')
.attr('y','120')
.style('font-faimly','helvetica')
.style('font-size','10px')
.style('font-weight','lighter')
.text('This is a personal map')
svg
.append("text")
.attr('x','100')
.attr('y','600')
.style('font-faimly','helvetica')
.style('font-size','12px')
.style('font-weight','bold')
.text('Art Galleries')
svg
.append("text")
.attr('x','70')
.attr('y','710')
.style('font-faimly','helvetica')
.style('font-size','12px')
.style('font-weight','bold')
.text('Japanese Omakase')
var p = svg.selectAll("polyline")
.data(back1)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill','rgb(224,192,128)')
.style("fill-opacity", ".5")
.style('stoke','none')
return svg.node();
}
personalMapOutline = FileAttachment("personal map outline.geojson").json()
mapsubways = FileAttachment("mapsubways.geojson").json()
subwaystations = FileAttachment("subwaystations.geojson").json()
mapbuildings = FileAttachment("mapbuildings.geojson").json()
artgalleries = FileAttachment("artgalleries.geojson").json()
omakase1 = FileAttachment("omakase@1.geojson").json()
back1 = FileAttachment("back1.txt").tsv({array:true})
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.
