Sarawak Visualize By Kevin

100%

Sarawak Visualize By Kevin

✓ Published1🌍 Public

Last edited Aug 21, 2023

Created on Jun 19, 2023

This example visualizes the state of Sarawak in Malaysia using a choropleth map rendered with SVG. It selects the Sarawak region from a GeoJSON dataset, displaying it in blue shades through D3’s `geoNaturalEarth1` projection and `geoPath`. React manages the component state, while D3’s `json` loader fetches the topojson data, which is converted using `topojson.feature`. The script uses d3.v5, React 16.9, and a Tableau10 color scale for ordinal mapping.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sarawak Visualize By Kevin

This choropleth map of Sarawak uses a natural Earth projection to render the state’s districts, with each region filled using a blue sequential color scale. The visualization loads GeoJSON district boundaries via `d3.json` and `topojson.feature`, then draws SVG paths with `d3.geoPath`. State selection filters data to Sarawak only. Built with React and D3 v5, the map adapts its projection to the available width and height.

Aamith-2001

91% match

Loading thumbnail…

Fork of specific map

This interactive map of Indonesia highlights the state of Sarawak in red, using a natural Earth projection. Built with React and D3 v5, it loads GeoJSON data via D3’s `json` function from a remote URL, then renders the SVG paths with `d3.geoPath` and `d3.geoNaturalEarth1`. A sequential red color scale from `d3.schemeReds` fills the selected region, while other features remain unpainted. The implementation relies on React hooks (`useState`, `useEffect`) to fetch and store the dataset, and the topojson library processes the geometry.

Sshreyasribearelly@gmail.com

78% match

Loading thumbnail…

Fork of Polished World Map

This interactive map isolates the state of Sarawak, Malaysia, rendering its district boundaries as a natural Earth projection fitted to the viewport. Built with React and D3 v5, it uses `d3.geoPath` to project TopoJSON data and applies a blue ordinal color scale to distinguish each district. The visualization emphasizes a single region within the broader world map context.

Sstichtingcas

77% match

Loading thumbnail…

ICE8_SarathL

This example renders a world map with a blue sequential color scale encoding 2022 population estimates for 20 selected countries. The visualization uses D3 v7 with a Natural Earth projection and TopoJSON world-atlas data, applying `d3.geoPath` to draw country boundaries and `d3.scaleSequential` with `d3.interpolateBlues` for the choropleth fill. Hover tooltips, created via SVG `<title>` elements, display each country’s name and population, while unmatched countries appear gray. The code includes a name-correction mapping to align the dataset with TopoJSON’s country names.

Ssarathlingareddy754@gmail.com

72% match

Loading thumbnail…

Sharanya Sriram

This example visualizes the states of India, coloring each one with a categorical color scale and labeling it with its name. It loads TopoJSON data from a remote source, converts it to GeoJSON using `topojson.feature`, and renders the state boundaries as SVG paths via `d3.geoPath` with a `geoMercator` projection. The color assignment uses `d3.scaleOrdinal` and `schemeCategory10`, while state names are placed at path centroids. A black stroke outlines each state, with text labels sized at 8 pixels.

SSharanyaSriram

70% match

Loading thumbnail…

World map Saranya

A world map is rendered on an SVG canvas with children, using an equirectangular projection to display country boundaries. The visualization loads country geometries from the world-atlas JSON dataset and renders them as yellow paths with gray strokes, which turn blue on hover. The code uses D3's projection and path generation functions, D3's selection and data loading APIs, and TopoJSON's feature method to convert the data into GeoJSON features for rendering.

MMalempatiSaranya

69% match

Loading thumbnail…

KoreaMap

This example displays a choropleth map of South Korea’s provinces, rendered as SVG paths. The visualization uses d3.geoMercator and d3.geoPath to project and draw the geographic features, while React manages the component structure. Data is loaded from a TopoJSON file via d3.json and processed with topojson.feature. Static styling defines the map’s stroke and fill colors. The visualization waits for data to load, showing a loading message until the map is ready.

SSeheeP1217

69% match

Loading thumbnail…

Country Map by using D3.js

This example shows a choropleth-style map of the United States, displaying state boundaries as black lines against a dark blue fill. The visualization uses React to render SVG elements, with D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection to convert TopoJSON data from `us-atlas` into geographic paths. State land areas are drawn from the `states` object, while interior borders are generated with `topojson.mesh`. The map is static, with no interaction or labels, focusing solely on geometric representation.

DDanthalakirankumar

68% match