Public
Edited
Dec 5, 2022
// Set the dimensions of the SVG element
// Define the map projection
var projection = d3.geoAlbersUsa()
.translate([width/2, height/2]);
// Define the path generator
var path = d3.geoPath()
.projection(projection);
// Create the SVG element
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Load the USA topojson data
d3.json("usa.json", function(error, usa) {
if (error) throw error;
// Draw the USA map
svg.append("path")
.datum(topojson.feature(usa, usa.objects.nation))
.attr("d", path);
// Define the latitude-longitude pair to plot on the map
var latLong = [35.7796, -78.6382];
// Convert the latitude-longitude coordinates to x-y coordinates on the map
var xy = projection(latLong);
// Draw a circle at the x-y coordinates on the map
svg.append("circle")
.attr("cx", xy[0])
.attr("cy", xy[1])
.attr("r", 5)
.style("fill", "red");
});
}
height = 10
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.
