National Smart Cities Mission

100%

National Smart Cities Mission

✓ Published0🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

This visualization maps India’s 100 Smart Cities using their geographic coordinates from a public CSV dataset. It plots each city as a point on a map, with sizes or colors indicating variables like proposed investment in crores or central funds released. The code uses D3’s `d3.geoPath` for map rendering and `d3.forceSimulation` for spatial layout, pulling data from the GMIS smart cities portal.

AI-generated description

Context for this dataset: an email in the [datameet] Google Group:

The Smart Cities GMIS has a publicly accessible folder with spatial data for the 100 Smart Cities: https://gmis.smartcities.gov.in/

The layer with the locations and other details for these 100 Smart Cities can be found in CSV format here: https://gist.github.com/Vonter/5d4aaca8c1180241f3acc75f93cbd116

Regards, Vivek

Similar vizzes

Loading thumbnail…

India Mercator

This visualization displays a map of India with its states and union territories, along with major city labels. It uses a Mercator projection and colors each subunit with a category-based color scale. The code employs D3.js v4 with `d3.geoMercator`, `d3.geoPath`, `d3.scaleOrdinal`, and `d3.schemeCategory20`, alongside TopoJSON for geographic data. Functions automatically center and scale the map to fit the window, draw outer boundaries, subunit boundaries and labels, and place city names from the included `india.json` topology.

FFrissAnalytics

70% match

Loading thumbnail…

India Map: ICE-8

This example displays an interactive map of India with state capitals marked as colored circles, using a CSV dataset that includes city coordinates, population, and color values. It renders the geographic boundaries and city points as SVG elements, with D3 v5 and TopoJSON handling the map projection and path generation. The visualization uses `d3.csv` to load the data, `d3.geoPath` to draw the map, and `d3.select` to bind city positions to the SVG, with hover colors defined per city. The map is centered on India with a fixed 900x1500 viewport.

MMalempatiSaranya

68% match

Loading thumbnail…

Making a Scatter Plot

This scatter plot visualizes the populations of ten Indian cities from the 2011 census, with city names on the vertical axis and population on the horizontal axis. The horizontal axis uses a linear scale with tick labels formatted in abbreviated units. The chart is rendered as SVG using D3 v5, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes from the `data.csv` file.

AArvind Lairenjam

67% match

Loading thumbnail…

Fork of D3 Scatter Plot: geonames_cities100000.csv

This visualization displays a scatter plot of global cities with a population exceeding 100,000, projecting geographic coordinates onto a world map. Point color is interpolated from blue to red based on population with d3.interpolate, encoding magnitude. The plot uses SVG circles with a fixed radius and 0.8 opacity, rendered via D3 v6 imported APIs. The axes employ linear scales for longitude and latitude across fixed ranges, with data loaded asynchronously from a CSV using the d3.csv function.

DDaniel Ribaudo

66% match

Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98

65% match

Loading thumbnail…

Map - India

This example visualizes the states and districts of India as an interactive SVG map. Users can pan and zoom the map using d3.zoom, while hover states reveal district names via title elements. The visualization uses d3-geoMercator for projection, d3.geoPath for rendering paths, and d3.scaleOrdinal with schemeCategory10 to color districts. Geographic data comes from two TopoJSON sources: India state boundaries and 2019 district boundaries. The code also loads city data from a CSV, though points are not plotted in the final rendering.

Llambda-fox

65% match

Loading thumbnail…

Country map

This visualization shows a choropleth map of India’s states, with each state filled by a distinct color from a categorical scale and labeled with its name. The map is rendered as SVG using `d3.geoPath` with a `geoMercator` projection, while state boundaries are drawn from TopoJSON data loaded from a GitHub gist. A `scaleOrdinal` with `schemeCategory10` assigns colors, and text labels are placed at each state’s centroid via `pathGenerator.centroid`.

Uubl2

65% match

Loading thumbnail…

INDIA

This interactive visualization presents a map of India, highlighting its states and districts in color. Users can explore the geography through zooming and panning via d3.zoom, while the map’s districts display hover tooltips that reveal district and state names. The visualization uses d3.geoPath with a geoMercator projection to render GeoJSON features built from TopoJSON data, which is sourced from external repositories for Indian state and district boundaries.

Aadapavaishnavi12

65% match