Maps, Data, Viz, UX, Design
pivotByRaceColumnNames = pivotbyRaceTable.columnNames().slice(1)
pivotbyRaceTable = tableRelevant
.groupby("locationdesc")
.pivot('stratification1', 'datavalue')
.orderby('locationdesc')
tableRelevant = aq.fromCSV(d3.csvFormat(dataRelevant))
table = aq.fromCSV(d3.csvFormat(data))
groupedDataValueType = d3.group(data, d => d.datavaluetype)
greatestState = d3.least(rolledUpByState, ([, max]) => -max)
rolledUpByState = d3.rollup(
dataRelevant,
v => d3.max(v, d => d.datavalue),
d => d.locationabbr
)
summaryStatsOther = getSummaryStats(
dataRelevant.filter(d => d.stratification1 === "Other, non-Hispanic"),
"datavalue"
)
summaryStatsMultiracial = getSummaryStats(
dataRelevant.filter(d => d.stratification1 === "Multiracial, non-Hispanic"),
"datavalue"
)
summaryStatsHispanic = getSummaryStats(
dataRelevant.filter(d => d.stratification1 === "Hispanic"),
"datavalue"
)
summaryStatsWhite = getSummaryStats(
dataRelevant.filter(d => d.stratification1 === "White, non-Hispanic"),
"datavalue"
)
summaryStatsBlack = getSummaryStats(
dataRelevant.filter(d => d.stratification1 === "Black, non-Hispanic"),
"datavalue"
)
dataRelevantGroupedByState = d3.group(dataRelevant, d => d.locationabbr)
raceEthnicityCategories = new Set(dataRelevant.map(d => d.stratification1))
dataRelevant = data.filter(
d =>
d.question ===
"Prevalence of diagnosed diabetes among adults aged >= 18 years" &&
d.stratificationcategory1 === "Race/Ethnicity" &&
d.datavaluetype === "Crude Prevalence"
)
strat1Values = Array.from(groupedByStrat1.keys()).sort()
groupedByStrat1 = d3.group(data, d => d.stratification1)
stratCatValues = Array.from(groupedByStratCat1.keys()).sort()
groupedByStratCat1 = d3.group(data, d => d.stratificationcategory1)
questions = Array.from(groupedByQuestion.keys()).sort()
groupedByQuestion = d3.group(data, d => d.question)
states = Array.from(groupedByStateAbbr.keys()).sort()
groupedByStateAbbr = d3.group(data, d => d.locationabbr)
columnNames = Object.keys(
data.find(d => Object.keys(d).length === numberColumns)
).sort()
numberColumns = d3.max(data.map(d => Object.keys(d)), d => d.length)
numberRows = data.length
dataName = "U.S. Chronic Disease Indicators: Diabetes"
dataPublisher = "CDC"
dataProvider = "Centers for Disease Control and Prevention, National Center for Chronic Disease Prevention and Health Promotion, Division of Population Health"
dataDescription = md`CDC's Division of Population Health provides cross-cutting set of 124 indicators that were developed by consensus and that allows states and territories and large metropolitan areas to uniformly define, collect, and report chronic disease data that are important to public health practice and available for states, territories and large metropolitan areas. In addition to providing access to state-specific indicator data, the CDI web site serves as a gateway to additional information and data resources.
**Note:** this dataset is a subset of [CDI/BRFSS](https://observablehq.com/@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss).
`
dataUrl = "https://chronicdata.cdc.gov/Chronic-Disease-Indicators/U-S-Chronic-Disease-Indicators-Diabetes/f8ti-h92k"
dataIsPublic = true
historical = true
temporal = Boolean(dataStartDate && dataEndDate)
dataStartDate = 2009
dataEndDate = 2018
geoCovered = "United States"
geoDimensions = ["State"]
geoDimensionsForm = [""]
dataFormats = ["JSON", "CSV"]
noDataCode = ""
hasAPI = dataApiUrl.length > 0
dataApiUrl = "https://chronicdata.cdc.gov/resource/f8ti-h92k.json?yearstart=2018&$limit=10000"
dataLicense = "Public Domain"
// e.g. FileAttachment("some-tabular-data-file.csv")
dataFileAttachment = undefined
// e.g. new Date("2020-09-30")
dataFileAttachmentDate = undefined
format2d = d3.format(".2f")
formatPct = d3.format(".0%")
getSummaryStats = (data, field) => ({
min: d3.min(data, d => d[field]),
max: d3.max(data, d => d[field]),
median: d3.median(data, d => d[field]),
mean: d3.mean(data, d => d[field])
})
coerceNumber = value => (value && !isNaN(value) ? +value : null)
data = {
if (hasAPI && dataApiUrl) {
return fetch(dataApiUrl).then(async res => {
if (res.ok) {
const json = await res.json();
return json.map(parseDatum);
}
return res;
});
}
if (dataFileAttachment) {
return await dataFileAttachment.csv(); // <- change `.csv()` if the data is in another format, e.g. JSON
}
}
sampleDatum = {
anotherSampleDatum;
const d = getSampleDatum();
return d;
}
getSampleDatum = () =>
data ? data[Math.floor(Math.random() * data.length)] : undefined
import { button } from "@jashkenas/inputs"
import { toc } from "@mbostock/toc"
import { aq, op } from '@uwdata/arquero'
d3 = require("d3-array@2", "d3-dsv@2", "d3-format@2")
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.
