Public
Edited
Dec 15, 2022
1 fork
d3 = require("d3@6")
viewof options = {
const buttons = html`
<button id='boundingbox_DC'>Full metro system</button>
<button id=’boundingbox_MALL'>Zoom in to National Mall</button>`;
buttons.onclick = event => {
clicked(event.target.id);
};
return buttons;
}
chart = {
const width = 1300,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [25, 25, width-100, height-90]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 10, height - 40], DCbb);
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 path10 = d3.geoPath().projection(projection);
var path11 = d3.geoPath().projection(projection);
var path12 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path9") //d3 geopath
.data(DMV_stateboundaries.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','static')
.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style("stroke", "rgb(0,0,0)")
.style('stroke-opacity','.05')
.style("stroke-width", '3')
return svg.node();
}
map = {
const svg = d3.create("svg")
.attr('width', width_a)
.attr('height', height);
var path11 = d3.geoPath().projection(projection);
var path12 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path9") //d3 geopath
.data(DMV_stateboundaries.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','static')
.attr("d", path11) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style("stroke", "rgb(0,0,0)")
.style('stroke-opacity','.05')
.style("stroke-width", '3')
return svg.node();
}
function clicked(region) {
const plot = d3.select(map).select('.plot');
const thisRegion = mapRegions.filter(d => d.region === region)[0];
const x0 = thisRegion.bounds[0][0];
const y0 = thisRegion.bounds[0][1];
const x1 = thisRegion.bounds[1][0];
const y1 = thisRegion.bounds[1][1];
const xy0 = myProjection([x0, y0]);
const xy1 = myProjection([x1, y1]);
const xy = myProjection([(x0 + x1) / 2, (y0 + y1) / 2]);
const separation_x = xy1[0] - xy0[0];
const separation_y = xy0[1] - xy1[1];
const scale = Math.max(1, Math.min(4, 0.9 / Math.max(separation_x / width, separation_y / height)));
const transform = `translate(${width_a / 2},${height / 2})scale(${scale})translate(${-xy[0]},${-xy[1]})`;
plot
.attr("transform", transform);
plot.selectAll(".country")
.style("stroke-width", 0.5 / scale);
plot.selectAll(".disputed")
.style('stroke-dasharray', 2 / scale)
.style("stroke-width", 1.5 / scale);
}
width_a = width
height = width_a / 2;
mapRegions = [
{ region: 'boundingbox_DC',
bounds: [[-77.595155, 39.195340], [-76.780821, 38.703513]],
},
{ region: 'boundingbox_MALL',
bounds: [[-77.059341, 38.867852], [-76.980985, 38.907220]],
}
]
DCbb = FileAttachment("DC_BB.geojson").json()
DCinset = FileAttachment("DC_BB_inset.geojson").json()
DMV_stateboundaries = FileAttachment("DMV_stateboundaries.geojson").json()
DCstationsGROWTH = FileAttachment("DCnewlines5.csv").csv()
DClines = FileAttachment("DClinesFUTURE_5.geojson").json()
lines1976 = FileAttachment("1976lines_V2.geojson").json()
lines1978 = FileAttachment("1978lines_V2.geojson").json()
lines1983 = FileAttachment("1983lines_V2.geojson").json()
lines1991 = FileAttachment("1991lines_V2.geojson").json()
lines2004 = FileAttachment("2004lines_V2.geojson").json()
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
chronology = ['Current','1976','1978','1983','1991','2004','2022','2026','2028','2030']
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.
