2e:null 2f:["$","title",null,{"children":"Transportation Networks India | indiaviz | Observable"}] 34:T41e,{ d3.select('.india-railways > svg').remove() // Without this, D3 just keeps appending new svgs each time. const width = 1200; const height = 1200; // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...) const d3SelectionOfSVGCanvas = d3.select('.india-railways') .append('svg') .attr('class', 'my-canvas') .attr('width', width) .attr('height', height) .attr('stroke', 'cyan') .attr('stroke-width', '3') .style("background-color", 'black'); var g = d3SelectionOfSVGCanvas.append("g"); var url = "https://raw.githubusercontent.com/india-in-data/infrastructure_renders/master/railways.json"; const json = await d3.json(url); // now build the projection var projection = d3.geoMercator().fitSize([width, height], json); var path = d3.geoPath().projection(projection); d3SelectionOfSVGCanvas.selectAll("path") .data(json.features) .enter() .append('path') .attr('d', path); return d3SelectionOfSVGCanvas.node(); }35:T40d,{ d3.select('.in-osm-roads > svg').remove() // Without this, D3 just keeps appending new svgs each time. const width = 1200; const height = 1200; // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...) const d3SelectionOfSVGCanvas = d3.select('.in-osm-roads') .append('svg') .attr('class', 'my-canvas') .attr('width', width) .attr('height', height) .attr('stroke', 'cyan') .style("background-color", 'black'); var g = d3SelectionOfSVGCanvas.append("g"); var url = "https://raw.githubusercontent.com/india-in-data/infrastructure_renders/master/primary_secondary_simplified.json"; const json = await d3.json(url); // now build the projection var projection = d3.geoMercator().fitSize([width, height], json); var path = d3.geoPath().projection(projection); d3SelectionOfSVGCanvas.selectAll("path") .data(json.features) .enter() .append('path') .attr('d', path); return d3SelectionOfSVGCanvas.node(); }36:[] 32:{"id":"733a60f0bedc39cf","slug":"transportation-networks-india","title":"Transportation Networks India","thumbnail":"39baaaef9e66fd0571b22fcebb2d2c3d2ab3e8e9cc0d72c13184aef5278f7e84","access_level":"public","create_time":"$D2019-07-26T18:39:31.967Z","update_time":"$D2019-08-01T04:24:36.512Z","view_time":null,"first_public_time":"$D2019-07-27T20:00:00.716Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"76789af0d440fc11","login":"shriphani","name":"indiaviz","avatar_url":"https://avatars-next.observableusercontent.com/531611f1cbb245d21d93670d1d6551a653e643af09cb5e234b90fe91539d9f83","tier":"starter_2024"},"version":58,"publish_version":58,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed904528094946a0","login":"shriphani","name":"indiaviz","avatar_url":"https://avatars-next.observableusercontent.com/531611f1cbb245d21d93670d1d6551a653e643af09cb5e234b90fe91539d9f83","tier":null}],"members":[{"type":"individual","id":"ed904528094946a0","login":"shriphani","name":"indiaviz","avatar_url":"https://avatars-next.observableusercontent.com/531611f1cbb245d21d93670d1d6551a653e643af09cb5e234b90fe91539d9f83","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f322310a31e559ee","slug":"transport-infra","title":"Transport Infra","owner":{"id":"76789af0d440fc11","login":"shriphani","name":"indiaviz"}},"type":"notebook","body":{"title":"Transportation Networks India","cells":[{"id":0,"value":"md`# Transportation Networks India`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`_We plot the road, railway, and traffic network charts from OSM. The original shapefiles are converted to\ngeojsons with Fiona and then plotted._`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n d3.select('.india-roads > svg').remove() // Without this, D3 just keeps appending new svgs each time.\n\n const width = 1200;\n const height = 1200;\n \n // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)\n const d3SelectionOfSVGCanvas = d3.select('.india-roads') \n .append('svg')\n .attr('class', 'my-canvas') \n .attr('width', width)\n .attr('height', height)\n .attr('stroke', 'cyan')\n .style(\"background-color\", 'black');\n \n var g = d3SelectionOfSVGCanvas.append(\"g\");\n\n var url = \"https://raw.githubusercontent.com/india-in-data/infrastructure_renders/master/roads.json\";\n \n const json = await d3.json(url);\n \n // now build the projection\n var projection = d3.geoMercator().fitSize([width, height], json);\n var path = d3.geoPath().projection(projection);\n\n d3SelectionOfSVGCanvas.selectAll(\"path\")\n .data(json.features)\n .enter()\n .append('path')\n .attr('d', path);\n return d3SelectionOfSVGCanvas.node();\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"{\n d3.select('.de-roads > svg').remove() // Without this, D3 just keeps appending new svgs each time.\n\n const width = 1200;\n const height = 1200;\n \n // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)\n const d3SelectionOfSVGCanvas = d3.select('.de-roads') \n .append('svg')\n .attr('class', 'my-canvas') \n .attr('width', width)\n .attr('height', height)\n .attr('stroke', 'cyan')\n .style(\"background-color\", 'black');\n \n var g = d3SelectionOfSVGCanvas.append(\"g\");\n\n var url = \"https://raw.githubusercontent.com/india-in-data/infrastructure_renders/master/de_roads.json\";\n \n const json = await d3.json(url);\n \n // now build the projection\n var projection = d3.geoMercator().fitSize([width, height], json);\n var path = d3.geoPath().projection(projection);\n\n d3SelectionOfSVGCanvas.selectAll(\"path\")\n .data(json.features)\n .enter()\n .append('path')\n .attr('d', path);\n return d3SelectionOfSVGCanvas.node();\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"