Fork of Fork of Stylized Line Chart

100%

Fork of Fork of Stylized Line Chart

✓ Published1🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

This example displays the Salem district map as a stylized line chart, rendering geographic boundaries as bold, teal strokes on a plain background. The visualization uses a React-based architecture with SVG, and the map geometry is processed from TopoJSON data using the `feature` function. The GeoJSON features are projected and drawn through `d3.geoMercator` and `d3.geoPath`, which are called within a React component structure. The underlying data comes from the Data Canvas Sense Your City Dataset, loaded asynchronously via `d3.json` and a custom `useData` hook.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Stylized Line Chart

This example visualizes a geographic map of the Salem region using React and D3. The code renders SVG paths from TopoJSON data sourced from a GitHub gist, with the `geoMercator` projection applied at a high scale and specific center coordinates. The `geoPath` function generates the path data for each feature, while the styling uses a teal stroke color with rounded line joins. The map is displayed as a static visualization without interactive elements or additional chart layers.

Vvigneswaran009

94% match

Loading thumbnail…

Fork of Fork of Stylized Line Chart_salem

This choropleth map displays the Salem region using a GeoJSON-derived TopoJSON dataset from GitHub. The map visualizes geographic boundaries as styled SVG paths with a teal stroke and fill. Built with React and D3 v5, the code uses `geoMercator` for projection and `geoPath` to render the map features. The data is loaded via D3's `json` function and processed using the `feature` function from the TopoJSON library, with the final visualization rendered as an SVG element.

Vvigneswaran009

92% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Stylized Line Chart

This example displays a detailed choropleth map of Salem, India, using SVG paths rendered with a heavily zoomed-in Mercator projection. It loads TopoJSON data from a remote gist and converts it to GeoJSON features using the `feature` function from the `topojson` library. The React component fetches the data with a custom hook and renders each geographic feature as a styled path via `d3.geoPath`. The map emphasizes regional boundaries with a teal stroke, contrasting against a clean white background.

Vvigneswaran009

90% 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

89% 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

86% 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

86% 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

85% match

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

84% match