2e:null 2f:["$","title",null,{"children":"India Map Examples | indiaviz | Observable"}] 34:T448,{ d3.select('.world-india-without-disputed > svg').remove() // Without this, D3 just keeps appending new svgs each time. const width = 600; const height = 600; // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...) const d3SelectionOfSVGCanvas = d3.select('.world-india-without-disputed') .append('svg') .attr('class', 'my-canvas') .attr('width', width) .attr('height', height) var g = d3SelectionOfSVGCanvas.append("g"); var url = "https://raw.githubusercontent.com/shriphani/india_in_data/master/geojson/countries.geojson"; const json = await d3.json(url); // now build the projection var projection = d3.geoMercator().rotate([-78.9629,0]).fitSize([width, height], json); var path = d3.geoPath().projection(projection); d3SelectionOfSVGCanvas.selectAll("path") .data(json.features) .enter() .append('path') .attr('d', path) .style('fill', function(d, i) {if (d.properties.ADMIN == "India") { return d3.color("red ") }}) return d3SelectionOfSVGCanvas.node(); }35:[] 32:{"id":"631357d0a6595d34","slug":"india-map-examples","title":"India Map Examples","thumbnail":"4d577238a778d8bc4bbbba6d2b0ff2dc1ddacf3514d6bc837dfad82ecdd1fd72","access_level":"public","create_time":"$D2019-07-03T07:34:53.020Z","update_time":"$D2019-07-06T01:32:53.968Z","view_time":null,"first_public_time":"$D2019-07-05T10:24:17.300Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"76789af0d440fc11","login":"shriphani","name":"indiaviz","avatar_url":"https://avatars-next.observableusercontent.com/531611f1cbb245d21d93670d1d6551a653e643af09cb5e234b90fe91539d9f83","tier":"starter_2024"},"version":249,"publish_version":249,"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":13,"collection":null,"type":"notebook","body":{"title":"India Map Examples","cells":[{"id":0,"value":"md`# India Map Examples`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`## India With Disputed Areas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"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":9,"value":"{\n d3.select('.india-with-disputed > svg').remove() // Without this, D3 just keeps appending new svgs each time.\n\n const width = 500;\n const height = 500;\n \n // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)\n const d3SelectionOfSVGCanvas = d3.select('.india-with-disputed') \n .append('svg')\n .attr('class', 'my-canvas') \n .attr('width', width)\n .attr('height', height)\n \n var g = d3SelectionOfSVGCanvas.append(\"g\");\n\n var url = \"https://raw.githubusercontent.com/HindustanTimesLabs/shapefiles/master/india/state_ut/india_state.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 \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":86,"value":"md`## India Without Disputed Areas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"html`\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"{\n d3.select('.india-without-disputed > svg').remove() // Without this, D3 just keeps appending new svgs each time.\n\n const width = 500;\n const height = 500;\n \n // returns a d3 selection of parent-DOM-element-for-d3 (which continues down the method chain...)\n const d3SelectionOfSVGCanvas = d3.select('.india-without-disputed') \n .append('svg')\n .attr('class', 'my-canvas') \n .attr('width', width)\n .attr('height', height)\n \n var g = d3SelectionOfSVGCanvas.append(\"g\");\n\n var url = \"https://raw.githubusercontent.com/india-in-data/india_maps/master/india_state_ut_administered.geojson\";\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 \n d3SelectionOfSVGCanvas.selectAll(\"path\")\n .data(json.features)\n .enter()\n .append('path')\n .attr('d', path);\n \n return d3SelectionOfSVGCanvas.node();\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`# India on World Map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`The next couple of examples center India in the world map. We'll look at examples using a version of the country map from Natural Earth`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## World Map With India Without The Disputed Areas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`Here is a world map with India colored in red. The map is centered on India using \\`.rotate()\\` and the longitude of the Indian mainland.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"html`\n

\n \n

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