Fork of Fork of Working with Time

100%

Fork of Fork of Working with Time

✓ Published0🌍 Public

Last edited Apr 6, 2021

Created on Apr 6, 2021

This example visualizes the number of reported missing persons over time, aggregated into monthly bins from a dataset of missing persons reports. The bar chart uses a time scale for the x-axis (showing years) and a linear scale for the y-axis (showing total counts per month). Built with React and D3 v5, it uses `d3.bin` with `timeMonths` thresholds and `d3.sum` to aggregate the data, while custom React components render the SVG axes and marks. The data loads from a CSV file via `d3.csv`.

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 fork of “Working With Time” displays monthly totals of reported deaths and missing persons from a CSV dataset, rendered as a bar chart with a time-based x-axis. The React app uses D3 v5 functions including `scaleTime`, `scaleLinear`, `histogram` for binning, `timeMonths` for thresholds, and `sum` to aggregate values per bin. SVG bars are drawn via custom React components for axes and marks, with tooltips showing formatted dates. The chart imports data from `data.json` and applies a stylized font and teal color scheme.

Ttopnep

88% match

Loading thumbnail…

Fork of Fork of Working with Time

This histogram visualizes the total number of dead and missing migrants over time, with monthly bins along the x-axis and aggregated death counts on the y-axis. It uses d3.csv to load the Missing Migrants dataset, d3.bin with timeMonths thresholds to group reported dates, and d3.scaleTime and d3.scaleLinear to map the data. React components render the SVG axes and rectangular marks, with CSS styling for ticks and bars.

Mmikekslv

86% match

Loading thumbnail…

Fork of Working with Time

This interactive bar chart visualizes the monthly cumulative total of dead and missing migrants from the Missing Migrants Global 2019 dataset, sourced via CSV from GitHub. The visualization aggregates daily records into monthly bins using D3’s `scaleTime`, `timeMonths`, and `histogram` functions, then renders the result as SVG rectangles within a React component. The chart includes labeled axes, styled tick marks, and hover tooltips showing the exact monthly count, all built with D3 v5 and rendered through React’s declarative SVG output.

Ttrissentety

86% match

Loading thumbnail…

Fork of Working with Time

This interactive bar chart visualizes the total number of dead and missing migrants over time, aggregated by month from the Missing Migrants Global 2019 subset of the Data Canvas Sense Your City dataset. Built with React and rendered as SVG, the visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `histogram` (binning), and `timeMonths` APIs to bin reported dates into monthly intervals and sum corresponding death counts. Hovering over a bar reveals the exact value through an SVG `<title>` tooltip.

DDeborah Ong

86% match

Loading thumbnail…

Fork of Working with Time

This example is a scatter plot of the Data Canvas Sense Your City Dataset, showing the relationship between Reported Date and Total Dead and Missing counts from the Missing Migrants Global dataset. The visualization uses React components with D3 v5 scales and axes (`scaleTime`, `scaleLinear`, `AxisBottom`, `AxisLeft`) to render SVG circles as marks. The code also imports `histogram` and `timeMonths` for binning, though the current view displays individual data points with tooltips showing formatted dates. The chart includes labeled axes for both dimensions and loads data asynchronously via a CSV URL.

EEFezerKW

86% match

Loading thumbnail…

Fork of Working with Time

This visualization displays the monthly number of dead and missing migrants from the Data Canvas Sense Your City Dataset, aggregated as a bar chart. The code uses React with D3 v5, leveraging `scaleTime`, `histogram`, `timeMonths`, and `scaleLinear` to bin and scale the temporal data. SVG rectangles render each bar, with tooltips for exact values. Axis components are custom-built using React, and data loading relies on D3’s `csv` and React’s `useEffect`.

Jjchen6912

86% match

Loading thumbnail…

Fork of Working with Time

This visualization shows the total number of dead and missing migrants over time, using a bar chart where each bar aggregates the data by month. The chart displays the counts on the y-axis and dates on the x-axis, with a tooltip revealing the exact value for each bar. The code builds the visualization using React, the d3.scaleTime and d3.scaleLinear functions for axes, and the d3.histogram `bin` function to group data by months. The data is loaded from a CSV file of the Data Canvas Sense Your City dataset.

AAmnaRizvi-S

86% match

Loading thumbnail…

Fork of Working with Time

This visualization displays monthly totals of dead and missing migrants over time, binned from daily records in the Data Canvas Sense Your City Dataset. Bars show aggregate counts per month, with tooltips revealing exact values. Built with React and D3 v5, it uses `d3.bin` and `timeMonths` to group data, `scaleTime` and `scaleLinear` for axes, and SVG rectangles for rendering.

Zzyniax

85% match