Public
Edited
Nov 13, 2020
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
capetownmap = vl
.layer(
vl
.markGeoshape({
stroke: '#grey',
strokeWidth: 0.4,
fill: 'none'
})
.data(vl.json(wards.features)) //.data(vl.topojson(world).feature("common_name"))
.encode(
vl
.color()
.fieldN('properties.name')
.scale({ opacity: 0.900 })
.legend(null),
vl.tooltip("properties.name")
)
.project(
vl
.projection('mercator')
.scale(14900)
.translate(-4600, -9250)
),
vl
.markSquare({ fill: '#ffa500', size: 50, opacity: 0.7 })
.data(WWTW)
.encode(
vl.tooltip([vl.fieldN('Name'), vl.fieldQ('Maximum daily capacity')]),
vl.longitude().fieldQ('Location[1]'), // apply the field named 'longitude' to the longitude channel
vl.latitude().fieldQ('Location[0]'),
vl
.size()
.fieldQ('Maximum daily capacity')
.scale({ range: [0, 1000] })
.legend(null) // apply the field named 'latitude' to the latitude channel
)
.project(
vl
.projection('mercator')
.scale(14900)
.translate(-4600, -9250)
)
)
// .width(600)
// .height(400)
.config({ view: { stroke: null } })
.render()
Insert cell
ctwardcentroid = vl
.layer(
vl
.markGeoshape({
stroke: '#grey',
strokeWidth: 0.4,
fill: 'none'
})
.data(vl.json(wards.features)) //.data(vl.topojson(world).feature("common_name"))
.encode(
vl
.color()
.fieldN('properties.name')
.scale({ opacity: 0.900 })
.legend(null),
vl.tooltip("properties.name")
)
.project(
vl
.projection('mercator')
.scale(14900)
.translate(-4600, -9250)
),
vl
.markSquare({ fill: '#ffa500', size: 50, opacity: 0.7 })
.data(WWTW)
.project(
vl
.projection('mercator')
.scale(14900)
.translate(-4600, -9250)
)
)
// .width(600)
// .height(400)
.config({ view: { stroke: null } })
.render()
Insert cell
wardcentroid = d3.geoCentroid(wards)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
polygonsWithCentroids = wardtest.coordinates // contourData[0].coordinates I think I already have this with wards.
.map(coordinates => ({
type: 'Feature',
properties: {
centroid: d3.geoPath().centroid({
type: 'Polygon',
coordinates
})
},
geometry: {
type: 'Polygon',
coordinates
}
}))
.filter(f => d3.geoPath().area(f) > 20)
Insert cell
Insert cell
Insert cell
centroids = ({
type: 'FeatureCollection',
features: wardtest2.map(feature => ({
properties: {},
geometry: {
type: 'Point',
coordinates: feature.properties.centroid
}
}))
})
Insert cell
{
let svg = d3.select(DOM.svg(100, 100)), // (ow, oh)
width = +svg.attr("width"),
height = +svg.attr("height"),
margin = { top: 20, right: 30, bottom: 30, left: 40 };

svg
.selectAll("path.area")
.data(wardtest) // (polygonsWithCentroids)
.enter()
.append("path")
.attr("fill", "#000")
.attr('class', 'area')
.attr("d", d3.geoPath());

svg
.selectAll("path.centroid")
.data([centroids])
.enter()
.append("path")
.attr("fill", "#0ff")
.attr('class', 'centroid')
.attr("d", d3.geoPath().pointRadius(2));

return svg.node();
}
Insert cell
centroidmap = vl
.layer(
vl
.markGeoshape({ stroke: '#grey', strokeWidth: 0.5, opacity: 0.10 })
.data(vl.json(wardtest.features)) //.data(vl.topojson(world).feature("common_name"))
.encode(
vl
.color()
.fieldN('properties.name')
.scale({ opacity: 100 })
.legend(null),
vl.tooltip("properties.name")
)
.project(
vl
.projection('mercator')
.scale(14900)
.translate(-4600, -9200)
)
)
// .width(600)
// .height(400)
.config({ view: { stroke: null } })
.render()
Insert cell
Insert cell
NODE = ({ MIN_RADIUS: 2.5, MAX_RADIUS: 20, PADDING: 2 })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more