The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Published
Edited
Aug 20, 2020
6 stars
msm-fellowship
Introduction to Data Visualization for the MSM / SHLI FellowshipHealth Equity Tracker Data Visualization PrecedenceCOVID-19 Vulnerability IndexU.S. Hexagon Map SVG with Data JoinedViz Ideas for U.S. Chronic Disease Indicators: DiabetesU.S. Diabetes Prevalence by CountyU.S. Obesity Prevalence by CountyVisualizing Racial/Ethnic Disparities in COVID-19 DeathsHET Vis Prototype: Provisional COVID-19 Death Counts by County and RaceCompare U.S. State DemographicsCompare Chronic Diseases in U.S. StatesCompare Chronic Diseases in U.S. States (V2)Chronic Diseases, U.S. State Small MultiplesU.S. County Population Density ChoroplethACS Race/Ethnicity Characteristics by StatePopulation Age Distribution by Race/Ethnicity ChartU.S. County Population Age DistributionU.S. Census Population Age Distributions by County by Race / EthnicityNY Times COVID-19 Cases by Race/EthnicityU.S. Coronavirus Cumulative Cases Animated Map
Hello, CARTO-VL
CARTO-VL: Update Vis Layer
Also listed in…
maps and geo
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
scrollZoomEnabled = {
if (!map.map) return false;

if (map.map.scrollZoom.isEnabled() && scrollZoom !== "enabled") {
map.map.scrollZoom.disable();
} else {
map.map.scrollZoom.enable();
}

return map.map.scrollZoom.isEnabled();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
getPopupHtml = (name, value) => `
<div class="map-popup-container">
<p><strong>${name}</strong></p>
<p>Percentage of households without internet access:</p>
<p class="big">${value}%</p>
</div>`
Insert cell
html`<style>
.map-popup-container {
width: 150px;
display: flex;
flex-direction: column;
}
.map-popup-container p {
margin: 0.2rem;
line-height: 0.9rem;
}
.map-popup-container p.big {
margin-top: 0.5rem;
font-weight: bold;
font-size: 2rem;
}
</style>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
carto = {
const c = await require("@carto/carto-vl@1.4.6/dist/carto-vl.min.js");
c.setDefaultAuth({
username: cartoUser,
apiKey: cartoApiKey
});
return c;
}
Insert cell
mapboxgl = {
const gl = await require("mapbox-gl@1.12.0");
if (!gl.accessToken) {
gl.accessToken =
'pk.eyJ1IjoiY2hlbnJpY2siLCJhIjoiLVhZMUZZZyJ9.HcNi26J3P-MiOmBKYHIbxw';
}
return gl;
}
Insert cell
mapboxglCSS = html`<link href='${await require.resolve(
"mapbox-gl@1.12.0/dist/mapbox-gl.css"
)}' rel='stylesheet' />`
Insert cell
import { checkbox } from "@jashkenas/inputs"
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