Skip to main content
100%

Gist a0301b06d20cf1fa956a64e93fe6d6a7

✓ Published0🌍 Public
TTommyCoin80
Last edited Jul 26, 2018
Created on Jul 26, 2018

This visualization displays the locations of BART stations across the San Francisco Bay Area as points on a geographic map. The map uses a dark background with station markers positioned according to their latitude and longitude coordinates from the provided GeoJSON file. The code employs `d3.forceSimulation` to calculate station label placement and `d3.geoPath` to render the map geometry, while also utilizing Canvas `getImageData` to analyze pixel data for collision detection or positioning adjustments. The visualization appears as a static geographic overview rather than an interactive experience.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 93888ff1e2e309348986d5e9496196c7

This example visualizes the locations of Dutch train stations, distinguishing intercity stations from regular ones through color-coded points. The map is built using D3.js, combining `d3.forceSimulation` with a custom force that projects coordinates onto a map layout, while station markers are rendered as circles. The visualization uses `d3.geoPath` to draw the geographic context, and the underlying data comes from a CSV file listing station names, coordinates, and intercity status. The rendering approach relies on Canvas, with the simulation handling the placement of labels and points to avoid overlap.

JJulesBlm
72% match
Loading thumbnail…

Bubble Chart with D3 without Tooltips/Legend

This bubble chart displays the locations of bike stations in the Bay Area, with circles sized by dock count and colored by city. The visualization aggregates station data from a CSV file by city, plotting averaged longitude and latitude coordinates. Using D3 v7, the code employs scaleLinear functions for the x, y, and radius mappings, scaleOrdinal for categorical colors, and standard axis generators. Dashed lines and inline labels identify each city with its total dock count, while SVG text elements provide axis titles and chart headings.

OOlha
71% match
Loading thumbnail…

Gist ded019fbd2d7ba05c21985f66949a422

This visualization maps a sparse set of point coordinates from a CSV file onto a geographic or spatial canvas, showing the distribution of three numeric attributes (x, y, z) as positioned marks. It uses D3’s `d3.forceSimulation` to lay out the points with a collision-avoidance force, while the rendering relies on D3’s SVG path generation for any underlying base geometry. The data source is a small `points_xyz.csv` file containing an ID and three numeric columns, which the code parses and binds to circle elements. The example demonstrates how to combine force-directed positioning with a fixed spatial reference frame in a lightweight browser-based chart.

TThomasG77
69% match
Loading thumbnail…

fresh block

A map of San Francisco Bay Area airports shows the percentage of time each month that a nearby weather station reports fog, with each station labeled by its three-letter code. The visualization embeds D3-selected SVG circles and text labels within a Google Maps overlay, positioning each marker using the map's projection. Airport data is loaded from a local JSON file, and the map itself is rendered with the Google Maps JavaScript API.

MMarineRu
69% match
Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock
69% match
Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry
68% match
Loading thumbnail…

Bubble Chart with Tooltips Using D3

This bubble chart uses D3 v7 to visualize bike station locations in the Bay Area, mapping latitude and longitude to axes, dock counts to bubble size, and cities to categorical colors from `d3.scaleOrdinal`. A legend, built with the d3-legend library, identifies city colors. Interactive tooltips, styled via CSS and positioned with mouse events, display the total bike count and city name for each aggregated data point. The chart renders as SVG and loads data from a remote CSV using `d3.csv`.

OOlha
68% match
Loading thumbnail…

Scatter Plot of Bike Locations with D3

A scatter plot maps the latitude and longitude of Bay Area bike stations from a 2013 CSV dataset, with each orange circle positioned by its coordinates. The visualization uses d3.csv to load the data, then d3.scaleLinear to map longitude and latitude to SVG canvas positions, while d3.axisBottom and d3.axisLeft generate the axes. Titles for longitude and latitude labels and a heading are added as SVG text elements.

OOlha
68% match