2c:null 2d:["$","title",null,{"children":"Mobility Patterns I | Orlando Sabogal | Observable"}] 32:T4e5,md`Origin-destination surveys are one of the *gold standard* data sources in transport analysis. It is based on the idea of divide an urban –often metropolitan– area into Transport Zone Analysis TAZ and after a sampling procedure, ask people about the characteristics of their commutes: frequency, mode, purpose, duration, costs, etc. Although it seems simple and raw databases are easy to process, data analysis can become complex.
One of the main tools transport analyst have developed are the so called **desire lines** where trips among two TAZ are represented with a line (from centroid to centroid) and the width is proportional to the amount of trips. Unfortunately, adding more pairs rapidly scale to a tangle. Moreover, is difficult to perform even simple tasks such as comparisons, re-orderings or simply see a subset of data. This is the first ~~(I hope)~~ of a series of visualizations created with the purpose of enhance a fast and effective exploration of origin-destination surveys. In the future, I expect to set the foundations of techniques to analyze this kind of data and –may be– develop a product to do it.
[Here](https://observablehq.com/@orlando-sabogal/mobility-patterns-ii) you can find another experiment. `33:Tc07,Listeners = (g, MyData) => { d3.select("#Walking").on("change", d => { if(d3.select("#Walking").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.PEATON + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.PEATON; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); d3.select("#Cycling").on("change", d => { if(d3.select("#Cycling").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.Bicicleta + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.Bicicleta; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); d3.select("#Transmilenio").on("change", d => { if(d3.select("#Transmilenio").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.Transmilenio + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.Transmilenio; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); d3.select("#TPCandSITP").on("change", d => { if(d3.select("#TPCandSITP").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.TPCySITP + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.TPCySITP; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); d3.select("#Alimentador").on("change", d => { if(d3.select("#Alimentador").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.ALIMENTADOR + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.ALIMENTADOR; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); d3.select("#Taxi").on("change", d => { if(d3.select("#Taxi").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.TAXI + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.TAXI; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove()}); d3.select("#Moto").on("change", d => { if(d3.select("#Moto").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.MOTO + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.MOTO; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); d3.select("#Car").on("change", d => { if(d3.select("#Car").property("checked")){ MyData.forEach((item,i) => {MyData[i].Value = item.AUTO + item.Value; }) } else { MyData.forEach((item,i) => {MyData[i].Value = item.Value - item.AUTO; }) } g.selectAll(".destinations").remove() g.selectAll(".origins").remove() }); }34:T7d1,clicked = (g, Zat, MyData) => { const SelectedZat = Zat.properties.Zona_Num_N; var homex = path.centroid(Zat)[0]; var homey = path.centroid(Zat)[1]; //Set the Width Scale fot the lines const widthScale = d3 .scaleLinear() .domain([0, 5000]) //.domain(d3.extent(OrigenDestino, d => parseFloat(d.Value))) .range([2, 15]); //Origen-Destino Data let OrigenDestino = MyData.filter(item => { return item.ZatOrigin == SelectedZat; }); OrigenDestino = OrigenDestino.filter(function(item) { return item.Value > 0; }); OrigenDestino = OrigenDestino.filter(function(item) { return item.ZatDestination != SelectedZat; }); let ZatsDestinos = []; OrigenDestino.map(d => { let Tempo = BogotaZats.features.filter(function(item) { return item.properties.Zona_Num_N == d.ZatDestination; }); ZatsDestinos.push(Tempo); }); //Destino-Origen Data let DestinoOrigen = MyData.filter(item => { return item.ZatDestination == SelectedZat; }); DestinoOrigen = DestinoOrigen.filter(function(item) { return item.Value > 0; }); DestinoOrigen = DestinoOrigen.filter(function(item) { return item.ZatOrigin != SelectedZat; }); let ZatsOrigenes = []; DestinoOrigen.map(d => { let Tempo = BogotaZats.features.filter(function(item) { return item.properties.Zona_Num_N == d.ZatOrigin; }); ZatsOrigenes.push(Tempo); }); ///// // // if (d3.select("#from").property("checked")) { renderFromLines( g, path, widthScale, homex, homey, OrigenDestino, ZatsDestinos, DestinoOrigen, ZatsOrigenes ); } else { g.selectAll(".destinations").remove(); } // // if (d3.select("#to").property("checked")) { renderToLines( g, path, widthScale, homex, homey, OrigenDestino, ZatsDestinos, DestinoOrigen, ZatsOrigenes ); } else { g.selectAll(".origins").remove(); } }35:T5ad,renderFromLines = (g, path, widthScale, homex, homey, OrigenDestino, ZatsDestinos, DestinoOrigen, ZatsOrigenes) => { g.selectAll(".destinations").remove(); g.selectAll(".destinations") .data(ZatsDestinos) .enter() .append("path") .attr("class", "destinations") .attr("d", function(it, i) { var startx = path.centroid(it[0])[0]; var starty = path.centroid(it[0])[1]; return ( "M" + homex + "," + homey + " Q" + (startx + homex) / 2 + " " + (starty + homey) / 2.5 + " " + startx + " " + starty ); }) .attr("fill", "none") .attr("opacity", 0.7) //.attr("stroke-linecap", "round") .attr("stroke", "#bf812d") .attr("stroke-width", d => { let Temp = d[0].properties.Zona_Num_N; const zatRuta = OrigenDestino.filter(item => { return item.ZatDestination == Temp; }); let cantidadViajes = zatRuta[0].Value; return widthScale(cantidadViajes); }) .attr("stroke-linecap", "round") .call(transition); // // function transition(path) { path .transition() .duration(1500) .attrTween("stroke-dasharray", tweenDash); } function tweenDash() { var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); return function(t) { return i(t); }; } }36:T570,renderToLines = (g, path, widthScale, homex, homey, OrigenDestino, ZatsDestinos, DestinoOrigen, ZatsOrigenes) => { g.selectAll(".origins").remove(); g.selectAll(".origins") .data(ZatsOrigenes) .enter() .append("path") .attr("class", "origins") .attr("d", function(it, i) { var startx = path.centroid(it[0])[0]; var starty = path.centroid(it[0])[1]; return ( "M" + startx + "," + starty + " Q" + (startx + homex) / 2 + " " + (starty + homey) / 1.5 + " " + homex + " " + homey ); }) .attr("fill", "none") .attr("opacity", 0.7) .attr("stroke", "#35978f") .attr("stroke-width", d => { let Temp = d[0].properties.Zona_Num_N; const zatRuta = DestinoOrigen.filter(item => { return item.ZatOrigin == Temp; }); let cantidadViajes = zatRuta[0].Value; return widthScale(cantidadViajes); }) .attr("stroke-linecap", "round") .call(transition); // // function transition(path) { path .transition() .duration(1500) .attrTween("stroke-dasharray", tweenDash); } function tweenDash() { var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); return function(t) { return i(t); }; } }37:[] 30:{"id":"c85c143222c77f8a","slug":"mobility-patterns-i","title":"Mobility Patterns I","thumbnail":"e55749f078215c1c80d76a00b3b9d37ab98a509a776fcf8ec1ddf500c9825773","access_level":"public","create_time":"$D2019-09-26T17:13:43.149Z","update_time":"$D2019-10-02T01:31:08.408Z","view_time":null,"first_public_time":"$D2019-10-02T01:17:44.155Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2524ed589c2561dc","login":"orlando-sabogal","name":"Orlando Sabogal","avatar_url":"https://avatars-next.observableusercontent.com/a85e946cbb5812ce20c84fa75b93f3f285bd98743f82e80935efd31770908235","tier":"starter_2024"},"version":819,"publish_version":819,"role":null,"authored":false,"authors":[{"type":"individual","id":"08e7bfe8f729a24e","login":"orlando-sabogal","name":"Orlando Sabogal","avatar_url":"https://avatars-next.observableusercontent.com/a85e946cbb5812ce20c84fa75b93f3f285bd98743f82e80935efd31770908235","tier":null}],"members":[{"type":"individual","id":"08e7bfe8f729a24e","login":"orlando-sabogal","name":"Orlando Sabogal","avatar_url":"https://avatars-next.observableusercontent.com/a85e946cbb5812ce20c84fa75b93f3f285bd98743f82e80935efd31770908235","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mobility Patterns I","cells":[{"id":10,"value":"md`# Mobility Patterns I\nby [Orlando Sabogal](https://orlando-sabogal.github.io/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"html`

Select the transport modes you want to include

\nWalking\nCycling\nTransmilenio\nTPC and SITP\nAlimentador\nTaxi\nMoto\nCar\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"MyMap = {\n const MyMap = d3\n .create(\"svg\")\n .style(\"width\", 500)\n .style(\"height\", 400);\n\n const g = MyMap.append(\"g\");\n MyMap.call(\n d3.zoom().on(\"zoom\", () => {\n g.attr(\"transform\", d3.event.transform);\n })\n );\n\n g.selectAll(\"path\")\n .data(BogotaZats.features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"Zats\")\n .attr(\"d\", path)\n .on(\"mouseover\", function() {\n d3.select(this).attr(\"fill\", \"#4d4d4d\");\n })\n .on(\"mouseout\", function() {\n d3.select(this).attr(\"fill\", \"#bababa\");\n })\n .attr(\"fill\", \"#bababa\")\n .append(\"title\")\n .text(d => d.properties.Zona_Num_N);\n\n MyMap.selectAll(\".Zats\").on(\"click\", d => {\n clicked(g, d, MyData); // Do I really need to Pass \"MyData\"?\n });\n\n Listeners(g, MyData);\n\n return MyMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`### Projection and Path functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"projection = d3 .geoMercator()\n .fitExtent([[0, 0], [500, 400]], BogotaZats)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`### Desire Lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`### Load data from github and import D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"MyData = d3.csv(\"https://gist.githubusercontent.com/orlando-sabogal/149c7524e0df22196a243dccc1def862/raw/c2cd72a53b9d4380d1cb82b2a41e9ea7ed360539/DataReal.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"{\nMyData.forEach( (d,i) => {\n MyData[i].PEATON = +d.PEATON;\n MyData[i].Bicicleta = +d.Bicicleta;\n MyData[i].Transmilenio = +d.Transmilenio;\n MyData[i].TPCySITP = +d.TPCySITP;\n MyData[i].ALIMENTADOR = +d.ALIMENTADOR;\n MyData[i].TAXI = +d.TAXI;\n MyData[i].MOTO = +d.MOTO;\n MyData[i].AUTO = +d.AUTO;\n //To preset the Data. Walking Input is selected\n MyData[i].Value = +d.Value;\n MyData[i].Value = +d.PEATON;\n });\nreturn(MyData);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"BogotaZats = d3.json(\"https://gist.githubusercontent.com/orlando-sabogal/149c7524e0df22196a243dccc1def862/raw/78eeb42579539b1da148e8854fee8576f8dcd920/BogotaZatsMAPSHAPER.json\")\n//BogotaZats = d3.json(\"https://gist.githubusercontent.com/orlando-sabogal/149c7524e0df22196a243dccc1def862/raw/9c05541c48f73292be8d911f3e867222665b3a5c/BogotaZats.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"