Fork of Working with Time

100%

Fork of Working with Time

✓ Published1🌍 Public

Last edited Feb 22, 2021

Created on Feb 22, 2021

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This visualization uses a React-based D3 v5 implementation to display a scatter plot of the Data Canvas Sense Your City dataset. It aggregates the dataset’s “Total Dead and Missing” values over time, binning the reported dates into monthly intervals using D3’s histogram function with `timeMonths` thresholds. The resulting bar chart is rendered as SVG rectangles, with time on the x-axis and the binned death counts on the y-axis. The code explicitly defines axes with `scaleTime` and `scaleLinear`, and formats tick labels using `timeFormat`.

Ssteelerfan107

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

87% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes reported dates against total dead and missing counts from the Data Canvas Sense Your City Dataset, revealing temporal patterns in migration incidents. The visualization uses React with D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering as SVG circles with tooltips. Axes are built through reusable React components that map ticks using D3’s tick generation, while data loading employs D3’s `csv` parser with custom row formatting for date and numeric conversions.

Wweny1109

85% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time using the Data Canvas Sense Your City dataset. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with each circle representing a data point. Tooltips reveal the day of the week for each point. Built with React and D3 v5, the code uses d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculations, and d3.csv for data loading. SVG circles render the marks, with custom AxisBottom and AxisLeft components generating the tick marks and labels.

TTyler Brown

85% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, with each circle representing a single measurement across the week. The visualization uses React to render SVG elements, employing d3.scaleTime and d3.scaleLinear for the x and y axes alongside d3.extent for domain calculation. The code demonstrates a modular component structure with separate AxisBottom, AxisLeft, and Marks components, and features native SVG circle elements with titles for tooltips. Data loading is handled through d3.csv, while the playful "Loading..." placeholder displays during the asynchronous fetch.

UUlbert Alain Odle

84% match

Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time, drawn from the Data Canvas Sense Your City Dataset. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG coordinates, with React components structuring the axes and circular marks. Axis ticks are generated from d3 scale methods, and each circle includes a native SVG `<title>` element for tooltips. The chart is rendered with React and D3 v5, loading data asynchronously via d3.csv.

JJoakim Warholm

84% match

Loading thumbnail…

Fork of Working with Time

A scatter plot displays temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a data point, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to handle scales and ticks. SVG circles render the marks, while `csv` loads and parses the data, and `useState`/`useEffect` manage the asynchronous data loading.

Aarjandhakal

84% match

Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a temperature measurement, with the x-axis displaying days and the y-axis showing temperature values, using tooltips for precise day information. The visualization is built with React components that render SVG elements, using D3’s `scaleTime`, `scaleLinear`, `extent`, and `csv` for data loading and scaling. The code defines reusable axis and mark components, with axis labels and tick formatting applied via React props.

Bbigstonecompany

84% match