Published
Edited
Jul 30, 2020
Importers
md`# Base Map`
function basemap(config = {}) {
let {
width = 800,
height = 500,
path = defaultpath,
} = config;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
// .attr("overflow", "visible")
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white");
const districts = svg.append('g');
districts.selectAll('path')
.data(CityDistricts.features)
.join('path')
.classed('district',true)
.attr('fill', 'beige')
.attr('d', path);
/*
svg.append("rect")
.attr("width", "30%")
.attr("height", "30%")
.attr("x", "25%")
.attr("y", "25%")
.attr("fill", "red");
*/
// addWater(svg, path);
return svg;
}
basemap().node()
function addWater(svg, path)
{
const districts = svg.append('g');
districts.selectAll('path')
.data(Water.features)
.join('path')
.classed('water',true)
.attr('fill', 'lightblue')
.attr('d', path);
return;
}
function addParks(svg, path)
{
ParkSettings.forEach(function(d) {
const newGroup = svg.append('g');
newGroup.selectAll('path')
.data(d.data.features)
.join('path')
.attr('d', path)
// .classed(d.data,true)
.attr('fill', d.fill)
.attr('stroke','none')
.attr('opacity',.4);
return;
})
}
ParkSettings = [ ({data: await FileAttachment("Park.geojson").json(), fill: "lightgreen"}),
({data: await FileAttachment("Cemetery.geojson").json(), fill: "darkgreen"})]
await FileAttachment("Cemetery.geojson").json()
CityDistricts = await FileAttachment("Districts.geojson").json();
Water = await FileAttachment("BWater.geojson").json();
defaultpath = d3.geoPath().projection(projection);
d3 = require('d3@5');
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.
