Public
Edited
Jan 19, 2024
import { aq, op } from '@uwdata/arquero'
embed = require("vega-embed@5")
vegalite = require("@observablehq/vega-lite@0.1")
viewof accidents_de_voiture_chicago = aq // viewof shows the table view, but assigns the table value
.fromCSV(await FileAttachment('car_crashes_chicago@7.csv').text())
.view({ height: 240 })
accidents_de_voiture_chicago.objects()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 500,
height: 500,
data: {url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json",
format: {type: "topojson", feature: "chicago_sides"} // on doit indiquer quels objets on va dessiner
},
projection: {type :"mercator" },
mark: {
type: "geoshape"
}
})
// We are going to add column with 1 in it to ease our calculations
accidents = accidents_de_voiture_chicago.derive({ count: d => 1 })
accidents.view()
// Now let's try and see what is the percentage of accidents in each of the chicago boroughs
accidents_boroughs = accidents.groupby('Side').rollup({accidents: d => op.sum(d.count)})
accidents_boroughs.view()
accidents_by_hour.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 1000,
height: 500,
data: {values: accidents_by_hour.objects()},
mark: "line",
encoding: {
x: {field: "heure", type: "quantitative"},
y: {field: "accidents_by_hour", type: "quantitative"},
color: {field: "Side", type: "nominal"}
}
})
accidents_by_hour_and_run = accidents.filter(d => d.hit_and_run === 'Y').groupby('heure').rollup({total_run: d => op.sum(d.count)})
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 1000,
height: 500,
layer: [
{
data: { values: accidents_by_hour.objects() },
mark: "line",
encoding: {
x: { field: "heure", type: "quantitative" },
y: { field: "accidents_by_hour", type: "quantitative" },
color: { field: "Side", type: "nominal" }
}
},
{
data: { values: accidents_by_hour_and_run.objects() },
mark: "bar",
encoding: {
x: { field: "heure", type: "quantitative" },
y: { field: "total_run", type: "quantitative" },
color: { value:'lightblue' } // Assuming "newColumn" is the name of the column with the value 1
}
}
]
});
// Now that we have seen that there is a simliar trend in each of the sides of Chicago, we could create a chrolopleth map of our sides with respect to the percentage of accidents to get spatial insights.
total_trips = accidents.rollup({ total: d => op.sum(d.count) }).objects()[0]
accidents_by_side = accidents_by_hour.groupby('Side','ID_side').rollup({percentage: d => op.sum(d.accidents_by_hour)/29999*100})
accidents_by_side.view()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 500,
height: 500,
data: {url: "https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json",
format: {type: "topojson", feature: "chicago_sides"} // on doit indiquer quels objets on va dessiner
},
transform: [{
lookup: "id", //lookup is the key in the origin table, in this case the topojson
from: {
data: {
values: accidents_by_side.objects() // the table where we will look for the data
},
key: "ID_side", // the key in the secondary table
fields: ["percentage","Side"] // the fields we will keep
},
default:'0' // the default value if there is no match. Even if we want a number, we have to write it as text between ''
}],
projection: {type :"mercator" },
mark: "geoshape",
encoding: {
color: {
field: "percentage",
type: "quantitative"
}
}
})
accidents_daily = accidents.groupby('Side','ID_side','jour').rollup({accidents_by_day: d => op.sum(d.count)})
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
data: {
values: accidents_daily.objects()},
"width": 1000,
"height": 500,
"mark": "area",
"encoding": {
x: { field: "jour", type: "ordinal" },
y: { field: "accidents_by_day", type: "quantitative" },
color: { field: "Side", type: "nominal" }
}})
accidents_daily.view()
accidents_by_day = accidents.groupby('heure', 'Side','ID_side', 'jour').rollup({accidents_by_day: d => op.sum(d.count)})
accidents_month_weather= accidents.groupby('Mois', 'conditions_atmospheriques').rollup({accidents_month_weather: d => op.sum(d.count)})
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": accidents_month_weather
},
"width": 600,
"height": 400,
"mark": {
"type": "circle",
"opacity": 0.5,
"stroke": "black",
"strokeWidth": 1
},
"encoding": {
"x": {
"field": "Mois",
"type": "nominal",
"axis": {"grid": false}
},
"y": {"field": "conditions_atmospheriques", "type": "nominal", "axis": {"title": ""}},
"size": {
"field": "accidents_month_weather",
"type": "quantitative",
"title": "Monthly accidents in Chicago",
"legend": {"clipHeight": 30},
"scale": {"rangeMax": 5000}
},
"color": {"field": "conditions_atmospheriques", "type": "nominal", "legend": null}
}
})
accidents_weather= accidents.groupby('conditions_atmospheriques').rollup({accidents_month_weather: d => op.sum(d.count)})
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple radial chart with embedded data.",
"data": {
"values": accidents_weather
},
"layer": [{
"mark": {"type": "arc", "innerRadius": 25, "stroke": "#fff"}
},
],
"encoding": {
"theta": {"field": "accidents_month_weather", "type": "quantitative", "stack": true},
"radius": {"field": "accidents_month_weather", "scale": {"type": "sqrt", "zero": true, "rangeMin": 20}},
"color": {"field": "conditions_atmospheriques", "type": "nominal", "legend": {"clipHeight": 10}}
}
})
perMonth = accidents.groupby('Mois').rollup({ total: d => op.sum(d.count)}).view()
month_weather = accidents.groupby('Mois','conditions_atmospheriques').rollup({ total: d => op.sum(d.count)})
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": month_weather
},
width: 200,
height: 400,
"mark": "bar",
"encoding": {
"x": {
"field": "Mois",
"type": "nominal"},
"y": {
"field": "total", "type": "quantitative",
},
"color": {
"field": "conditions_atmospheriques",
"type": "nominal",
// "scale": {
// "domain": ["sun", "fog", "drizzle", "rain", "snow"],
// "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
"title": "Weather type"
}
}
})
embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: 1000,
height: 500,
data: {
values: accidentsPerday.objects()
},
mark: {type: "point", filled: true},
encoding: {
x: {field: "Date", type: "temporal"},
y: {field: "accidents_by_date", type: "quantitative"},
color: {field: "conditions_atmospheriques", type: "nominal"}
}
})
accidentsPerday = accidents.groupby("Date", "conditions_atmospheriques").rollup({accidents_by_date: d => op.sum(d.count)})
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.
