31:T430,md`

🚦Torino Traffic🚦

A data visualization representing the amount of traffic flow in different
days and hours, as recorded by a number of detectors scattered in Torino, Italy.

Data processing

The database UTD19 is processed in a jupyter notebook
and a new database is created, grouping for each {detector, hour of the day, day of the week}
and averaging the values.

[Write me for suggestions/comments! https://www.linkedin.com/in/gabrielelabanca/]

`32:T757,viewof in_values = inputsGroup([ [ radio({ title: 'Week part', description: '', options: [ { label: 'Working week', value: true }, { label: 'Weekend', value: false } ] //value: true }) ], [ rangeSlider({ min: 0, max: 24, step: 1, // Note that values must be specified as array of length 2. value: this ? this.value : [12, 14], // Custom slider CSS, replaces all styles. // Overrides the range color. Support for range colors is up to the theme. color: 'green', format: '', separator: '-', title: 'Hours interval', description: '' }) ] ]) /*{ const button = html`

` button.onclick = function(event) { let evid = event.target.id; let is_btn_pressed = Array.from(event.target.classList).includes('btn-dark'); if(!is_btn_pressed) { if (evid == 'wdbut') { document.getElementById('webut').classList.remove('btn-dark'); document.getElementById('webut').classList.add('btn-light'); document.getElementById('wdbut').classList.remove('btn-light'); document.getElementById('wdbut').classList.add('btn-dark'); } else if (evid == 'webut'){ document.getElementById('wdbut').classList.remove('btn-dark'); document.getElementById('wdbut').classList.add('btn-light'); document.getElementById('webut').classList.remove('btn-light'); document.getElementById('webut').classList.add('btn-dark'); } } mutable is_business_day = evid === 'wdbut' ? true : false //mutable txt = `try clicking again for the ${mutable } time over` } return button }*/33:Ta44,map2 = { const svg = d3 .select(DOM.svg(width, height_cities_map)) .style("width", width) .attr('class', 'map_cities') .style("height", height); const water = svg .selectAll(".tile") .data(tiles_all) .enter() .append("path") .style("fill", water_color) .style("fill-opacity", .35) .attr("d", d => { return path_all(d.data.water); }) .style("stroke-width", 1) .style("stroke-opacity", .5); const earth = svg .selectAll(".tile") .data(tiles_all) .enter() .append("path") .style("fill", "white") .style("fill-opacity", 1) .attr("d", d => { return path_all(d.data.earth); }); /* const borders = svg .selectAll(".tile") .data(tiles_all) .enter() .append("path") .style("fill", 'white') .style("fill-opacity", 0) //.style('path', streets_color) .attr("d", d => { return path_all( d.data.boundaries.filter(d.data.water, d => !d.properties.boundary) ); }); */ let cities = svg.append('g'); const tooltip = svg.append("g").style('opacity', 0); tooltip .append('rect') .attr('x', -5) .attr('y', -15) .attr('width', 100) .attr('height', 20) .style('opacity', 0.7) .attr('fill', 'white'); tooltip.append('text'); const showTooltip = function(d) { let dat = d.explicitOriginalTarget.__data__; let city_name = dat.city.charAt(0).toUpperCase() + dat.city.slice(1); tooltip.transition().duration(100); tooltip .style("opacity", 1) .attr("transform", `translate (${dat.xmap + 10}, ${dat.ymap + 10})`); let label = "City: " + city_name; d3.select(this) .attr('stroke-opacity', 1) .attr('stroke', 'blue'); tooltip.select('text').text(label); tooltip.select('rect').attr('width', label.length * 8); }; const moveTooltip = function(d) { let dat = d.explicitOriginalTarget.__data__; tooltip; }; const hideTooltip = function(d) { let dat = d.explicitOriginalTarget.__data__; tooltip .transition() .duration(200) .style("opacity", 0); d3.select(this) .attr('stroke-opacity', 0.5) .attr('stroke', red_traffic); }; cities .selectAll('circle') .data(db_cities, d => d.detid) .join('circle') .attr('cx', d => d.xmap) .attr('cy', d => d.ymap) .attr('r', 3) .attr('fill', 'none') .attr('stroke', red_traffic) .attr('stroke-width', 3) .attr('stroke-opacity', 0.5) .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip); return svg.node(); }34:[{"id":"d7aafe30266b144bab2bd26e396f151b20b97534c1c6404571f7093bc9db882f31eac75a1f5849cc173e7aef93b33b288460835171b2df6830f5bc7637977cab","href":"https://static.observableusercontent.com/files/d7aafe30266b144bab2bd26e396f151b20b97534c1c6404571f7093bc9db882f31eac75a1f5849cc173e7aef93b33b288460835171b2df6830f5bc7637977cab","name":"df_to_mean@2.csv","type":"text/csv","lastModified":1602522213768.63,"size":14020031},{"id":"146d57a0773f3d97d429b5bf36eec016562c2484356cbc6d56bd3c3b7f4b2b41b6abbe744ddae3706372b8dedcd5ce8bdd01e4c44395d50e5c5900bd178db99b","href":"https://static.observableusercontent.com/files/146d57a0773f3d97d429b5bf36eec016562c2484356cbc6d56bd3c3b7f4b2b41b6abbe744ddae3706372b8dedcd5ce8bdd01e4c44395d50e5c5900bd178db99b","name":"cities@1.csv","type":"text/csv","lastModified":1602756240640.517,"size":4452}] 2f:{"title":"🚦Torino Traffic🚦","cells":[{"id":492,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`\n

\nSelect working/resting days and hour of the day with the controls below to start visualizing.\n

\n\n
\n\nSome suggestions:\n- see how 6:00am is a rush hour in the working days;\n- see how midnight is more busy in the weekends.\n\n

\nIf you have a bigger screen than mine, you can increase the height and zooming of the map changing the variables below.

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"// https://observablehq.com/@d3/vector-tiles\nmap = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"zoom = 19.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"md`A more quantitative view of the flow of traffic [number of vehicles per hour per lane] depending on the day and hour.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof stackedBar = vl\n .markLine()\n .data(db_average_flow)\n .encode(\n vl\n .x()\n .fieldO(\"hour\")\n .axis({ grid: true }),\n vl.y().fieldQ(\"flow\"),\n vl\n .color()\n .fieldN(\"weekday\")\n .sort(weekdays) // .scale({ range: weatherColors })\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"md`All the cities in the database:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"// https://observablehq.com/@d3/vector-tiles\nmap_all = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"height_cities_map = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"zoom_cities = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`## Code 🛠️`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"// average of positions of detectors; To_center cannot be dinamically defined as this, since it would generate a circular definition\n[\n d3.mean(\n d3.rollups(db_to, v => d3.mean(v, d => d.long), d => d.detid).map(d => d[1])\n ),\n d3.mean(\n d3.rollups(db_to, v => d3.mean(v, d => d.lat), d => d.detid).map(d => d[1])\n )\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"// The center of Torino\nTo_center = [7.667836578696744, 45.06376129699251]","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"is_business_day = in_values[0][0] == \"true\" ? true : false","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"hour1 = in_values[1][0][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"hour2 = in_values[1][0][1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"md`**databases**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"// draw detectors\n// https://observablehq.com/@gabrielelabanca/understanding-joins\nd3\n .select('svg.map_detect')\n .selectAll('circle')\n .data(db_ranged, d => d.detid)\n .join(\n enter =>\n enter\n .append(\"circle\")\n .attr('cx', d => d.xmap)\n .attr('cy', d => d.ymap)\n .attr('r', 5)\n .attr('fill', 'red')\n .attr('fill-opacity', d => d.flow / 2500),\n update =>\n update\n .attr('cx', d => d.xmap)\n .attr('cy', d => d.ymap)\n .attr('r', 5)\n .attr('fill', 'red')\n .attr('fill-opacity', d => d.flow / 2500),\n //.call(update => update.transition(t)\n //.attr(\"x\", (d, i) => i * 16)),\n exit =>\n exit\n .attr(\"fill\", \"brown\")\n .attr(\"y\", 30)\n .remove()\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"weekdays = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"db_average_flow = {\n let average_flow = d3.rollups(\n db_to,\n v => d3.mean(v, d => d.flow),\n d => d.weekday,\n d => d.hour\n );\n let db = average_flow\n .map((d, i) => {\n return d[1].map((dd, ii) => {\n return { day: i, weekday: weekdays[i], hour: ii, flow: dd[1] };\n });\n })\n .flat();\n\n return db;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"db_ranged = {\n let str_is_business_day = is_business_day ? 'True' : 'False';\n let db = d3\n .rollups(\n db_to.filter(\n d =>\n d.hour >= hour1 &&\n d.hour < hour2 &&\n d.business_day == str_is_business_day\n ),\n v => d3.mean(v, d => d.flow),\n d => d.detid\n )\n .map((d, i) => {\n return { detid: d[0], flow: d[1] };\n });\n // assign variables to new processed database\n db.forEach((d, i, v) => {\n let det = db_to.filter(dd => dd.detid === d.detid)[0];\n //console.log(det)\n d.long = det.long;\n d.lat = det.lat;\n d.xmap = det.xmap;\n d.ymap = det.ymap;\n });\n return db;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// import database from .csv \ndb_to = {\n let db = d3.csvParse(await FileAttachment('df_to_mean@2.csv').text(),\n d3.autoType)\n db.forEach((d,i,v) => {\n d.xmap = projection([d.long, d.lat])[0];\n d.ymap = projection([d.long, d.lat])[1]})\n return db\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":"// import database from .csv\ndb_cities = {\n let db = d3.csvParse(\n await FileAttachment('cities@1.csv').text(),\n d3.autoType\n );\n db.forEach((d, i, v) => {\n d.xmap = projection_all([d.long, d.lat])[0];\n d.ymap = projection_all([d.long, d.lat])[1];\n });\n return db;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":741,"value":"db_to","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"timestamp_parser = d3.timeParse(\"%Y-%m-%d %H:%M:%S.%f\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"md`**Torino map**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"// get geo tiles from Nextzen.org\ntiles = Promise.all(tile().map(async d => {\n d.data = await fetch(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=v0_A-Y3fTIyGjIDizTbXBA`).then(response => response.json()); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"// function to request data from Nextzen\ntile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"// create the D3 projection, providing center and zoom level for the map\nprojection = d3.geoMercator()\n .center(To_center)\n .scale(Math.pow(2, zoom) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`**global map**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"// get geo tiles from Nextzen.org\ntiles_all = Promise.all(\n tile_all().map(async d => {\n d.data = await fetch(\n `https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=v0_A-Y3fTIyGjIDizTbXBA`\n ).then(response => response.json()); // Sign up for an API key: https://www.nextzen.org\n return d;\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":798,"value":"// function to request data from Nextzen\ntile_all = d3.tile()\n .size([width, height_cities_map])\n .scale(projection_all.scale() * 2 * Math.PI)\n .translate(projection_all([0, 0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"// create the D3 projection, providing center and zoom level for the map\nprojection_all = d3\n .geoMercator()\n .center(To_center)\n .scale(Math.pow(2, zoom_cities) / (2 * Math.PI))\n .translate([width / 2, height_cities_map / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"function filter({features}, test) {\n return {type: \"FeatureCollection\", features: features.filter(test)};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"path_all = d3.geoPath(projection_all)","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"yellow_traffic = \"#ffcc4d\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"red_traffic = \"#dd2e44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"green_traffic = \"#77b255\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"streets_color = \"#669966\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"water_color = '#1199dd'","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"d3 = require(\"d3@6\", \"d3-geo@2\", \"d3-tile@1\", \"d3-simple-slider@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"import { radio, number } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"import { inputsGroup } from \"@bumbeishvili/input-groups\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}