Fork of Working With Time

100%

Fork of Working With Time

✓ Published0🌍 Public

Last edited Jul 30, 2021

Created on Jul 30, 2021

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.

AI-generated description

Stylized Line Chart Working With Time

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…

Fork of Fork of Working with Time

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`.

DDeborah Ong

88% match

Loading thumbnail…

Fork of Working with Time

This visualization is a histogram that aggregates the "Total Dead and Missing" values from the Data Canvas Sense Your City Dataset, grouping the data by month using the `d3.histogram` and `d3.timeMonths` functions. It displays the temporal distribution of the data on a time-scaled x-axis, produced with `d3.scaleTime`, and a linear y-axis representing cumulative monthly counts. The React application uses `d3.csv` to load the data, which is then processed and rendered as SVG rectangles via the `Marks` component. Custom `AxisBottom` and `AxisLeft` components create the chart axes, while the `useData` hook fetches the external CSV, and the code specifies a D3 version 5.11.0 environment.

Nnexus1058

88% match

Loading thumbnail…

Fork of Working with Time

This visualization shows the monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset. It uses a bar chart rendered as SVG with React components, where each bar aggregates the sum of fatalities per month. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `bin`, `timeMonths`, and `sum` to bin the reported dates and compute monthly totals. Axes are drawn with custom React components, and the data is loaded asynchronously from a CSV file.

SSong Tao Chen

87% 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 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 visualization displays the total number of dead and missing migrants over time, binned by month to reveal temporal trends. The React-based code uses d3.csv to load the Data Canvas Sense Your City dataset, then applies d3.scaleTime, d3.scaleLinear, and d3.bin with d3.timeMonths thresholds to aggregate and render the histogram. Custom SVG axes are drawn with d3.ticks and timeFormat labels, while a native SVG `<title>` element provides hover tooltips. The interactive chart appears static but relies on React’s useEffect hook for asynchronous data loading and conditional rendering.

Qqtrfx

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