Published
Edited
Nov 18, 2019
map = {
let svg = d3.select(DOM.svg(width, height))
// construct the path elements using the D3 data join
svg.selectAll('path')
// data() expects an Array, so make sure to pass the features entry of our FeatureCollection
.data(mapData.features)
// select all data items that are not represented on the map yet, and add them
.enter()
.append('path')
// assign attributes to those new elements
.attr('d', pathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '0.5')
svg.selectAll('path')
.data(fireData.features)
.enter()
.append('path')
.attr('d', firePathGenerator)
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', '0.5')
.attr('stroke-opacity', '0.25')
// // ---- Interactivity starts here
// .on("mouseover", function() {
// d3.select(this)
// .attr("fill", "orange");
// })
// .on("mouseout", function(d) {
// d3.select(this)
// .transition().duration(250) // try these
// .attr("fill", "none");
// });
// pass to Observable to draw this block
return svg.node()
}
mapPath = pathGenerator(mapObject)
pathGenerator = d3.geoPath().projection(projection)
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], mapData)
// top left bottom right geometry
mapObject = mapData.features.filter(mapObject => mapObject.properties.objectid == "53716")[0]
mapData = d3.json('https://gist.githubusercontent.com/tarobao/960ac9d567969501aee18b384d3c96dc/raw/39780ae65c737eaabdac779e67b0f5cefe9def54/bra_land_rights.json')
firePathGenerator = d3.geoPath().projection(fireProjection) // obviously define this and fireProjection later...
fireProjection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], fireData)
fireData = d3.json('https://gist.githubusercontent.com/tarobao/6cadb7c76bd47e7736034657f7ba787e/raw/fe4def4bccd5f43bc3a6842a524b639296a8e8c0/fire_nrt_M6_87217.json')
d3 = require("d3@5")
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.
