Embed Images In Markdown or HTMLMath & Visualization - Use D3 to draw math imageGoogle Analytics In ObservableMy NotebooksNotebooks Visualizer - How to get your personal info like content of notebooks in ObservableUntitledPyodide - How to use python in ObservableGPU-Matrix-ComputeGithub API in Observable (v3 and v4)Table
GEO Data Generate
md`# GEO Data Generate`
md`## Example Using
[保定着色](https://observablehq.com/@yhyddr/d3-geo)
`
viewof apiKey = secret("apiKey", {
description:
"This is a secret API token whose value is only available to you!",
submit: "Set secret"
})
FileAttachment("baoding.json").json()
JSON.parse(jsondata)
jsondata = JSON.stringify(await GeoData("保定"))
GeoData("保定")
md`## Functions`
GeoDataJSON = async name => {
const city = await loadGeoJSON(name);
const data = {
type: 'FeatureCollection',
features: []
};
const limits = city.districts[0].districts.length;
const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
for (let i = 0; i < limits; i++) {
const district = city.districts[0].districts[i].name;
const resp = await loadGeoJSON(city.districts[0].districts[i].name);
const feature = amapTranslation(resp.districts[0].polyline);
feature.properties = {
name: district,
color: colors[i % colors.length]
};
data.features.push(feature);
}
return JSON.stringify(data);
}
GeoData = async name => {
const city = await loadGeoJSON(name);
const data = {
type: 'FeatureCollection',
features: []
};
const limits = city.districts[0].districts.length;
const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
for (let i = 0; i < limits; i++) {
const district = city.districts[0].districts[i].name;
const resp = await loadGeoJSON(city.districts[0].districts[i].name);
const feature = amapTranslation(resp.districts[0].polyline);
feature.properties = {
name: district,
color: colors[i % colors.length]
};
data.features.push(feature);
}
return data;
}
loadGeoJSON = async city => {
const api = `https://restapi.amap.com/v3/config/district?key=${apiKey}&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(','))
}
};
}
md`## Imports`
import { secret } from "@tmcw/secret"
d3 = require('d3')
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.
