Gist e5accfd5c404e44ded12

100%

Gist e5accfd5c404e44ded12

✓ Published0🌍 Public

Last edited Mar 28, 2015

Created on Mar 28, 2015

This example maps the locations of parks from a CSV of city park attributes, encoding facility types with colored dots overlaid on a blank canvas. The visualization reads latitude/longitude coordinates from the data and uses a custom projection to plot each park, with legend markers indicating amenities like playgrounds or beaches. It relies on the D3 library for CSV parsing and SVG element creation, while the rendering itself is driven by plain JavaScript loops rather than a dedicated geographic mapping API.

AI-generated description

Similar vizzes

Loading thumbnail…

City Park Acreage

This visualization displays the total acreage of city parks as a horizontal bar chart, with each park's name labeled to the left and the bar length scaled proportionally to its area. Sorted in descending order by acreage, the chart uses data from a CSV file containing park attributes and locations. Built with D3.js (v3), it maps the data to SVG rectangles and text elements via `d3.csv` and `d3.selectAll`, while the numeric sort relies on `d3.descending` with unary plus operators to convert string values to numbers.

11pixelzz

76% match

Loading thumbnail…

Loading CSV Data with D3

This example shows a static SVG composition of colored rectangles and circles on a grid of axes, built with D3.js v3. The code loads park data from a CSV file using `d3.csv`, which converts the rows into an array of JSON objects, then logs the result to the console. The rendering uses raw SVG elements defined directly in the HTML, not generated by D3. The data source is the external `Map_Parks.csv` file, and the visualization itself is a fixed geometric layout rather than a data-driven chart.

11pixelzz

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…

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

73% match

Loading thumbnail…

Gist 854f56f011fd6edf9b89b9038dafaa43

This visualization maps a set of veterinary-related locations from a CSV file containing longitude and latitude coordinates, with some rows missing latitude values. It uses D3.js to project and render geographic points, likely employing `d3.geoPath` to draw map features and `d3.forceSimulation` for any positional adjustments. The data source is an invalid CSV with incomplete coordinate pairs, which the code parses and filters to plot only valid entries. The rendering approach appears to rely on canvas or SVG paths to display the spatial distribution of the listed animal clinics and hospitals, highlighting the geographic spread while exposing data quality issues in the source file.

WWill Carter

72% match

Loading thumbnail…

New filter and transform with gist from cities

This example shows parking areas distributed across the Netherlands, overlaid with the 25 largest cities. Users can zoom and pan the map, with buttons to reset the view or highlight specific area managers, though the filtering logic is incomplete. The visualization uses D3 v6 with a Mercator projection and d3.geoPath to render Dutch municipal boundaries from TopoJSON, while fetching parking-geometry data from the RDW open-data API and city coordinates from a GitHub gist. Circles are plotted using cleaned longitude–latitude pairs, with hover effects on the township paths.

Mmbergevoet

71% match

Loading thumbnail…

Gist 496f20b47774ec679ab5dd48beff9d7e

This example maps French regional data from a CSV file onto a geographic outline of France. It uses a conic conformal projection and a quantized color scale to shade each region according to a numeric value. The visualization loads GeoJSON topology for the region boundaries and joins it with the CSV data, filling regions with a five-step green color ramp, while regions without data appear gray. The code relies on D3 v4’s `d3.geoConformal`, `d3.geoPath`, `d3.scaleQuantize`, and CSV/JSON loading functions.

EElisaDnr

71% match

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

71% match