ICE- 8 Country Map- Portland

100%

ICE- 8 Country Map- Portland

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example displays a map of Portland neighborhoods as SVG paths, using a conic equal-area projection centered on the city’s coordinates. The map is built with React, which fetches TopoJSON data via the `useData` hook and `d3.json`, converts it to GeoJSON with `topojson.feature`, and renders it through `d3.geoPath`. Each neighborhood boundary is drawn as a stroked path, with styling applied through CSS classes. The visualization updates asynchronously, showing a loading message until the geographic data arrives.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Portland Map

This visualization shows a map of Portland neighborhoods using a conic equal-area projection, rendered as stroked SVG paths. It uses `d3.geoPath` to project and draw the neighborhood boundaries from TopoJSON data, with the geographic projection centered on Portland. The map is displayed in a React component that fetches and parses the data via `d3.json` and `topojson.feature`. The styling applies a teal stroke to the paths, creating a clean, minimal map view.

DDINESH SAI BOPPANA

87% match

Loading thumbnail…

USA Map

This visualization displays a map of Portland neighborhoods rendered as an SVG using React and D3. The code employs `geoConicEqualArea` for projection and `geoPath` to draw each neighborhood boundary from TopoJSON data loaded via `useData`. The specific geospatial data comes from a gist containing Portland neighborhood polygons, with styling applied through CSS classes for the path strokes. The example demonstrates integrating React state management with D3’s geographic utilities to produce a clean, minimal choropleth-style map.

LLakshmiVandanaNunna

87% match

Loading thumbnail…

Portland Map

This visualization displays the neighborhoods of Portland, Oregon as a choropleth-style map using a conic equal-area projection. The map renders geographic boundaries as SVG paths generated with `d3.geoPath` and `d3.geoConicEqualArea`, with the data loaded as TopoJSON and converted to GeoJSON features using the `feature` function from `topojson`. The React application fetches the neighborhood data from a GitHub Gist and renders each boundary with a consistent teal stroke, creating a clean, minimalist view of the city’s districts.

HHeidi Stockton

86% match

Loading thumbnail…

ice8abhi2.1

This visualization displays neighborhood boundaries in Portland using a geometric map projection. The map renders geographic features as red-outlined polygons, with the page title “portland” appearing above the SVG canvas. The code applies `geoConicEqualArea` for projection and `geoPath` to draw the shapes, while `topojson.feature` converts the TopoJSON data into GeoJSON. The data comes from a PortlandNeighborhoods.json file hosted on GitHub, and the visualization is built with React and styled with Poppins typography.

Aabhi051197

86% match

Loading thumbnail…

Fork of Portland Map

This example displays neighborhood boundaries of Portland, Oregon, with each area rendered as a filled SVG path. The map uses a conic equal-area projection configured with a specific center and scale to focus on the city. Data comes from a TopoJSON file of PortlandNeighborhoods, converted to GeoJSON using the `feature` method from topojson. The React app loads the data asynchronously and renders the paths with the `geoPath` generator, applying a teal stroke and fill from the stylesheet.

Bbhargavarathod

85% match

Loading thumbnail…

Fork of Portland Map

This example displays a choropleth map of Portland neighborhoods, rendering geographic boundaries as green SVG paths. The map uses a conic equal-area projection configured with `d3.geoConicEqualArea` and `d3.geoPath` to project and draw the shapes. Data is loaded from a TopoJSON file via `d3.json` and converted to GeoJSON features using `topojson.feature`. The visualization is built with React, where the `Marks` component maps each feature to a path element, and styling is applied through CSS to highlight the neighborhood borders.

RRamakanth771

84% match

Loading thumbnail…

Fork of Portland Map

This visualization renders a map of Portland neighborhoods as a choropleth of vector paths. The code uses d3.geoConicEqualArea with a custom projection and d3.geoPath to draw the geographic features, while topojson’s feature method extracts the neighborhood boundaries from a TopoJSON file. The React component loads the data asynchronously and displays the SVG paths with a teal stroke, sourced from the Data Canvas Sense Your City dataset.

JJyothicherukuri

84% match

Loading thumbnail…

Fork of Portland Map

This map visualizes Portland neighborhoods using a conic equal-area projection, rendering geographic boundaries as SVG paths from a TopoJSON dataset. The code leverages D3’s `geoConicEqualArea` and `geoPath` for projection and path generation, with React managing the component structure. The dataset is loaded via `d3.json` from a GitHub gist, and the resulting paths are styled with a teal stroke, displaying the city’s neighborhood outlines without additional thematic encoding.

VVAbhiram99

84% match