Portland Map

100%

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

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

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

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

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

91% match

Loading thumbnail…

Fork of Portland Map

This visualization displays the neighborhoods of Portland as a collection of polygon outlines rendered in SVG. The map uses a conic equal-area projection configured with `d3.geoConicEqualArea` and `d3.geoPath` to draw each neighborhood boundary from the Data Canvas Sense Your City dataset. The React-based application loads TopoJSON data via a custom `useData` hook, converts it to GeoJSON with topojson’s `feature` function, and colors the shape edges pink against a clean white background.

JJyothicherukuri

91% match

Loading thumbnail…

Fork of Portland Map

This example displays a choropleth-style map of Portland neighborhoods, rendered as a single-color outline using a conic equal-area projection. The visualization uses React to manage the component lifecycle, with `useData` fetching TopoJSON from a GitHub gist and converting it to GeoJSON via `topojson.feature`. The `d3.geoPath` function, configured with `d3.geoConicEqualArea`, transforms the geographic coordinates into SVG paths, which are styled with a teal stroke. The map is centered on Portland’s coordinates and scaled to fit a 960×500 viewport.

Nnagamaheswar

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

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

90% match