Gist 61957648a96af6b4167e

100%

Gist 61957648a96af6b4167e

✓ Published0🌍 Public

Last edited May 11, 2015

Created on May 11, 2015

This example visualizes traffic crash records from a Gist file, mapping each participant’s location and attributes onto a canvas. It uses a force-directed layout with `d3.forceSimulation` to spatially arrange points, while `d3.geoPath` renders geographic features from the included geometry. The code reads the raw text data, parses fields like crash severity and participant details, and draws small circles colored by injury severity. It also employs Canvas `getImageData` for pixel-level rendering, and transitions with `transition.attrTween` to animate point movement. The result is an interactive scatterplot-style map of incident density and participant distribution.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson

79% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This example visualizes New York City traffic crash data as a clustered point map, distinguishing crash types—no injury, injury, fatality, and combined injury and fatality—through a categorical color scale. It uses Mapbox GL for the interactive basemap and layer rendering, while D3 v4 fetches and loads the GeoJSON data. The map clusters points at higher zoom levels using Mapbox GL’s built-in clustering, with circle radius scaling dynamically based on zoom. The underlying data comes from a public GitHub repository containing NYC crash records, rendered over a dark map style for contrast.

FFred-Fan

78% match

Loading thumbnail…

Gist 6112837

This example visualizes the 2008 cohort of vehicle test records from a gist, mapping individual vehicles as nodes in a force-directed network. The visualization uses d3.forceSimulation to compute node positions based on shared attributes like make and fuel type, while d3.geoPath renders a geographic backdrop for postcode regions. Canvas getImageData samples pixel colors for a density heatmap overlay, and transition.attrTween animates node movements during filtering. The schema.ini file defines the pipe-delimited data structure, and the code reads the CSV directly from the gist to drive the interactive layout.

IIanHopkinson

76% match

Loading thumbnail…

iSchool GeoVisualization Workshop

This visualization maps motor-vehicle crash locations in New York City, colored by crash type (injury, fatality, etc.), using a dark Mapbox basemap. It shows clustered point data to reveal geographic patterns of crash severity. The code uses Mapbox GL JS with D3.js v3 to load GeoJSON data from a GitHub repository, create a clustered circle layer, and apply categorical color mapping with radius scaling. The map includes navigation controls and a zoom-dependent radius transition.

55un

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

74% match

Loading thumbnail…

Gist 70625

This example visualizes a force-directed graph built with the D3.js library, using `d3.forceSimulation` to compute the layout. The graph’s nodes are rendered as text labels on an HTML5 Canvas, where each label displays a single character from the Gist’s source code. The visualization shows the spatial clustering of these characters, and the code calculates how many times a given character appears in a node’s adjacency list using a custom `f(ra,n)` method. The rendering approach relies on Canvas’s `fillText` for drawing labels, with the simulation updating positions each tick.

DDylanFM

74% match

Loading thumbnail…

Gist 130517

This visualization displays a sparse, grid-based dataset from a gist by DylanFM, using a fixed-size coordinate system (values such as 1056, 64, 1152, and 4608) to plot points in a two-dimensional space. The rendering relies on D3’s `d3.forceSimulation` for positioning and likely `d3.geoPath` or a similar path generator to draw shapes, though the specific API is not explicitly shown. The data, provided as a plain text file, is read and mapped directly to screen coordinates without additional transformation, creating a minimal scatter-like plot. The example emphasizes raw data plotting with minimal abstraction, focusing on the direct conversion of numeric inputs into visual marks.

DDylanFM

74% match

Loading thumbnail…

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

74% match