map = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
//.call(zoom)
// background
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0)
.attr("fill", 'white')
// NOTE: the excessive use of id attributes is for making the output svg more friendly for use in vector editing software such as Adobe Illustrator
// group for all map layers
const g = svg.append("g").attr("id", "map-layers")
// "land" from merged counties
const land = g.append("g")
.attr("id", "land")
.append("path")
.datum(landArea)
.attr("fill", "white")
.attr("stroke-width", 1.25)
.attr("stroke", 'white')
.attr("stroke-line-join", "round")
.attr("d", path)
// county boundaries
const countiesGroup = g.append("g").attr("id", "county-boundaries")
countiesGroup.selectAll('.county')
.data(countyFeats.features)
.enter()
.append('path')
.attr("stroke-width", 1.25)
.attr("stroke", 'white')
.attr('d', path)
.attr('fill', 'gray')
.on('mouseover', mouseover)
.on('mouseout', mouseout)
// will be attached to data in the future, hopefully!
function mouseover(d){
// Highlight hovered province
d3.select(this).style('fill', 'orange');
}
function mouseout(d){
// Highlight hovered province
d3.select(this).style('fill', 'gray');
}
// // osm major roads
// g.append("g")
// .attr("id", "major-roads")
// .selectAll(".road")
// .data(roads.features)
// .enter().append("path")
// .classed("road", true)
// .attr("fill", "none")
// .attr("stroke-width", d => d.properties.type === "motorway" ? 0.5 : 0.3)
// .attr("stroke", greys[3])
// .attr("stroke-linejoin", "round")
// .attr("d", path)
// // osm railways
// g.append("g")
// .attr("id", "railways")
// .selectAll(".rail")
// .data(rail.features)
// .enter().append("path")
// .classed("rail", true)
// .attr("fill", "none")
// .attr("stroke-width", 0.3)
// .attr("stroke", greys[3])
// .attr("stroke-linejoin", "round")
// .attr("stroke-dasharray", "1 1")
// .attr("d", path)
// // osm places
// g.append("g")
// .attr("id", "places")
// .selectAll(".place")
// .data(places.features)
// .enter().append("circle")
// .classed("place", true)
// .attr("cx", d => path.centroid(d)[0])
// .attr("cy", d => path.centroid(d)[1])
// .attr("r", 1.5)
// .attr("fill", "white")
// .attr("stroke", greys[5])
// .attr("stroke-width", 0.5)
// labels
const labelsGroup = g.append("g").attr("id", "labels")
// county labels
// labelsGroup.append("g").attr("id", "county-labels")
// .selectAll(".county-label")
// .data(countyCentroids.features)
// .enter().append("text")
// .classed("county-label", true)
// .attr("x", d => path.centroid(d)[0])
// .attr("y", d => path.centroid(d)[1])
// .attr("text-anchor", "middle")
// .attr("fill", greys[7])
// .style("font", "9px sans-serif")
// .style("text-transform", "uppercase")
// .style("text-shadow", textShadow)
// .text(d => d.properties.name)
// places labels
// labelsGroup.append("g").attr("id", "place-labels")
// .selectAll(".place-label")
// .data(places.features)
// .enter().append("text")
// .classed("place-label", true)
// .attr("x", d => path.centroid(d)[0])
// .attr("y", d => path.centroid(d)[1] - textOffset.y)
// .attr("text-anchor", "end")
// .attr("fill", greys[7])
// .style("font", "7px sans-serif")
// .style("text-shadow", textShadow)
// .text(d => d.properties.name)
return svg.node()
}
// helpful links:
// - https://bl.ocks.org/john-guerra/43c7656821069d00dcbc
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.
