Public
Edited
Apr 16, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
widthA = cellA.width
Insert cell
heightA = cellA.height
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cellA.embed(indicatorWithSecondaryValue({ value: max_death_rate_state, label: 'Max. Firearm Death Rate', secondaryValue: global_max, secondaryLabel: 'US Maximum' }))
Insert cell
cellB.embed(indicatorWithSecondaryValue({ value: mean_death_rate, label: 'Avg. Firearm Death Rate', secondaryValue: global_average, secondaryLabel: 'US Average' }))
Insert cell
cellC.embed(indicatorWithSecondaryValue({ value: min_death_rate_state, label: 'Min. Firearm Death Rate', secondaryValue: global_min, secondaryLabel: 'US Minimum' }))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// grid = html`
// <div id="parent-container" style="
// background red;
// display: flex;
// flex-direction: row;
// justify-content: space-between;
// gap: 10px;
// height: 250px;
// stretch: auto;
// ">
// <div name="a" style="flex: 1 1 auto"></div>
// <div name="b" style="flex: 1 1 auto"></div>
// <div name="c" style="flex: 1 1 auto"></div>
// </div>`
Insert cell
embed({
'data': {
'values': data.filter(x => (x.states === statesFilter))
},
// "width": 440,
// "height": 100,
"transform":[{
"density": "firearm_death_rates",
"bandwidth": 0.3
}],
"mark": "area",
"encoding": {
"x": {
"field": "value",
"title": "Firearm Death Rates",
"type": "quantitative"
},
"y": {
"field": "density",
"type": "quantitative",
"title": 'Density'
}
}
})
Insert cell
vl
.markArea()
.data(data.filter(x => (x.states === statesFilter)))
.transform(vl.density('firearm_death_rates').bandwidth(0.3))
.encode(
vl
.x()
.fieldQ('value')
.title('Firearm Death Rate'),
vl
.y()
.fieldQ('density')
.title('Density')
)
v1.markRule({color: 'red'})
.encoding( vl.x().fieldQ('value'))
.title("Density of Firearm Death Rates")
.render()
Insert cell
Insert cell
// embed({
// '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
// 'data': {
// 'values': data_hmap.filter(x => (x.year === i))
// },
// 'height': 800,
// 'width': 800,
// 'autosize': "fit",
// 'mark': 'rect',
// 'encoding': {
// 'y': {
// 'field': 'US States',
// 'type': 'ordinal',
// },
// 'x': {
// 'field': 'Urbanization Categories',
// 'type': 'ordinal',
// },
// 'color': {
// 'field': 'count',
// 'aggregate': 'sum',
// 'type': 'quantitative'
// }
// }
// })
Insert cell
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