Software engineering with human-centred design, visualization, GIS and data science.
Published
Edited
Dec 6, 2020
12 forks
Importers
2 stars
map
function randomBoundingBoxCoordinates(boundingBox) {
const randomLongitude = d3.randomUniform(
boundingBox[0][0],
boundingBox[1][0] + 360 * (boundingBox[1][0] < boundingBox[0][0])
)
const randomLatitude = d3.randomUniform(boundingBox[0][1], boundingBox[1][1])
return () => [randomLongitude(), randomLatitude()]
}
function randomFeatureCoordinates(feature) {
const featureBoundingBox = d3.geoBounds(feature)
const randomCoordinates = randomBoundingBoxCoordinates(featureBoundingBox)
return () => {
let p
do {
p = randomCoordinates()
} while (!d3.geoContains(feature, p))
return p
}
}
function countryFeature(countryName) {
return countries.features.filter(f => f.properties.name === countryName)[0]
}
australia = countryFeature("Australia")
randomAustraliaCoordinates = randomFeatureCoordinates(australia)
randomAustraliaCoordinates()
randomCountryCoordinates = randomFeatureCoordinates(countryFeature(countryName))
randomCoordinates = {
while (true) {
const delay = 1000 / coordinatesPerSecond
yield await Promises.tick(delay, randomCountryCoordinates())
}
}
d3.select(map).selectAll("circle")
.data([randomCoordinates])
.join("circle")
.attr("cx", d => projection(d)[0])
.attr("cy", d => projection(d)[1])
.attr("r", 4)
.style("fill", "red")
countryNames = countries.features.map(f => f.properties.name).sort()
d3 = require("d3@6")
import {map, projection, countries} from "@jeffreymorganio/world-map-with-interactive-controls"
import {select, slider} from "@jashkenas/inputs"
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.
