Gist 7c445469b8bbc80c1047

100%

Gist 7c445469b8bbc80c1047

✓ Published0🌍 Public

Last edited Mar 28, 2015

Created on Mar 28, 2015

This visualization plots commercial land sales in Madison, Wisconsin, as points on a map, with each sale’s location derived from latitude and longitude coordinates embedded in the CSV’s address field. It uses D3.js with `d3.geoPath` to render the map and `d3.forceSimulation` to position and jitter overlapping points for legibility. Hovering reveals the sale price and property details, while dot size encodes the sale amount. The underlying dataset is the provided `Map__Commercial_Land_Sales.csv`, parsed client-side to drive the interactive scatter-map.

AI-generated description

Similar vizzes

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

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

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

68% match

Loading thumbnail…

Gist 9e143987ca94c3ea3cbbcd28943d7096

This visualization compares consumer expenditure patterns across four Midwest U.S. cities using a force-directed network layout. The code employs `d3.forceSimulation` to arrange nodes by category and city, with `d3.geoPath` absent, instead relying on SVG circles and lines to encode spending amounts. Data comes from a flattened CSV (midwest_flatten_3.csv) listing income and expense categories like housing, food, and transportation. Each city’s values are shown as labeled clusters, with node size and link thickness reflecting dollar figures, rendered via D3’s `enter`/`update` selections and `transition.attrTween` for smooth positioning.

JJustinGOSSES

67% match

Loading thumbnail…

My Scatter Plot!

This scatter plot visualizes the relationship between ground living area and sales price for apartments, with each data point rendered as a semi-transparent green circle. The chart uses D3 v5’s `scaleLinear` for both axes, `extent` to compute domains, `axisLeft` and `axisBottom` for labeled axes with gridlines, and an SVG group to position the marks. Data is loaded from a CSV hosted on GitHub via `d3.csv`, with numeric conversion applied before rendering.

NNathan Cheever

65% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

65% match

Loading thumbnail…

City Park Acreage

A scatterplot shows the relationship between acreage and the number of features for Madison city parks, with each circle representing a park; hovering highlights a circle in green. The visualization uses D3 v3 to load the `Map_Parks.csv` file and render an SVG with linear scales for both axes, an x-axis positioned at the bottom, and a y-axis formatted with percentages, applying a staggered transition to animate circle radii from 0.1 to 10 pixels.

11pixelzz

65% match

Loading thumbnail…

Gist 90649caddb267cd893c6402670119faf

This visualization maps barbershop locations across Indiana using a geographic dataset from a GitHub gist. It shows each shop as a point on a state map, with dots positioned by longitude and latitude coordinates. The rendering uses D3.js with `d3.geoPath` to draw the state boundary and a custom projection for spatial accuracy. Points are plotted directly from the CSV data, with hover interactions likely revealing shop names and addresses. The map provides a quick overview of barbershop density, highlighting urban clusters in Indianapolis, Fort Wayne, and Gary versus rural spread.

WWill Carter

65% match