The Counted: simple example

100%

The Counted: simple example

✓ Published0🌍 Public

Last edited Mar 13, 2016

Created on Mar 13, 2016

This visualization plots data from The Counted, showing each individual as a circle positioned by age on the y-axis and date of death on the x-axis. The circles are semi-transparent and clickable, logging the age and scaled position to the console. The code loads CSV data via `d3.csv`, filters rows with valid ages, and uses `d3.scale.linear` for the y-scale and `d3.time.scale` for the x-scale. Mouse interactions are handled with `.on("click")`, and the SVG is rendered full-screen with D3.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/fbb43f7cf188fa8f2d15'>The Counted: simple example</a>

forked from <a href='http://bl.ocks.org/TheLady/'>TheLady</a>'s block: <a href='http://bl.ocks.org/TheLady/9f3884a9f9474e9beedd'>The Counted: simple example</a>

Similar vizzes

Loading thumbnail…

The Counted: simple example

This example plots individual records from The Counted as circles, with each person’s age on the vertical axis and the date of their death on the horizontal axis. The visualization uses a D3 time scale for dates and a linear scale for ages, drawing semi-transparent SVG circles over a full-screen canvas. Clicking a circle logs that record’s age and scaled position to the console. Data is loaded as CSV from the Numeracy project using `d3.csv`, with age parsed as a float and date assembled from month, day, and year fields.

TTheLady

95% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes age at death over time using the Data Canvas Sense Your City dataset. The visualization uses React with D3 v5 scale functions to map death dates on the x-axis and average age at death on the y-axis, rendering SVG circles with tooltips. The code implements custom React components for axes and marks, loading data through d3.csv from a GitHub-hosted CSV file.

AAnnie Ulichney

73% match

Loading thumbnail…

DeathHistAggregation

This interactive scatter plot visualizes the age at death against the time of death using data from the Data Canvas Sense Your City dataset. The visualization clearly shows how mortality rates fluctuate over time, with each circle representing an individual death event. Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` functions for axis scaling and SVG rendering for the visual output. The implementation includes custom axis components and tooltips that display time information when hovering over individual data points.

AAnnie Ulichney

72% match

Loading thumbnail…

Fork of HTML Starter

This example presents a reusable D3 v7 scatter plot that visualizes a small CSV dataset of individuals, plotting their age against their ID number. The chart uses the `d3.scaleLinear` API for both axes, with points rendered as circles using the D3 `.join()` pattern for efficient SVG creation. The code defines a chart factory function, following Mike Bostock’s reusable chart design, allowing customization of the x and y columns and point radius. The data is loaded via `d3.csv` with `d3.autoType` for automatic type inference.

RRithvik

72% match

Loading thumbnail…

Exploración1

This example visualizes a dataset of yearly counts as a circular bubble chart, where each circle’s size encodes a numeric value and its color represents a category derived from the data’s ID. The visualization uses D3.js v5 to load a CSV file with `d3.csv`, then applies the `d3.pack` layout to compute circle positions and radii, with `d3.hierarchy` structuring the data. Each leaf node is drawn as an SVG `<circle>` with a fill color from `d3.scaleOrdinal(d3.schemeCategory20c)`, and text labels are added with clipping paths to keep them inside the circles. The chart also includes tooltips via `<title>` elements showing the exact value for each circle.

663anp3ca

72% match

Loading thumbnail…

A-2_Q-2

This example shows an area chart of age versus height, with the area filled in a solid blue color beneath the line. It uses D3 v7 to load a CSV file from a GitHub gist, parse the data, and sort the entries by age in ascending order. The visualization defines linear scales for both axes and uses the `d3.area` generator to create the filled path, while `d3.axisBottom` and `d3.axisLeft` render the axes with labels. The SVG rendering is sized to 600 by 400 pixels, with a slightly filtered fill color applied to the area path.

Llingaladineshteja23@gmail.com

72% match

Loading thumbnail…

assignment2

This interactive pie chart visualizes the number of deaths by country, using data loaded from a CSV file hosted on GitHub. The chart displays each country as a colored arc segment, with the death count labeled directly on each slice, and includes a legend for identification. Built with D3.js v7, the visualization uses `d3.pie()` to compute arc segments, `d3.arc()` to generate paths, and `d3.schemeCategory10` for coloring. Hovering over a slice triggers a tooltip showing the country name and death count, implemented with mouseover/mouseout events and opacity transitions. The SVG-based chart employs `d3.csv()` for data loading and positions labels via `arc.centroid()` for accurate placement.

1188r1a0559@gmail.com

71% match

Loading thumbnail…

HTML Starter

The visualization plots four individuals' ages against their heights as colored circles on a scatterplot with labeled axes. Each circle animates upward from the baseline to its final position using d3 transitions with staggered delays. Hovering over a point enlarges it and displays the person's name via a text element. D3 v5 scales, axes, and the Tableau10 color scheme manage the mapping, while the data is hardcoded in the chart script.

Ddanielstaal

71% match