Fork of Fork of Stylized Line Chart

100%

Fork of Fork of Stylized Line Chart

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

This visualization displays the administrative boundaries of India as a choropleth-style map, rendered as a stylized line chart of geographic regions. The map is drawn using SVG paths generated with d3.geoPath and a d3.geoMercator projection centered on latitude 15°E, with the TopoJSON data loaded from a GitHub-hosted file and converted to GeoJSON via the topojson feature method. The visualization uses React for component structuring and styling, with d3.v5 handling the geographic projection and path generation.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This example displays a stylized line chart of India’s administrative boundaries, rendered as a monochrome SVG map with thick, rounded strokes. The visualization imports a TopoJSON file of Indian states, converts it to GeoJSON features using `topojson.feature`, and projects the paths with `d3.geoMercator` and `d3.geoPath`. Built with React, the app loads data via `d3.json` and maps each feature to a `<path>` element, styled with CSS to emphasize the country’s shape. The chart’s title suggests a forked lineage of prior works, though the current code only shows the geographic outline.

Vvigneswaran009

92% match

Loading thumbnail…

Fork of Fork of India Map

This visualization displays a choropleth map of India’s administrative regions, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator projection and d3.geoPath to render the TopoJSON data loaded via d3.json, with the first feature removed. Text labels are positioned at each path’s centroid using pathGenerator.centroid. The map is drawn as SVG paths with styling from CSS, and labels use text-anchor middle for readability.

YYerlan Yeszhanov

87% match

Loading thumbnail…

Fork of Fork of Fork of Fork of india map

This visualization displays a choropleth map of India, rendering both state boundaries and district-level subdivisions. Districts are filled with categorical colors using a `d3.scaleOrdinal` with `schemeCategory10`, and hovering over a district turns it black. The map uses a `d3.geoMercator` projection and `d3.geoPath` to draw the geometry. It is built with React and D3, pulling TopoJSON data from GitHub sources for state and district boundaries. Pan and zoom interactions are enabled via `d3.zoom`.

Ssaiteja0725

86% match

Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

GGogineni44

86% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays a geographical map of a region, rendered as an SVG using a web Mercator projection with D3's `geoMercator` and `geoPath` functions. The map’s paths are drawn in a teal stroke with rounded line joins and caps. The underlying data comes from a JSON file fetched via `json` from a Gist, processed into GeoJSON features using the TopoJSON `feature` function. The React framework manages the application state, and the chart is styled with the Poppins font.

Vvigneswaran009

86% match

Loading thumbnail…

Fork of Fork of Data visualization ICE-8 Country map

This visualization displays a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name at its centroid. It uses D3.js v5 with topojson to load and parse Indian state boundary data from a remote TopoJSON file, then renders the shapes as SVG paths via `d3.geoPath` and a Mercator projection. The code applies a `scaleOrdinal` color scheme to differentiate regions and appends text elements positioned using `pathGenerator.centroid`, demonstrating a basic geographic data mapping workflow.

Vvamshisoletii

86% match

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, colored with a categorical scheme and labeled with state names at their geographic centroids. Using D3 v5, it loads TopoJSON data for India’s administrative boundaries, removes the first feature, and projects the geometry with `geoMercator`. Paths are generated via `d3.geoPath`, while text labels are positioned using `pathGenerator.centroid`. The SVG rendering includes hover titles and a color scale from `scaleOrdinal(schemeCategory10)`, with styling applied through CSS.

DDINESH SAI BOPPANA

86% match

Loading thumbnail…

Fork of Fork of India Map

This visualization shows a choropleth map of India with each state filled by a distinct color from a categorical scale, plus state names overlaid at their geographic centroids. The map uses a Mercator projection positioned with specific translation and scale values, and the code loads India’s state boundaries as TopoJSON from a raw GitHub repository. Using d3.geoPath and d3.geoMercator, it renders the shapes as SVG paths, while d3.scaleOrdinal with schemeCategory10 assigns fill colors, and text elements are placed using pathGenerator.centroid. The topojson library converts the TopoJSON data into GeoJSON features.

AAbdouEnsaj

86% match