markWidth
legendConfig = ({
title: "Share of Pop.",
labelExpr: "join(['1 in ', datum.value, if(datum.value >= 250, '+', '')], '')",
orient: "none",
direction: (markWidth >= 600 ? "vertical" : "horizontal"),
legendX: (markWidth >= 600 ? markWidth - 100 : markWidth - 125),
legendY: 10
})
mark = vl.markGeoshape(
{
stroke: '#aaa',
strokeWidth: 0.25,
}
)
.data(jurisdictions)
.encode(
vl.tooltip([
{type: 'nominal', field: 'name', title: "Name"},
{type: 'quantitative', field: 'shareOfPop', title: "Share of Pop", format: ","},
{type: 'quantitative', field: 'cases', title: 'Cases', format: ","},
{type: 'quantitative', field: 'population', title: 'Population', format: ","},
]),
vl.color()
.fieldQ('shareOfPop')
.scale(
{
scheme: "yelloworangered",
domain: [250, 20],
clamp: true,
}
)
.legend(legendConfig)
)
.project(vl.projection('albersUsa'))
.height(markHeight)
.width(markWidth)
.autosize(
{
type: "fit",
contains: "padding",
resize: true
}
)
url = getURL('Attack_Rate_Automated')
layer = arcGIS.getLayer({url: url})
lastEdit = new Date(layer.editingInfo.lastEditDate)
sinceLastEdit = moment(lastEdit).fromNow()
queryResults = arcGIS.queryFeatures(
{url: url, f: "geojson"}
)
queryResults.features[0]
jurisdictions = queryResults.features.map(
d => ({
type: "Feature",
id: d.id,
geometry: d.geometry,
name: d.properties.County,
cases: d.properties.Cases,
population: d.properties.Population,
shareOfPop: Math.round(d.properties.Population / d.properties.Cases)
})
)
statewideCases = d3_arrays.sum(
queryResults.features, d => d.properties.Cases
)
statewidePopulation = d3_arrays.sum(
queryResults.features, d => d.properties.Population
)
title = `1 in every ${shareOfStatePop} people in Missouri confirmed Covid-19 positive`
domain = [
d3_arrays.max(jurisdictions, d => d.shareOfPop),
d3_arrays.min(jurisdictions, d => d.shareOfPop),
]
d3.histogram()(jurisdictions)
d3 = require("d3")
vl.markBar()
.data(jurisdictions)
.encode(
vl.x().fieldO("shareOfPop").bin({maxbins: 30}).sort("descending"),
vl.y().count()
)
.render()
markRendered = mark.render()
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.
