City Park Acreage

100%

City Park Acreage

✓ Published0🌍 Public

Last edited Apr 10, 2015

Created on Apr 10, 2015

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.

AI-generated description

Similar vizzes

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

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

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

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

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

71% match

Loading thumbnail…

Untitled

This example shows the total parking capacity per province, sorted from highest to lowest, using a bar chart. The visualization uses D3.v6 to load the data from a JSON URL, nest and roll up the records by province, and sum the capacity values. Axes and bars are updated dynamically via `d3.axisBottom`, `d3.axisLeft`, and `d3.descending`, with the SVG output rendered in a 960x500 canvas.

JJordy S

70% match

Loading thumbnail…

Customizing Axes RDW Data

This bar chart displays the number of Park & Ride usages per year between 2013 and 2015, with 2015 showing the highest count and 2013 the lowest. The visualization uses D3 v6 with an SVG rendering approach, employing `d3.csv` to load the data, `scaleLinear` for the x-axis, and `scaleBand` for the categorical y-axis. Customized axes include tick lines extending across the chart, a manually added axis label for years, and a title text element, with CSS styling applied to font sizes and colors.

SSergio Eijben

70% match

Loading thumbnail…

Making a bar chart

This example demonstrates a horizontal bar chart comparing the area of major cities, using data loaded from a CSV file. The visualization positions each city along the y-axis and scales the bar lengths according to the area values. It relies on D3.js v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The SVG rendering uses a purple fill for bars, which changes to a lighter shade on hover, with the chart area defined by explicit margins.

Vvladvaculin

70% match