City Park Acreage

100%

City Park Acreage

✓ Published0🌍 Public

Last edited Apr 24, 2015

Created on Apr 24, 2015

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.

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

84% match

Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin

69% match

Loading thumbnail…

Gist e5accfd5c404e44ded12

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.

11pixelzz

69% match

Loading thumbnail…

MLB Parks

This interactive scatterplot visualizes Major League Baseball stadiums, plotting each park's opening year on the x-axis against a user-selected attribute (capacity, construction cost, or opening year) on the y-axis. Points are color-coded by roof type using a d3.scaleOrdinal and SVG circles with native tooltips. Built with React and D3 v7, the visualization uses d3.csv for data loading, d3.scaleLinear for axes, and custom React components for axes and legend rendering. A dropdown menu allows switching between different y-axis attributes.

AArubaKLM

67% match

Loading thumbnail…

Points on a map

A geographic scatter plot displays city populations using a square-root size scale for circles overlaid on a landmass map. The visualization uses React with D3’s `geoMercator` projection and `geoPath` to render country boundaries, while the `scaleSqrt` function scales circle radii by population data. The map data comes from TopoJSON, and the city dataset originates from the Data Canvas Sense Your City dataset.

Vvigneswaran009

66% match

Loading thumbnail…

CITY ATTRIBUTES

This visualization uses a city attributes dataset to display the geographic distribution of cities in a scatter plot, plotting longitude against latitude as steelblue circles. It then presents a bar chart that aggregates the data by country, showing the count of cities per nation using D3.js’s `d3.rollup` for grouping and `scaleBand`/`scaleLinear` for axes. The SVG rendering relies on D3 v7, with both charts generated from a CSV file fetched via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, while the bar heights reflect the computed country counts.

CChaturyaAkhilaPallem@my.unt.edu

66% match

Loading thumbnail…

Gist 7c445469b8bbc80c1047

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.

11pixelzz

65% match

Loading thumbnail…

Scatterplot

This scatterplot displays the populations of six cities, with circles positioned along a point scale for city names and a linear scale for population values. The visualization uses D3 v7’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG chart with gridlines and labeled axes. Population data is loaded from a CSV file via `d3.csv`, and tick labels are formatted using `d3.format` to abbreviate large numbers. The circles are styled with a steelblue fill, and the chart includes a descriptive title.

Ssheafallick

65% match