2c:null 2d:["$","title",null,{"children":"Mobility Patterns II | Orlando Sabogal | Observable"}] 32:T991,MyArc = { const width = size.w; const height = 1.3 * size.h; const radiusPoints = 15; const svg = d3 //.select("#MyArc") .create("svg") .attr("width", width) .attr("height", height + radiusPoints); let MyData2 = MyData.filter(item => { return item.Value > 0; }); let NodesTemp = []; MyData2.forEach((d, i) => { let Temp = d.ZatOrigin; NodesTemp[i] = Temp; }); function onlyUnique(value, index, self) { return self.indexOf(value) === index; } let allNodes = NodesTemp.filter(onlyUnique); //console.log(allNodes); //Souce: https://www.d3-graph-gallery.com/graph/arc_basic.html // List of node names //allNodes // A linear scale to position the nodes on the X axis const x = d3 .scalePoint() .range([0, width]) //.range([0, 500]) .domain(allNodes); //.padding(0.5) //.round(true) // Add the circle for the nodes svg //.selectAll("mynodes") .selectAll("circle") .data(allNodes) .enter() .append("circle") .attr("class", "plotNodes") //.atrr("") .attr("cx", d => x(d)) .attr("cy", height + radiusPoints) .attr("r", radiusPoints) //1 .style("fill", "#69b3a2") .style("fill-opacity", 0.05); // Arcs paths svg .selectAll(".arcPaths") .data(MyData2) .enter() .append('path') .attr("class", "arcPaths") .attr('d', function(d) { let start = x(d.ZatOrigin); // X position of start node on the X axis let end = x(d.ZatDestination); // X position of end node return [ 'M', start, height, // the arc starts at the coordinate x=start, y=height-30 (where the starting node is) 'A', // This means we're gonna build an elliptical arc (start - end) / 2, ',', // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance (start - end) / 2, 0, 0, ',', start < end ? 1 : 0, end, ',', height ] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down. .join(' '); }) .style("fill", "none") .style("stroke-opacity", 0.03) .style("stroke", "black"); //.on("click", function(d) { //console.log("Worked!"); //}); /// //svg.selectAll(".arcPaths").on("click", () => { //console.log("Working"); //}); /// return svg; }33:T632,{ MyArc.selectAll(".arcPaths") .on("mouseover", function(d, i) { d3.select(this) //.transition() //.duration(100) .style("stroke-width", 4) //="2" .style("stroke-opacity", 1) //0.03 .style("stroke", "steelblue"); //"black" let hooverZatOrigin = BogotaZats.features.filter(function(item) { return item.properties.Zona_Num_N == d.ZatOrigin; }); let hooverZatDestination = BogotaZats.features.filter(function(item) { return item.properties.Zona_Num_N == d.ZatDestination; }); MyMap.select("g") .selectAll(".hooverOrigin") .data(hooverZatOrigin) .enter() .append("path") .attr("class", "hooverOrigin") .attr("d", path) .attr("fill", "steelblue"); MyMap.select("g") .selectAll(".hooverDestination") .data(hooverZatDestination) .enter() .append("path") .attr("class", "hooverDestination") .attr("d", path) .attr("fill", "steelblue"); //console.log(hooverZatOrigin); //console.log(hooverZatDestination); //console.log(d); //console.log(i); }) .on("mouseout", function(d, i) { d3.select(this) //.transition() //.duration(100) .style("stroke-opacity", 0.03) //0.03 .style("stroke", "black"); //"black" //console.log("Out"); MyMap.select("g") .selectAll(".hooverOrigin") .remove(); MyMap.select("g") .selectAll(".hooverDestination") .remove(); }); }34:[] 30:{"id":"e6ddb25b03f39e7e","slug":"mobility-patterns-ii","title":"Mobility Patterns II","thumbnail":"7131e3f3271865468e501373bc6691d8392e6e62e20dd24a0dd3f3ec3d6363b5","access_level":"public","create_time":"$D2019-10-01T17:26:58.986Z","update_time":"$D2019-10-13T01:54:37.268Z","view_time":null,"first_public_time":"$D2019-10-02T01:30:20.921Z","has_unpublished_edits":null,"fork":false,"stars":3,"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":110,"publish_version":110,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mobility Patterns II","cells":[{"id":0,"value":"md`# Mobility Patterns II\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":73,"value":"//viewof Arc = html`

\n\n

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":105,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`The following two cell create the main elements of the visualization: the **Arcpath** plot and the **map**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"MyMap = {\n const MyMap = d3\n .create(\"svg\")\n .style(\"width\", size.w)\n .style(\"height\", size.h);\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 //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":41,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`## Observer Events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`Obervers on the paths from the arc path diagram:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`Observers on the points of the the arc path plot:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"{\n MyArc.selectAll(\".plotNodes\")\n .on(\"mouseover\", function(d, i) {\n d3.select(this)\n .attr(\"r\", 50)\n .style(\"fill\", \"black\")\n .style(\"fill-opacity\", 1);\n\n //\n\n let hooverZatOrigin2 = BogotaZats.features.filter(function(item) {\n return item.properties.Zona_Num_N == d;\n });\n\n let MyDataTemp = MyData.filter(item => {\n return item.ZatOrigin == d;\n });\n\n MyMap.select(\"g\")\n .selectAll(\".hooverOrigin2\")\n .data(hooverZatOrigin2)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"hooverOrigin2\")\n .attr(\"d\", path)\n .attr(\"fill\", \"steelblue\");\n \n \n\n //\n })\n .on(\"mouseout\", function(d, i) {\n d3.select(this)\n .attr(\"r\", 15) // possible source of mistake, double check how to get the original r\n .style(\"fill\", \"#69b3a2\")\n .style(\"fill-opacity\", 0.05);\n\n //\n MyMap.select(\"g\")\n .selectAll(\".hooverOrigin2\")\n .remove();\n //\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`### Size and margins of the SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"size = ({ w: 800, h: 300 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"margin = ({ top: 30, bottom: 30, left: 20, right: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"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":9,"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":11,"value":"{\n MyData.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 });\n return MyData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"BogotaZats = d3.json(\n \"https://gist.githubusercontent.com/orlando-sabogal/149c7524e0df22196a243dccc1def862/raw/6f0664e33d7d8f7bd23016b65b9b1868edf6e94e/gistfile3.txt\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"