Portland blockgroup TopoJSON

100%

Portland blockgroup TopoJSON

✓ Published0🌍 Public

Last edited Sep 19, 2013

Created on Sep 19, 2013

This example visualizes the boundaries of Portland block groups using a TopoJSON file. The map is rendered with D3, which reads the topology and converts it into SVG paths on the fly. The block groups are drawn as distinct polygon features, with each region represented by arcs from the TopoJSON topology. The geographic boundaries are likely derived from Census data, and the visualization highlights the spatial layout of Portland’s neighborhoods at the block-group level. The author, Caged, encoded the TopoJSON structure to share this map, making it easy to reuse for choropleth or interactive map projects. The display emphasizes boundary shapes rather than quantitative values, offering a clean basemap for further analysis.

AI-generated description

Similar vizzes

Loading thumbnail…

Portland parks

The visualization displays the geographic boundaries of parks throughout Portland, Oregon, using a TopoJSON file that encodes each park as a polygon or multipolygon. It renders these shapes on a map-like canvas, showing the distribution and relative sizes of green spaces across the city. The implementation uses D3’s `d3.geoPath` to project and draw the topology, with the data sourced from a gist by Caged. The scene relies on D3’s geographic projection and path generation to convert the TopoJSON arcs into visible, filled polygons.

CCaged

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

80% match

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

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

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

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

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

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

76% match