31:T40a,md`#### How does time influence crashes? Logically, the number of victims follow the use of cars. We can see two pikes around 8h and 18h. These are respectively interpreted as the way to and from work. We can also see the lunch break around 12h, when people tend to take their car to go eat their lunch. Two observations can be made about the distribution of victims and their seriousness over the hours of the day: - **Crashes seem to be more likely on the way back from our daily activity than on your way forward**. To say that, we need to consider that the number of people commuting in the morning is about the same as in the evening. - **From 11 p.m. to 6 a.m., if you have an accident, you are more likely to be injured than safe**, whereas it is the opposite during the rest of the day. In addition to that, **33% of accidents occur at night, dawn or dusk**. If we assume that more than two third of cars are driven under daylight, we can say that driving at night still is more dangerous, even if fewer people are driving.`32:Tfeb,function type_seriousness_chart(data, label, context){ let margin = { top: 70, bottom: 70, left: 100, right: 20 } let width = 700 let height = 700 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let type_roads = Array.from(new Set(data.map(function(d){ return d["type_EN"] }))) let l_type_roads = Array.from(new Set(data.map(function(d){ return d["type_EN"] }))) let l_seriousness = Array.from(new Set(data.map(function(d){ return d["seriousness_EN"] }))) let nested_data_stacked = l_seriousness.map(function(d,i){ let dictionary = {"seriousness_EN":d,"values":l_type_roads.map(function(e){ let l = {} for (let j = 0; j g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).ticks(height / 80)) let test_value svg.append("g").selectAll("g") .data(nested_data_stacked) .enter().append("g") .style("fill", function(d, i) { return color(i) }) .selectAll("rect") .data(function(d) { return d["values"] }) .enter().append("rect") .attr("x", function(d, i) { return xScale(d["key"]) }) .attr("y", function(d) { return yScale(d["max"]) }) .attr("height", function(d) { return yScale(d["min"]) - yScale(d["max"]) }) .attr("width", xScale.bandwidth()) if (context.location == "left-seriousness-crashes"){ svg.append("g") .attr("class", "legend-text") .selectAll("text") .data(l_seriousness) .enter() .append("text") .text(d => d) .attr("x", width - 120) .attr("y", (d, i) => 30 * i + 90) svg.append("g") .selectAll("rect") .data(l_seriousness) .enter() .append("rect") .attr("x", width - 140) .attr("y", (d, i) => 30 * i + 80) .attr("width", 10) .attr("height", 10) .attr("fill", (d, i) => color(i)) } svg.append("g") .call(xAxis) .append("text") .attr("class", "axis-label") .attr("transform", `translate(${(width + margin.left - margin.right) / 2}, ${2 * margin.bottom / 3})`) .attr("font-size", 14) .text("Type of roads"); svg.append("g") .call(yAxis) .append("text") .attr("class", "axis-label") .attr("transform", "rotate(-90)") .attr("x", - (height / 2)) .attr("y", - (2 * margin.left / 3)) .attr("font-size", 14) .text(label); svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text(`${label} depending on the type of roads`); return svg.node() } 33:T62e,function pie_chart(vector, title, context) { let margin = { top: 70, bottom: 70, left: 70, right: 70 } let width = 450 let height = 400 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let dataset = vector.map(d => Number(d.proportion)) let colors = ["#F78181","#FF0000","#B40404","#FA5858","#F5A9A9"] let pie = d3.pie() let outerRadius = (width - margin.left - margin.right) / 2; let innerRadius = width / 5 //+ margin.top let arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); let arcs = svg.selectAll("g.arc") .data(pie(dataset)) .enter() .append("g") .attr("class","arc") .attr("transform",`translate(${outerRadius + margin.left}, ${outerRadius + margin.left})`); arcs.append("path") .attr("fill", function(d, i) { return colors[i]; }) .attr("d", arc); arcs.append("text") .attr("class", "legend-text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function(d){ if (d.value > 5){ return Math.round(d.value) + "%" } }) svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(${margin.left / 2}, ${margin.top / 2})`) .text(title); return svg.node(); }34:T4cf,function doughnut_legend(context){ let margin = { top: 70, bottom: 70, left: 70, right: 70 } let width = 225 let height = 200 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let dataset = proportion_accidents_road.map(d => d.type_circulation) let colors = ["#F78181","#FF0000","#B40404","#FA5858","#F5A9A9"] let legend = svg.append("g") legend.append("g") .selectAll("rect") .data(dataset) .enter() .append("rect") .attr('x', 10) .attr('y', (d,i) => 65 + i*25) .attr('width', 30) .attr('height', 10) .style('fill', (d, i) => colors[i]) legend.append("g") .attr("class", "legend-text") .selectAll("text") .data(dataset) .enter() .append("text") .attr("x", 50) .attr("y", (d,i) => 75 + i*25) .text(d => d) svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(0, ${margin.top / 2})`) .text("Types of road"); return legend.node() }35:Tba4,function line_chart(columns, position, title, context){ let margin = { top: 70, bottom: 70, left: 70, right: 70 } let width = 720 let height = 480 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let dataset = numbers_hours_time let l = columns let max_value = 0 let nested_data = l.map(function(d, i){ let vector = dataset.map(function(tuple,i){ if (+tuple[d] > max_value){ max_value = +tuple[d] } return {"value": tuple[d], "time": tuple["hrmn"]} }) return {"key" : d, "values": vector} }) let xScale = d3.scaleLinear() .domain([0, 23]) .range([margin.left, width - margin.right]) let yScale = d3.scaleLinear() .domain([0,max_value]) .range([height - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) let color = d3.scaleOrdinal(d3.schemeCategory10) let line = d3.line() .x(function(d) { return xScale(d.time) }) .y(function(d) { return yScale(d.value) }) svg.append("g") .attr("fill", "none") .attr("stroke-width", 2) .selectAll("path") .data(nested_data) .enter() .append("path") .attr("id", d => d.key) .attr("class", "line") .attr("d", d => line(d.values)) .attr("stroke", (d, i) => color(i)) if (columns.length > 1){ svg.append("g") .selectAll("rect") .data(nested_data) .enter() .append("rect") .attr('x', 100) .attr('y', function(d, i) { return 100 + i * 25 }) .attr('width', 10) .attr('height', 10) .attr('fill', function(d, i) { return color(i) }) svg.append("g") .attr("class", "legend-text") .selectAll("text") .data(nested_data) .enter() .append("text") .attr('x', 120) .attr('y', function(d, i) { return 110 + i * 25 }) .text(d => d.key) } svg.append("g") .call(xAxis) .append("text") .attr("class", "axis-label") .attr("transform", `translate(${(width + margin.left - margin.right) / 2}, ${2 * margin.bottom / 3})`) .text("Number of victims"); svg.append("g") .call(yAxis) .append("text") .attr("class", "axis-label") .attr("transform", "rotate(-90)") .attr("x", - (height / 2)) .attr("y", - (2 * margin.left / 3)) .text("Hours of the day"); svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text(title); return svg.node() }36:T800,function horizontal_bar_chart(dataset, column_labels, column_values, context){ let margin = { top: 70, bottom: 70, left: 140, right: 70 } let width = 900 let height = 600 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let xScale = d3.scaleLinear() .domain([0, d3.max(dataset.map(d => d[column_values]))]) .range([margin.left, width - margin.right]) let yScale = d3.scaleBand() .domain(dataset.map(d => d[column_labels])) .range([margin.top, height - margin.bottom]) .padding(0.3) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); let yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)); let bar_chart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", d => xScale(0)) .attr("y", d => yScale(d[column_labels])) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d[column_values]) - xScale(0)) .attr("fill","steelblue") svg.append("g") .call(xAxis) .append("text") .attr("class", "axis-label") .attr("transform", `translate(${(width + margin.left - margin.right) / 2}, ${2 * margin.bottom / 3})`) .attr("font-size", 14) .text("Number of accidents"); svg.append("g") .call(yAxis) .append("text") .attr("class", "axis-label") .attr("transform", "rotate(-90)") .attr("x", - (height / 2)) .attr("y", - (2 * margin.left / 3)) .attr("font-size", 14) .text("Luminosity conditions"); svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text("Number of accidents depending on the luminosity conditions") return svg.node() }37:T1240,function combination_chart(context){ let margin = { top: 70, bottom: 70, left: 120, right: 70 } let width = 900 let height = 600 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let l_surface = Array.from(new Set(surface_atmosphere_weather.map(function(d){ return d["Surface"] }))) let l_atmosphere = Array.from(new Set(surface_atmosphere_weather.map(function(d){ return d["Atmosphere"] }))) let max_number = d3.max(surface_atmosphere_weather,function(d){ if (d["Surface"] == "Normal" & d["Atmosphere"] == "Normal"){ return 0 } else { return d["Number"] } }) let xScale = d3.scalePoint() .domain(l_surface) .range([margin.left, width - margin.right]) .padding(0.5) let yScale = d3.scalePoint() .domain(l_atmosphere) .range([height - margin.bottom, margin.top]) .padding(0.8) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) let circles = svg.append("g") circles.selectAll("circle") .data(surface_atmosphere_weather) .enter() .append("circle") .attr("cx", function(d,i){ return xScale(d["Surface"]) }) .attr("cy", function(d,i){ return yScale(d["Atmosphere"]) }) .attr("r", 12) .attr("fill", function(d){ if (d["Surface"] == "Normal" & d["Atmosphere"] == "Normal"){ return d3.interpolateReds(0) } else { return d3.interpolateReds(d["Number"]/max_number) } }) let tooltip = svg.append('g') .attr("class", "tooltip") circles.selectAll("circle") .data(surface_atmosphere_weather) .on("mouseover", function(d){ tooltip.style("visibility", "visible") .attr("transform", `translate(${xScale(d["Surface"])},${yScale(d["Atmosphere"])})`) let background = tooltip.append("rect") .attr("class", "tooltip-background") let label = tooltip.append("text") .attr("class", "tooltip-text") label.text(d["Surface"] + " | " + d["Atmosphere"] + ": " + d["Number"] + " accidents") let label_context = label.node().getBBox() let background_offset = {"x": 10, "y": -40} let background_context = { "x": background_offset.x, "y": background_offset.y, "width": label_context.width + 15, "height": label_context.height + 15, } let max_right = xScale(d["Surface"]) + background_context.x + background_context.width if (max_right > svg.node().getBBox().width){ background_context.x = -background_context.x - background_context.width console.log(0) } else { console.log(1) console.log(max_right) console.log(svg.node().getBBox().width) } background.attr("x", background_context.x) .attr("y", background_context.y) .attr("width", background_context.width) .attr("height", background_context.height) label.attr("x", background_context.x + background_context.width/2) .attr("y", background_context.y + background_context.height/2 + 2) d3.select(this) .style("stroke", "red") .style("stroke-width", "2") }) .on('mouseout', function() { d3.select(this) .style("stroke", "red") .style("stroke-width", "0") tooltip.selectAll("rect") .remove() tooltip.selectAll("text") .remove() tooltip.style("visibility", "hidden"); }); svg.append("g") .call(xAxis) .append("text") .attr("class", "axis-label") .attr("transform", `translate(${(width + margin.left - margin.right) / 2}, ${2 * margin.bottom / 3})`) .text("Road surface"); svg.append("g") .call(yAxis) .append("text") .attr("class", "axis-label") .attr("transform", "rotate(-90)") .attr("x", - (height / 2)) .attr("y", - (2 * margin.left / 3)) .text("Weather conditions"); svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text("Accidents depending of weather conditions and state of the road") return svg.node() }38:T6c5,function color_range_legend(title, context){ let margin = { top: 70, bottom: 70, left: 0, right: 70 } let width = 160 let height = 600 d3.select(`#${context.location}`) .select("svg") .remove() d3.select(`#${context.container}`) .style("overflow", "auto") const svg = d3.select(`#${context.location}`) .append("svg") .attr("viewBox", [0, 0, width, height]) let max_value = d3.max(surface_atmosphere_weather,function(d){ if (d["Surface"] == "Normal" & d["Atmosphere"] == "Normal"){ return 0 } else { return d["Number"] } }) let discretization = 400 let range_extent = [max_value, 0] let range_width = 30 let range_height = 400 let range_values = d3.range(0,discretization,1) svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .selectAll("rect") .data(range_values) .enter() .append("rect") .attr("x", 0) .attr("y", d => d) .attr("width", range_width) .attr("height",2) .attr("fill", d => d3.interpolateReds(1 - d/discretization)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .selectAll("text") .data(range_extent) .enter() .append("text") .attr("x", range_width + 5) .attr("y", (d,i) => margin.top + i*discretization + 5) .attr("font-family","sans-serif") .text(d => d); svg.append("g") .append("text") .attr("class","chart-title") .attr("fill", "black") .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text(title) .attr("font-weight", "1em") .attr("font-size", 18) .attr("font-family","sans-serif"); return svg.node() }39:[] 2f:{"title":"Road Accidents in France, 2017","cells":[{"id":0,"value":"md`# Road Accidents in France, 2017\n*Data used in this notebook is from [data.gouv.fr](https://www.data.gouv.fr/fr/datasets/base-de-donnees-accidents-corporels-de-la-circulation/#_) by the French Ministry of Homeland Security.*\n*Data processing in Python is avaible on my Github repo [https://github.com/guillaume-lesaine](https://github.com/guillaume-lesaine/vis-road_accidents_france_2017).*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2570,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`60701 Road accidents occured in France in 2017. 136021 Persons have been directly affected. We would like to describe how crashes are influenced by external factors such as roads, time and, weather. We thus consider a crash to be a function of the road, time and, weather.\n\n${tex.block`\\begin{aligned}\ncrash &= f(road,moment,weather) \\\\\n\\end{aligned}`}\n\nWe recognize that \"internal\" parameters such as the type of the car and especially human behaviors are parameters worth studying. Still, we believe that there are insights in studying crashes from their external factors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Crashes & Roads`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`First, we would like to know how the road influences the crash. A road is caracterized by its type as well as its circulation regime. The first aspect we want to visualize is how victims and seriousness are distributed over seven **types of roads**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2682,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"md`The second aspect we want to visualize is how the seriousness of an accident can vary depending on the **circulation regime**. The circulation regime can in some cases be correlated with the type of the road. The right chart only takes into account the victims being killed or hospitalized.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3300,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"md`#### How do roads influence crashes?\n\nThe first thing we need to say is that none of the charts above can tell you whether it is riskier to drive on a freeway or a one-way road. Indeed, to do that we would need a dataset giving the number of drivers per types of roads and circulation regime.\n\nYet we believe that the following points are worth mentionning :\n- **36%** of crashes occuring on a secondary road are followed by death or hospitalization. This is more than twice the ratio of a freeway.\n- **79%** of crashes occur on a secondary road or a way, which are the everyday roads for most people.\n- **73%** of serious victims (hosplitalized or killed) of a car crash were driving on a two-way road.\n\nWe could imagine explanations for the previous points. One could be that, a two-way road without separation regime creates the possiblility of taking over by crossing the opposing way. If executed on a secondary road and failed, the speed (around 80km/h) can lead to serious consequences.`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"md`## Crashes & Time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md`Second, we would like to know how time influences crashes. Here, we consider time as being an hour of the day, but also, a moment of luminosity conditions. We first visualize the number of victims of car crashes depending on the **hours of the day**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3222,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"md`Second, we would like to know whether the number of accidents depends on the time of the day and more precisely, its **luminosity conditions**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`## Crashes & Weather`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2647,"value":"md`Third we want to visualize the effect of the weather on road accidents. We consider that the weather can be described by the **weather conditions and the state of surface of the road**. In the chart below, the data for normal weather and normal state of the road has been removed from color scale as it is much greater than any other being over 45000.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2652,"value":"md`#### How does weather influence crashes?\n\nIn order to conclude here, we need to bear in mind a fact. The combination of \"normal\" weather conditions and \"normal\" state of surface of the road, is by far the one during which most accidents occur. Indeed, it represents almost 75% of accidents. \n\nHowever it is interesting to notice that the combination of light rain and a wet road is especially dangerous. We can indeed imagine that most people underestimate the danger by seeing little rain but forgeting that the road is wet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`### Crashes & Roads - Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"md`Imports for the study of the impact of the road.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"seriousness_type_road = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/b3f3a6b2bd1b2aae748b484fb41ef5d1/raw/e0dab5b1477b85c5af5fc680ceb06495cbaf0c20/seriousness_type_road.csv\",function(data){\n data[\"Accidents\"] = +data[\"Accidents\"]\n return data\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2497,"value":"seriousness_type_road_ratio = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/ee3f511e2faf7992c03b4894d2723872/raw/31bb6b23efd4fc3d3e1c2ad2db273e2bc0ee53a1/seriousness_type_road_ratio.csv\",function(data){\n data[\"Accidents\"] = +data[\"Accidents\"]\n return data\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"proportion_serious_accidents_road = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/9aa43cf2b52bc542150602c1d28dc6fd/raw/2f597a7f44672cca71bba18cb88ca966bcbbf20e/proportion-serious-accidents_road.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"proportion_accidents_road = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/dc0e3677ddbff9ab3ea72f7a8cdf4b22/raw/326e966b5bc31380de08702bce3992bdcbda8776/proportion-accidents_road.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"md`Code for the **stacked bar chart** representing the distribution of seriousness of the types of roads.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2687,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2691,"value":"type_seriousness_chart(seriousness_type_road, \"Number of victims\", {\"container\":\"container-seriousness-crashes\", \"location\":\"left-seriousness-crashes\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2709,"value":"type_seriousness_chart(seriousness_type_road_ratio, \"Ratio of victims\", {\"container\":\"container-seriousness-crashes\", \"location\":\"right-seriousness-crashes\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"md`Code for dual **doughnut charts** for the repartition of seriousness over types of circulation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"pie_chart(proportion_accidents_road, \"Victims distribution over types of circulation\", {\"container\": \"container-doughnut\", \"location\": \"left-doughnut\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"pie_chart(proportion_serious_accidents_road, \"Serious victims distribution over types of circulation\", {\"container\": \"container-doughnut\", \"location\": \"right-doughnut\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3378,"value":"doughnut_legend({\"container\": \"container-doughnut\", \"location\": \"legend-doughnut\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"md`### Crashes & Time - Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"md`Imports for the study of the impact of time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"numbers_hours_time = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/0cd9d754a43e5917800e5b5df26190f9/raw/dde7a9ce5473d5d3de295f98862b53cf619e24b3/numbers-hours_time.csv\", function(data){\n for (var key in data) {\n data[key] = +data[key]\n }\n return data \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"numbers_lumninosity_time = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/e64c4d71697d376b22480e38caa685fe/raw/545b138324e34fcbdf4b9c19089c138b0d9c55f3/numbers_lumninosity_time.csv\", function(data){\n data[\"Accidents\"] = +data[\"Accidents\"]\n return data \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"md`Code for the **single and multi line charts** for accidents depending on the time of the day.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"line_chart([\"Accidents\"],\"line_left\", \"Distribution of crashes over the hours of the day\", {\"container\": \"container-line-chart\",\"location\": \"left-line-chart\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"line_chart([\"Unharmed\",\"Slightly injured\",\"Hospitalized\",\"Killed\"], \"multiline_right\", \"Distribution of types of victims over the hours of the day\", {\"container\": \"container-line-chart\",\"location\": \"right-line-chart\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1532,"value":"horizontal_bar_chart(numbers_lumninosity_time, [\"Light\"], \"Accidents\", {\"container\": \"container-luminosity\", \"location\": \"luminosity\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"md`### Crashes & Weather - Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"md`Imports for the study of the impact of weather.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"surface_atmosphere_weather = d3.csv(\"https://gist.githubusercontent.com/guillaume-lesaine/7daee1a4a0967e0e2b054760883a1cdb/raw/0ca069faf3c4bfcef414cea9b6a8c8e8d00dabe1/surface_atmosphere_weather.csv\", function(data){\n data[\"Number\"] = +data[\"Number\"]\n return data \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"md`Code for the visualisation of the combinations of weather conditions and states of the road and their effect on the number of crash.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"combination_chart({\"container\": \"container-weather\", \"location\": \"left-weather\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2274,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2908,"value":"color_range_legend(\"Accidents number\", {\"container\": \"container-weather\", \"location\": \"right-weather\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"md`## Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"styles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}