An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
usMaps = {
const height = 600;
const canvas = DOM.canvas(width, height);
var context = canvas.getContext("2d");
// don't set the projection here since us/10m.json is already projected
// alternatively, the projection `d3.geoIdentity()` can be used
var path = d3.geoPath(null, context);
//context.beginPath();
//path(us_states);
//context.stroke();
// create a separate projection that uses the same parameters as the topojson:
// https://github.com/topojson/us-atlas#us-atlas-topojson
var projection = d3
.geoAlbersUsa()
.scale(1300)
.translate([487.5, 305]);
// get an x,y coordinate for a latitude and longitude
us_state_capitals.forEach(o => {
var capital = projection([o.longitude, o.latitude]);
context.fillStyle = "red";
context.fillRect(capital[0], capital[1], 5, 5);
});
// get the latitude and longitude of an x,y coordinate
// us_states.features.forEach(o => {
// var centroid = path.centroid(o);
// these two lines are unnecessary, but demonstrate how to convert from x,y to latlon and back
// var latlon = projection.invert(centroid);
// centroid = projection(latlon);
// context.fillStyle = "blue";
// context.fillRect(centroid[0], centroid[1], 5, 5);
// });
return canvas;
}
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.
