baoding = FileAttachment("baoding.json").json()
{
await visibility();
const data = baoding;
const svg = d3
.select(DOM.element('svg'))
.attr('width', width)
.attr('height', height);
drawMap(svg, data);
return svg.node();
}
loadGeoJSON = async city => {
const api = `https://restapi.amap.com/v3/config/district?key=87f18cd69811f73f0863fbdbf69e3afe&keywords=${city}&subdistrict=1&extensions=all`;
const resp = await fetch(api);
return await resp.json();
}
amapTranslation = polyline => {
return {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: polyline.split(';').map(val => val.split(','))
}
};
}
drawMap = (svg, data) => {
const projection = d3.geoMercator();
projection.fitExtent([[0, 0], [width, height]], data);
const path = d3.geoPath(projection);
const polygonNode = svg
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', d => d.properties.color);
}
d3 = require('d3')
import { legend } from '@d3/color-legend'
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.
