Skip to main content
SimilarExport ZIP
100%

with trails

✓ Published0🌍 Public
AAnaMal08
Last edited Apr 21, 2017
Created on Apr 21, 2017

This example visualizes hiking trail paths overlaid on a geographic projection of the Washington, D.C. area. It uses a conic conformal projection with custom parallels and rotation, fitting the trails to a 960×500 SVG canvas via `projection.fitSize`. Trail data is loaded from a TopoJSON file and converted to GeoJSON using `topojson.feature`, then rendered as crimson, unfilled SVG paths with `d3.geoPath` and `d3.json` for asynchronous loading.

AI-generated description

Similar vizzes

Loading thumbnail…

FINAL PROJECT 04/26

This visualization maps hiking and biking trails in the Washington, D.C. area using a conic conformal projection. It renders trail paths in crimson and bike station locations as blue points, with trails highlighted on mouseover. The code uses d3.geoPath, d3.geoConicConformal, and d3-tile, loading trail data as TopoJSON and station data as GeoJSON from remote sources.

AAnaMal08
87% match
Loading thumbnail…

final project/ stations

A geographic visualization of bike trails and stations in Washington, D.C. uses a conic conformal projection via `d3.geoConicConformal` and renders trail and station data as SVG paths with `d3.geoPath`. The trail GeoJSON is loaded from a GitHub repository, and station features are appended as points from a local JSON file. Trails highlight crimson on mouseover, with station paths sharing the same fill, while the projection is scaled and translated with `fitSize` to match the 960x500 canvas.

AAnaMal08
83% match
Loading thumbnail…

final stations2

This example shows a map of bike-share stations and trail paths in the Washington, D.C. area, with trails rendered in crimson and stations as points. It uses a conic conformal projection via `d3.geoPath` and `projection.fitSize` to center the view, while topojson and d3.json load the trail and station data. The code applies `d3.queue` for asynchronous loading and adds mouseover highlighting to trails, though station interactions are not implemented. The visualization relies on d3.v4, d3-tile, and topojson.v1, with SVG rendering.

AAnaMal08
81% match
Loading thumbnail…

Gist 3479d944f561ed81b080d524d9c0a80b

This visualization maps hiking trails fetched from the Hiking Project API, with each trail positioned according to dynamic geographic coordinates passed to the API. The code builds a network-style graph where nodes represent trails, linked by proximity or shared attributes, using D3.js’s force simulation for layout. The rendering relies on `d3.forceSimulation` to compute node positions, while trail data is loaded asynchronously via HTTP requests and parsed from JSON. The display emphasizes spatial relationships between trails, with the simulation running in real time to reveal clusters and connections based on the fetched coordinates.

WWill Carter
76% match
Loading thumbnail…

Class 10

This interactive map of Washington, D.C., overlays bike-sharing stations, hiking trails, and points of interest onto a zoomable Mercator projection. Users can hover over red station markers or green trail paths to see tooltips with addresses, bike counts, or trail lengths. Built with D3 v4, the example uses `d3.geoMercator` and `d3.geoPath` to render geographic features, while `d3.zoom` and `d3.tile` provide a smoothly scaling tile-based view. Data is loaded from three remote JSON files hosted on GitHub, and the interface supports mouse-based panning and zooming.

AAnaMal08
75% match
Loading thumbnail…

basemap

This example displays a zoomable map of Washington, D.C., with a red trail and bike station data overlaid on OpenStreetMap tiles. It uses d3.zoom and d3.tile to handle panning and zooming, while d3.geoMercator and d3.geoPath render the vector overlay from a TopoJSON trail file. The map loads earthquake and bike-share data from external JSON sources, with tiles dynamically fetched during zoom events.

AAnaMal08
75% match
Loading thumbnail…

test

This example displays a choropleth map of the United States, rendering counties and states as colored vector paths. The visualization shows the geographic boundaries of counties, states, and the national outline using a green fill for county areas. Built with D3 v4 and the topojson-client library, it loads US Atlas TopoJSON data and applies projection with `d3.geoPath`. The code distinguishes regions by filtering counties into their respective states and traces state and national borders with distinct stroke widths.

AAnaMal08
72% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Cchaimmaeee
72% match