EJ Fox & Ian Johnson
streaming data, code, acid, design
Published
Edited
Oct 5, 2020
6 stars
viewof selectionDemo
selectionDemo.sort((a, b) => a.NAME.localeCompare(b.NAME))
exampleWidth = width
exampleHeight = 500
countyShapes
viewof selectionIncome
selectionIncome
import {viewof selection as selectionDemo} with {
demographicsDataNiceKeys as data,
demoKeys as keys,
color as z,
colorKey as keyz,
height as height
} from "@d3/brushable-parallel-coordinates"
import {viewof selection as selectionIncome} with {
demographicsDataNiceKeys as data,
incomeKeys as keys,
color as z,
colorKey as keyz,
height as height
} from "@d3/brushable-parallel-coordinates"
import {
demographicsData,
selectedFields,
niceLabel,
countyShapes
} from "@enjalot/us-county-datasets"
demographicsData[2018]
selectedFields
niceKeys = selectedFields.map(d => niceLabel(d))
demographicsDataNiceKeys = {
let array = Array.from(demographicsData[2018]).map(d => {
let o = { ... d[1]}
selectedFields.forEach(key => {
let k = niceLabel(key)
o[k] = o[key]
delete o[key]
if(k == "gini index of income inequality: gini index" && o[k] < 0) o[k] = 0
})
return o
})
let bounds = {}
demoKeys.forEach(key => {
bounds[key] = -1
})
incomeKeys.forEach(key => {
bounds[key] = 600000
})
bounds[incomeKeys[0]] = 1
array.push(bounds)
return array
}
demoKeys = niceKeys.slice(0, 14)
incomeKeys = niceKeys.slice(14)
color = () => "seagreen"
colorKey = niceLabel(selectedFields[0])
height = 600
d3 = require("d3@6")
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.
