Published unlisted
Edited
Mar 23, 2022
Taiwan Map
zips = FileAttachment("CountyBoundary_TW.geojson").json()
CA_Boundary = FileAttachment("CA_Boundary.geojson").json()
Amtrak_Routes = FileAttachment("HSRRoute_TW.geojson").json()
AmtrakSts = FileAttachment("HSRStationPoint_TW.geojson").json()
d3 = require("d3@6")
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [ 250, 110, width -800, height -700]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 500, height - 5], zips);
var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(zips.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "white")
.style('fill-opacity','.5')
.style("stroke-width", ".25")
.style("stroke", "rgb(0, 25, 51)")
//insert parks into map
///g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
///.data(CA_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", path) //The d attribute defines a path to be drawn, only applies to appended elements
/// .style("fill", "rgb(255,204,255)")
/// .style('fill-opacity','.25')
/// .style("stroke-width", ".05")
/// .style("stroke", "rgb(255,0,127)")
g.selectAll("path2") //d3 geopath
//svg
//.selectAll('path')
.data(Amtrak_Routes.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", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style('fill-opacity','0')
.style("stroke-width", ".1")
.style("stroke", "rgb(0,0,0)")
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(AmtrakSts.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr("cy",function(d) {return path.centroid(d)[1]})
.attr('r',1.5)
.attr('fill','rgb(0,0,0)')
.style('fill-opacity','1')
return svg.node();
}
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.
