solution_1 = {
const width = 960;
const height = 600;
const geoGenerator = d3.geoPath()
.projection(projection);
const svg = d3.select(DOM.svg(width, height))
projection.fitExtent([[20, 20], [960, 600]], melbourne);
svg.append('g').selectAll('path')
.data(melbourne.features)
.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', '#ccc')
.attr('stroke', '#333')
svg.append('g').selectAll('circle')
.data(data.features)
.enter()
.append('circle')
.attr('cx', (d) => projection(d.geometry.coordinates)[0])
.attr('cy', (d) => projection(d.geometry.coordinates)[1])
.attr('r', 4)
.attr('fill', 'red')
return svg.node()
}
solution_2 = {
const width = 960;
const height = 600;
const geoGenerator = d3.geoPath()
.projection(projection);
const svg = d3.select(DOM.svg(width, height))
projection.fitExtent([[20, 20], [960, 600]], melbourne);
svg.append('g').selectAll('path')
.data(melbourne.features)
.enter()
.append('path')
.attr('d', geoGenerator)
svg.append('g').selectAll('circle')
.data(data.features)
.enter()
.append('circle')
.attr('cx', (d) => projection(d.geometry.coordinates)[0])
.attr('cy', (d) => projection(d.geometry.coordinates)[1])
.attr('r', 4)
.attr('fill', 'blue')
return svg.node()
}
solution_3 = {
const width = 960;
const height = 600;
const geoGenerator = d3.geoPath()
.projection(projection);
const svg = d3.select(DOM.svg(width, height))
projection.fitExtent([[20, 20], [960, 600]], melbourne);
const scale = d3.scaleLinear().domain(d3.extent(data.features, (d) => parseInt(d.properties.capacity))).range([1,6])
svg.append('g').selectAll('path')
.data(melbourne.features)
.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', '#ccc')
svg.append('g').selectAll('circle')
.data(data.features)
.enter()
.append('circle')
.attr('cx', (d) => projection(d.geometry.coordinates)[0])
.attr('cy', (d) => projection(d.geometry.coordinates)[1])
.attr('r', (d) => scale(d.properties.capacity))
.attr('fill', 'red')
return svg.node()
}
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.
