dataviz + interactive analytics
line_chart = vegalite({
data: {
values: enigma_table
},
mark: "line",
width,
height: 180,
autosize: "fit",
encoding: {
x: {field: "start_datetime", type: "temporal", timeUnit: "monthday" },
y: { aggregate: "count", field: "*", type: "quantitative" },
color: { value: ENIGMA_MONO_COLOR }
}
})
line_chart_stacked = vegalite({
data: {
values: enigma_table
},
mark: "line",
width, height: 180,
autosize: "fit",
encoding: {
x: { field: "start_datetime", type: "temporal", timeUnit: "monthday" },
y: { aggregate: "count", field: "*", type: "quantitative" },
color: {field: "event_borough",
scale: {range: ENIGMA_ORDINAL_SCALE}}
}
})
bar_chart = vegalite({
data: {
values: enigma_table
},
mark: "bar",
height: 150,
width: 300,
encoding: {
x: { field: "start_datetime", type: "ordinal", timeUnit: "day" },
y: { aggregate: "count", field: "*", type: "quantitative" },
color: { value: ENIGMA_MONO_COLOR }
},
title: "Most Events Start on Weekends"
})
bar_chart_horizontal = vegalite({
data: {
values: enigma_table
},
mark: "bar",
height: 150,
width: 300,
encoding: {
y: { field: "start_datetime", type: "ordinal", timeUnit: "day",
sort: {field: '*', op: 'count', order: "descending"}},
x: { aggregate: "count", field: "*", type: "quantitative" },
color: { value: ENIGMA_MONO_COLOR }
},
title: "Most Events Start on Weekends (Sorted)"
})
durations_histogram_short = vegalite({
data: {
values: enigma_table
},
mark: "bar",
height: 150,
width: 300,
encoding: {
x: {field: "duration_in_hours", bin: {maxbins: 12} },
y: { aggregate: "count", field: "*", type: "quantitative" },
color: { value: ENIGMA_MONO_COLOR }
},
transform: [{filter: "datum.duration_in_hours < 100"}],
title: "Most events are 2 days (48 hours) or less.",
})
horizontal_bar_chart = vegalite({
data: {
values: long_events
},
mark: "bar",
height: 150,
width: 300,
encoding: {
y: { field: "event_type", type: "ordinal",
sort: {field: '*', op: 'count', order: "descending"}
},
x: { aggregate: "count", field: "*", type: "ordinal", },
color: { value: ENIGMA_MONO_COLOR }
},
title: `Events over ${LONG_EVENT_CUTOFF} Hours, by Event Type`
})
horizontal_bar_chart_faceted = vegalite({
data: {
values: long_events
},
mark: "bar",
height: 100,
width: 300,
encoding: {
y: { field: "event_type", type: "ordinal",
sort: {field: '*', op: 'count', order: "descending"},
axis: {title: null}
},
x: { aggregate: "count", field: "*", type: "ordinal" },
row: {field: 'event_borough'},
color: { value: ENIGMA_MONO_COLOR }
},
title: `Events over ${LONG_EVENT_CUTOFF} Hours, by Event Type`
})
horizontal_bar_chart_faceted_full = vegalite({
data: {
values: enigma_table
},
mark: "bar",
height: 150,
width: 500,
encoding: {
y: { field: "event_type", type: "ordinal",
sort: {field: '*', op: 'count', order: "descending"},
axis: {title: null} // reduce busy-ness of the axis
},
x: { aggregate: "count", field: "*", type: "ordinal" },
row: {field: 'event_borough'},
color: { value: ENIGMA_MONO_COLOR }
},
title: `Permitted Events by Borough and Event Category`
})
horizontal_bar_chart_faceted_full_logscale = vegalite({
data: {
values: enigma_table
},
mark: "bar",
height: 160,
width: 500,
encoding: {
y: { field: "event_type", type: "ordinal",
sort: {field: '*', op: 'count', order: "descending"},
axis: {title: null}
},
x: { aggregate: "count", field: "*", type: "ordinal",
scale: {type: 'log'} // adding your log scale here!
},
row: { field: 'event_borough'},
color: { value: ENIGMA_MONO_COLOR }
},
title: `Permitted Events by Borough and Event Category with Log Scale`
})
heatmap_chart_multiples = vegalite({
data: {values: construction_data },
mark: "bar",
width,
height: 600,
autosize: "fit",
encoding: {
x: { aggregate : 'count', type: 'quantitative'},
y: { field: "event_location", type: 'nominal',
sort: {field: "*", op: 'count', order: "descending"}
},
color: { field: "event_borough", type: "nominal",
scale: { range: ENIGMA_ORDINAL_SCALE } } // add color encoding
},
title: "All Construction Permits, Grouped by Event Location and Grouped by Borough"
})
heatmap_chart = vegalite({
data: { values: enigma_table },
mark: "rect",
width,
height: 400,
autosize: "fit",
encoding: {
x: { field: "event_type", type: "nominal"},
y: { field: "event_borough", type: 'nominal'},
color: { aggregate: 'count', type: 'quantitative',
scale: { range: ENIGMA_HEAT_SCALE} }
},
title: "Most NYC Event Permits in March 2018 are for Manhattan Construction or Special Events"
})
heatmap_chart_no_manhattan = vegalite({
data: {
values: enigma_table.filter(x => (x.event_borough != "Manhattan")) // example of how to filter inline
},
mark: "rect",
width,
height: 400,
autosize: "fit",
encoding: {
x: { field: "event_type", type: "nominal"},
y: { field: "event_borough", type: 'nominal'},
color: { aggregate: 'count', type: 'quantitative',
scale: {range: ENIGMA_HEAT_SCALE }},
},
title: "After Manhattan is Removed, Special Events are the Majority (Mostly in Brooklyn)"
})
parade_events = enigma_table.filter(x => x.event_type === "Parade")
parade_waterfall = vegalite({
data: {
values: parade_events
},
mark: "bar",
width,
height: 1300, // Make this tall enough for all the labels to display without squashing
autosize: "fit",
encoding: {
y: { field: "event_compound_name", type: 'ordinal',
sort: {field: 'event_borough', op: 'min'}, // Provide operator when sorting on other columnss
axis: { title: "Event Name" }
},
x: { field: "start_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes",
axis: { format: "%m/%d/%y", // Provide custom date formatting + axis label
title: "Time" }
},
x2: { field: "end_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes" },
color: {field: 'event_borough', type: 'nominal',
scale: {range: ENIGMA_ORDINAL_SCALE }}
},
transform : [ // Create a custom field because the event_name alone isn't unique
{'calculate': "datum.event_name + ' ' + datum.event_id",
'as': 'event_compound_name'
}
],
title: `Gantt Chart of Parades in NYC`
})
parade_waterfall_good_friday = vegalite({
data: {
values: parade_events
},
mark: "bar",
width,
height: 700,
autosize: "fit",
encoding: {
y: { field: "event_compound_name", type: 'ordinal',
sort: { field: 'start_datetime', op: 'min'}
},
x: { field: "start_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes",
axis: {format: '%H:00', title: "Time"}
},
x2: { field: "end_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes" },
color: { value: ENIGMA_MONO_COLOR }
},
transform : [
{'calculate': "datum.event_name + ' ' + datum.event_id",
'as': 'event_compound_name'
},
// Add a filter to restrict the data to lie within a given date range
{ filter: { field: 'start_datetime', timeUnit: 'monthdate',
range: [{month: 'mar', date: 30},
{month: 'mar', date: 31}]
}
}
],
title: `Good Friday Parades in NYC, Sorted by Start time (3/30 - 3/31)`
})
parade_waterfall_good_friday_brushing = vegalite({
data: {
values: parade_events
},
vconcat: [
{ // The top layer is used to create the minimap. It's basically the same chart, but smaller
// , with fewer labels, and with the addition of a "selection" key.
width,
height: 180,
mark: "bar",
selection: {
brush: { type: "interval", encodings: ['x']}
},
encoding: {
y: { field: "event_compound_name", type: 'nominal',
sort: { field: 'start_datetime', op: 'min' },
axis: { labels: false, ticks: false, title: false }
},
x: { field: "start_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes",
axis: { title: "Event Time",
format: "%m/%d"}, // Smaller labels for smaller space
scale: { domain: { selection: "brush" } }
},
x2: { field: "end_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes" },
}
},{
width,
height: 1400,
autosize: "fit",
mark: "bar",
encoding: {
y: {field: "event_compound_name", type: 'nominal',
sort: {field: 'start_datetime', op: 'min'}
},
x: { field: "start_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes",
axis: { title: "Event Time",
format :"%m/%d %H:%M"},
scale: {domain: {selection: "brush"}}
},
x2: { field: "end_datetime", type: "temporal", timeUnit: "yearmonthdatehoursminutes",
scale: {domain: {selection: "brush"}}},
color: { value: ENIGMA_MONO_COLOR }
},
}
],
transform : [
{'calculate': "datum.event_name + ' ' + datum.event_id",
'as': 'event_compound_name'
},
],
title: `Interactive Gantt Chart: All Permitted Parades in NYC (March 2018)`
})
parade_events
Type Table, then Shift-Enter. Ctrl-space for more options.
// Confirming that promises work
// fetch('https://jsonplaceholder.typicode.com/posts/1')
// .then(response => response.json())
// md`To programmatically access Enigma Public datasets, you'll need a \`dataset_id\`. You can get this value by clicking the "copy" button that shows up in the left-side toolbar of any dataset's summary page.
// Here are a few dataset / keyword suggestions (paste the ID into the column below)
// - \`d0ac5bc3-7401-41f2-9309-9248148ae3e6\`: Canadian Tender Notices
// - [[>Nuclear]]
// - [[>Maple]]
// - \`0aedc589-ecf7-47d7-97a2-e00ffcf51d0b\`: SEC Fails to Deliver 2018
// - [[>Bitcoin]]
// `
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.
