2b:null 2c:["$","title",null,{"children":"Visualization of car accidents in Chicago | Nikola Vracevic's Workspace | Observable"}] 31:T40f,**Objective**: From this dataset, extract an analysis problem, and propose one or more visualizations to answer it and communicate the result of your analysis to an end user. **Expected:** - Justify your choices regarding the tool, the chosen visualization approach, the chosen visual variables, and the different graphic parameters chosen, depending on the nature of the data and the objective of your visualization. - Suggest an interaction technique that could be used and its purpose. Justify your choice. - Provide a narrative to guide the user through your visualizations - For each question, present different screenshots of your visualization(s) along with explanations, showing how a potential user of your visualization might use them to support her thinking process to answer the question asked. **Output:** Integrate your codes, visualizations and screenshots into a notebook. If you use visualizations under kepler or qgis2threejs, integrate screenshots or gifs into the notebook, or transmit html codes or QGIS projects. 32:T581,## Accidents by hour Next line chart shows hourly variation of number of accidents in each of the chicago boroughs. We can observe that all boroughs follow similar pattern of having less accidents during the night, and having a peak during the rush hour. We can assume that the reason for this lies in the number of cars using the motorway in the corresponding hours of the day. Furthermore, we can observe that the numebr of accidents has its peak at either 15:00 or 16:00 which we can explain by the locaiton of the boroughs, as some boroughs tend to have their rush hour slightely after the rush hour in the borough next to it. We can observe that by looking at the map of the boroughs. Finally, there is another line chart with the number of accidents in each borough plus bar chart showing the number of cars which "hit and run". Here we can see interesting thing that although the absolute number of accidents is dropping down from 22:00 to 23:00, number of people who run away from the collision site is increasing. We could assume that it has to do with people going out and getting intoxicated, thus avoiding the confrontation with the police. Finally, the map shows ratio of incidents among boroughs of Chicago. As explained later, this map shows how the peak of the accidents in one borough at 15, translates to be the peak of the accidents in another, as rush hour moves spatially as well.33:T517,## Weather and accidents The plot below shows the count of accidents based on athmosferic condition in We can observe that the weather conditions have seasonality. For example, there is considerably lower amount of accidents on a snowy weather in March compared to February and January. Nevertheless, one could assume that the number of accidents is higher during winter months as of snow and other bad weather conditions, but it could be just that the number of snow days is higher thus number of accidents on a snowy weather, but the total number of accidents stayed the same. The issue is that we do not have other variables to get to a conclusion about the weather, such as total number of trips, or another dataset that gives average weather over all of borougs. This would make this analysis uniform, as the current dataset, for the accidents in the close proximity and time difference measured in minutes, give totally different weather conditions. This issue has been tackled further by creating more graphs, but still we cannot be sure based on these visualisations, that the bad weather has a huge effect on the number of accidents. Finally, last plot shows that the highest number of accidents on a clear weather day is during March and April, i.e. monoths with "safer" weather conditions.34:[{"id":"3d5084b80f592382090431623abfbaa462413870b3a869562d6851ad5e3fb772ce2aa93623384527709d9348fc13aa4a1d3554a8d7b1fd62c9a0ace0acc3edf1","href":"https://static.observableusercontent.com/files/3d5084b80f592382090431623abfbaa462413870b3a869562d6851ad5e3fb772ce2aa93623384527709d9348fc13aa4a1d3554a8d7b1fd62c9a0ace0acc3edf1","name":"car_crashes_chicago@7.csv","type":"text/csv","lastModified":1705652486272.241,"size":4901623}] 2f:{"id":"ba6161c17b58982c","slug":null,"title":"Visualization of car accidents in Chicago","thumbnail":"ecfa68aeb9522f3a3f617a83f2e901ddc960506aed5bb6442075c0b9b3eadbf9","access_level":"public","create_time":"$D2024-01-19T08:21:26.272Z","update_time":"$D2024-01-19T15:54:47.385Z","view_time":null,"first_public_time":"$D2024-01-19T08:21:26.272Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"19ff4b04d177f982","login":"nikola-vracevic-ws","name":"Nikola Vracevic's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f51f7125e584e89e86dad8ae54219588b50ca6f392ab35daf44bbead1266e12f","tier":"starter_2024"},"version":684,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"49bd36333f2be5dc","login":"nikola-vracevic","name":"Nikola Vracevic","avatar_url":"https://avatars-next.observableusercontent.com/17f2ab05445c2ccb7a2eaecd83d0682bbff0cfcb13e253e090fd3cd23a215968","tier":null}],"members":[{"type":"individual","id":"49bd36333f2be5dc","login":"nikola-vracevic","name":"Nikola Vracevic","avatar_url":"https://avatars-next.observableusercontent.com/17f2ab05445c2ccb7a2eaecd83d0682bbff0cfcb13e253e090fd3cd23a215968","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualization of car accidents in Chicago","cells":[{"id":0,"value":"html`

Visualization of car accidents in Chicago

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"embed = require(\"vega-embed@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`

During this exercise, you will visualize car accident data from the Chicago Data Portal.

Each row of this table represents an accident that occurred in the city of Chicago, USA, between January 3, 2021 and May 5, 2021.

For each accident, you have:\n

information about its location: geographical coordinates, arrondissement/side
information about its time of appearance: date and time, month...
additional information about the accident: visibility conditions, did the driver flee (hit and run)...etc

`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof accidents_de_voiture_chicago = aq // viewof shows the table view, but assigns the table value\n .fromCSV(await FileAttachment('car_crashes_chicago@7.csv').text())\n .view({ height: 240 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"accidents_de_voiture_chicago.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"html`

The following code allows you to display the different boroughs of Chicago and can be used as a background map. The use of this map is not mandatory.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n width: 500,\n height: 500,\n data: {url: \"https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json\",\n format: {type: \"topojson\", feature: \"chicago_sides\"} // on doit indiquer quels objets on va dessiner\n },\n projection: {type :\"mercator\" },\n mark: {\n type: \"geoshape\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"## Chicago car accidents\n\nDataset contains car accidents in Chicago. With temporal, nominal, and ordinal attributes.\n\nThere is one column that represents date and time. From that column, other attributes were derived, such as day of the week, hour of the day and month. \n\nNominal/categorical data in our dataset are atmospheric conditions, visbility conditions (as a part of the day), as well as one variable representing whether the accident participant flew away. \n\nOn top of that, there is a speed of the driver, I would assume. \n\nSome of the variables have empty (hit_and_run) or unknown values (atmospheric and visibility conditions). \n\nThe goal of this notebook is to find a relationship between car accidents and all other variables.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"// We are going to add column with 1 in it to ease our calculations\naccidents = accidents_de_voiture_chicago.derive({ count: d => 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"accidents.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"## Temporal aspect\n\nAs our data has high temporal dependance, we can assume that differentiation of accidents is high based on the day of the week and hour. We can as well assume that it is not highly valuable to visualize our data based on season nor based on months, as our dataset is not big enough to capture these trends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"// Now let's try and see what is the percentage of accidents in each of the chicago boroughs\naccidents_boroughs = accidents.groupby('Side').rollup({accidents: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"accidents_boroughs.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"accidents_by_hour = accidents.groupby('heure', 'Side','ID_side').rollup({accidents_by_hour: d => op.sum(d.count)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"accidents_by_hour.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n width: 1000,\n height: 500,\n data: {values: accidents_by_hour.objects()},\n mark: \"line\",\n encoding: {\n x: {field: \"heure\", type: \"quantitative\"},\n y: {field: \"accidents_by_hour\", type: \"quantitative\"},\n color: {field: \"Side\", type: \"nominal\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"accidents_by_hour_and_run = accidents.filter(d => d.hit_and_run === 'Y').groupby('heure').rollup({total_run: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n width: 1000,\n height: 500,\n layer: [\n {\n data: { values: accidents_by_hour.objects() },\n mark: \"line\",\n encoding: {\n x: { field: \"heure\", type: \"quantitative\" },\n y: { field: \"accidents_by_hour\", type: \"quantitative\" },\n color: { field: \"Side\", type: \"nominal\" }\n }\n },\n {\n data: { values: accidents_by_hour_and_run.objects() },\n mark: \"bar\",\n encoding: {\n x: { field: \"heure\", type: \"quantitative\" },\n y: { field: \"total_run\", type: \"quantitative\" },\n color: { value:'lightblue' } // Assuming \"newColumn\" is the name of the column with the value 1\n }\n }\n ]\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"// 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. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"total_trips = accidents.rollup({ total: d => op.sum(d.count) }).objects()[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"accidents_by_side = accidents_by_hour.groupby('Side','ID_side').rollup({percentage: d => op.sum(d.accidents_by_hour)/29999*100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"accidents_by_side.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v5.json\",\n width: 500,\n height: 500,\n data: {url: \"https://mjlobo.github.io/teaching/mde/data/chicagosideswithid.json\",\n format: {type: \"topojson\", feature: \"chicago_sides\"} // on doit indiquer quels objets on va dessiner\n },\n \n transform: [{\n lookup: \"id\", //lookup is the key in the origin table, in this case the topojson\n from: {\n data: {\n values: accidents_by_side.objects() // the table where we will look for the data\n },\n key: \"ID_side\", // the key in the secondary table\n fields: [\"percentage\",\"Side\"] // the fields we will keep\n },\n default:'0' // the default value if there is no match. Even if we want a number, we have to write it as text between ''\n }],\n projection: {type :\"mercator\" },\n mark: \"geoshape\",\n \n encoding: {\n color: {\n field: \"percentage\",\n type: \"quantitative\"\n }\n }\n})\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"## Accidents by day of the week\n\nThe plot below shows accidents by day of the week. We can observe that monday has the lowest number of accidents. Then, there is a high incrase on tuesday. Moreover, weekend has the highest number of accidents, and a really high increase compared to the average number of accidents during the weekdays. This is generally explained by the fact that weekends often disrupt drivers' routines, leading to a higher likelihood of reckless driving behaviors.\n\nAlso, plot shows that excluding the west side, there is a trend explained in the previous paragraph in all of the boroughs. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"accidents_daily = accidents.groupby('Side','ID_side','jour').rollup({accidents_by_day: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"embed({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n data: {\n values: accidents_daily.objects()},\n \"width\": 1000, \n \"height\": 500,\n \"mark\": \"area\",\n \"encoding\": {\n x: { field: \"jour\", type: \"ordinal\" },\n y: { field: \"accidents_by_day\", type: \"quantitative\" },\n color: { field: \"Side\", type: \"nominal\" }\n\n}})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"accidents_daily.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"accidents_by_day = accidents.groupby('heure', 'Side','ID_side', 'jour').rollup({accidents_by_day: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"accidents_month_weather= accidents.groupby('Mois', 'conditions_atmospheriques').rollup({accidents_month_weather: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"embed({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"data\": {\n \"values\": accidents_month_weather\n },\n \"width\": 600,\n \"height\": 400,\n \"mark\": {\n \"type\": \"circle\",\n \"opacity\": 0.5,\n \"stroke\": \"black\",\n \"strokeWidth\": 1\n },\n \"encoding\": {\n \"x\": {\n \"field\": \"Mois\",\n \"type\": \"nominal\",\n \"axis\": {\"grid\": false}\n },\n \"y\": {\"field\": \"conditions_atmospheriques\", \"type\": \"nominal\", \"axis\": {\"title\": \"\"}},\n \"size\": {\n \"field\": \"accidents_month_weather\",\n \"type\": \"quantitative\",\n \"title\": \"Monthly accidents in Chicago\",\n \"legend\": {\"clipHeight\": 30},\n \"scale\": {\"rangeMax\": 5000}\n },\n \"color\": {\"field\": \"conditions_atmospheriques\", \"type\": \"nominal\", \"legend\": null}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"accidents_weather= accidents.groupby('conditions_atmospheriques').rollup({accidents_month_weather: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"embed({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"description\": \"A simple radial chart with embedded data.\",\n \"data\": {\n \"values\": accidents_weather\n },\n \"layer\": [{\n \"mark\": {\"type\": \"arc\", \"innerRadius\": 25, \"stroke\": \"#fff\"}\n },\n ],\n \"encoding\": {\n \"theta\": {\"field\": \"accidents_month_weather\", \"type\": \"quantitative\", \"stack\": true},\n \"radius\": {\"field\": \"accidents_month_weather\", \"scale\": {\"type\": \"sqrt\", \"zero\": true, \"rangeMin\": 20}},\n \"color\": {\"field\": \"conditions_atmospheriques\", \"type\": \"nominal\", \"legend\": {\"clipHeight\": 10}}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"perMonth = accidents.groupby('Mois').rollup({ total: d => op.sum(d.count)}).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"month_weather = accidents.groupby('Mois','conditions_atmospheriques').rollup({ total: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"embed({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n \"data\": {\n \"values\": month_weather\n },\n \twidth: 200,\n\theight: 400,\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\n \"field\": \"Mois\",\n \"type\": \"nominal\"},\n \"y\": {\n \"field\": \"total\", \"type\": \"quantitative\",\n },\n \"color\": {\n \"field\": \"conditions_atmospheriques\",\n \"type\": \"nominal\",\n // \"scale\": {\n // \"domain\": [\"sun\", \"fog\", \"drizzle\", \"rain\", \"snow\"],\n // \"range\": [\"#e7ba52\", \"#c7c7c7\", \"#aec7e8\", \"#1f77b4\", \"#9467bd\"]\n\n \"title\": \"Weather type\"\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"embed({\n\t$schema: 'https://vega.github.io/schema/vega-lite/v5.json',\n\twidth: 1000,\n\theight: 500,\n\tdata: {\n\t values: accidentsPerday.objects()\n\t},\n\tmark: {type: \"point\", filled: true},\n\tencoding: {\n\t\tx: {field: \"Date\", type: \"temporal\"},\n\t\ty: {field: \"accidents_by_date\", type: \"quantitative\"},\n\t\tcolor: {field: \"conditions_atmospheriques\", type: \"nominal\"}\n\t}\n\t})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"accidentsPerday = accidents.groupby(\"Date\", \"conditions_atmospheriques\").rollup({accidents_by_date: d => op.sum(d.count)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"