Skip to main content
SimilarExport ZIP
100%

Salem Map

✓ Published3🌍 Public
Vvigneswaran009
Last edited May 14, 2021
Created on May 14, 2021

This example displays a map of Salem, India, rendered as SVG paths using the React framework and D3's `geoMercator` projection and `geoPath` function. The visualization loads geographic data from a TopoJSON file hosted on GitHub, converting it to GeoJSON with the `feature` method from topojson. The map is drawn with a green stroke color, and the code includes a loading state while the data is fetched asynchronously.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Salem Map

This visualization displays the geographic boundaries of Salem, India, as vector paths rendered on a Mercator projection. The map uses the D3 geoMercator and geoPath APIs to transform TopoJSON data, which is processed through the topojson library's feature function to extract the salem_new object. Each region's boundary is drawn as a path element with a red stroke, and the visualization is built using React components that fetch the data from a GitHub Gist.

Mmanvithareddykarra
92% match
Loading thumbnail…

Salem map class added

This example visualizes the Salem district of India as an interactive choropleth map. The map displays the region's countries and interiors, with each country path filled with a teal color that changes to a blue highlight on hover. The visualization is built with React and D3 version 5, using the `geoMercator` projection and `geoPath` API to render the vector data. The underlying topological data is fetched from a GitHub gist, processed with the `topojson` library, and displayed as an SVG.

Vvigneswaran009
91% match
Loading thumbnail…

Fork of Fork of Salem Map

This choropleth map displays the geographic boundaries of Salem, India, with countries filled in teal and interior borders highlighted in red. The visualization uses a React component structure with D3 v5’s `geoMercator` projection and `geoPath` to render SVG paths from TopoJSON data. The data is loaded from a GitHub gist containing Salem’s map topology, processed via `feature` and `mesh` from TopoJSON. The map is static with no interactive elements, emphasizing clear regional divisions.

Vvigneswaran009
90% match
Loading thumbnail…

Fork of Fork of Salem map class added-extract

This example visualizes a map of Salem, India, using a Mercator projection to render geographic boundaries as filled SVG paths. The code loads TopoJSON data, extracts country features and interior borders, and displays them with a teal fill and subtle stroke for internal divisions. Built with React and D3 v5, it employs `geoMercator`, `geoPath`, and TopoJSON's `feature` and `mesh` APIs to transform the source data into renderable geometry. The map is centered on Salem's coordinates and appears in a simple, static SVG layout.

Vvigneswaran009
90% match
Loading thumbnail…

Salem Map points

This visualization displays Salem city points on a geographical map, showing the spatial distribution of the cities dataset over a region. The map renders country boundaries and interior borders using geo paths, with the mercator projection scaled to center on the Salem area. Built with React and D3 v5, the code employs `geoMercator`, `geoPath`, and TopoJSON

Vvigneswaran009
88% match
Loading thumbnail…

Fork of Salem Map

This example displays a map of Salem using a green-blue choropleth style, with geographic features rendered as SVG paths via D3’s `geoMercator` projection and `geoPath`. The map is built with React, pulling TopoJSON data from a GitHub gist and using the `topojson` library’s `feature` function to extract features. Hovering over individual departments (marked with the `.dptos` class) would turn them pink, though the current SVG only renders the main map paths without that interaction.

Vvigneswaran009
87% match
Loading thumbnail…

Fork of Salem Map

This visualization displays a choropleth map of Salem city boundaries, colored in teal against a light background. The map is rendered as SVG paths using a Mercator projection constructed with d3.geoMercator and d3.geoPath. Geographic data is loaded via d3.json from a TopoJSON file hosted on GitHub, converted to GeoJSON using the feature function from topojson. React manages the component state and rendering, with the Marks component generating each path for the map features.

Aape-ape-ape
87% match
Loading thumbnail…

Fork of Salem map class added-extract

This interactive map displays the geographic boundaries and internal divisions of the Salem region, rendered as SVG paths using the Mercator projection. The visualization loads geoJSON topology data and uses D3's `geoPath` and `geoMercator` functions to project and draw country features, while a separate interior mesh highlights connections between neighboring regions. Built with React, it reads from a remote JSON source and applies a Poppins font with hover styling that highlights individual countries in blue.

Vvigneswaran009
86% match