Published
Edited
Jul 31, 2020
1 fork
url = getURL("county_MOHSIS_map")
layer = arcGIS.getLayer({url: url})
lastEdit = layer.editingInfo.lastEditDate
sinceLastEdit = moment(lastEdit).fromNow()
queryResults = arcGIS.queryFeatures(
{url: url, f: "geojson"}
)
statewideCases = d3_arrays.sum(queryResults.features, d => d.properties.CASES)
mark = vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})
.data(queryResults.features)
.encode(
vl.tooltip([
{type: 'nominal', field: 'properties.NAME', title: "County"},
{type: 'quantitative', field: 'properties.CASES', title: 'Cases'},
{type: 'quantitative', field: 'properties.DEATHS', title: 'Deaths'},
]),
vl.color()
.fieldQ('properties.CASES')
.scale({scheme: "yelloworangered"})
.legend({title: "Cases"})
)
.project(vl.projection('albersUsa'))
.height(markHeight)
.width(markWidth - (markWidth * 0.1))
.autosize(
{
type: "fit",
contains: "padding",
resize: true
}
)
.render()
chart = html`
<div style="width=${markWidth};">
<h2 style="text-align: center;">
${d3_format.format(",")(statewideCases)} confirmed Covid-19 cases in Missouri
</h2>
<p style="text-align: center;">
As of ${sinceLastEdit}
</p>
${mark}
</div>
`
md`ESRI published a package on npm that provides wrappers for the ArcGIS REST API (see the [docs](https://esri.github.io/arcgis-rest-js/api/)).`
arcGIS = require('@esri/arcgis-rest-feature-layer')
import {vl} from '@vega/vega-lite-api'
embed = require("vega-embed@6")
d3_fetch = require('d3-fetch')
d3_arrays = require('d3-arrays')
d3_format = require('d3-format')
moment = require("moment")
md`## Utilities`
getURL = featureName => `https://services6.arcgis.com/Bd4MACzvEukoZ9mR/arcgis/rest/services/${featureName}/FeatureServer/0`
markWidth = width >= 750 ? 750 : width
markHeight = width >= 500 ? 500 : width
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.
