Working with Time

100%

Working with Time

✓ Published0🌍 Public

Last edited Dec 13, 2021

Created on Dec 13, 2021

This example visualizes the monthly totals of dead and missing migrants from a global dataset, using a bar chart where time is mapped to the x-axis and cumulative counts to the y-axis. The React app loads CSV data via d3.csv, parses dates and numbers, and computes bins with d3.bin and timeMonths. SVG marks are rendered through React components, with scales from d3.scaleTime and d3.scaleLinear, and axes built using custom React components that leverage d3’s tick generation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with time

This visualization displays monthly totals of dead and missing migrants along global routes, drawing on a 2019 Missing Migrants dataset. It aggregates reported incident dates into monthly bins using d3.bin and d3.timeMonths, then renders the aggregated sums as bars. The React application uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with custom SVG axis components and marks. A tooltip on each bar reveals the precise monthly count via a d3 title element.

JJosh Zalcman

93% match

Loading thumbnail…

Working With Time with Migrants

This histogram visualizes the monthly totals of dead and missing migrants from a CSV dataset, plotting time on the x-axis and aggregated counts on the y-axis. Using React with D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `timeMonths` to define bin thresholds, and `sum` to aggregate values per bin. Bars are rendered as SVG rectangles, with axis ticks and labels generated by custom components.

KKtuzinowski

92% match

Loading thumbnail…

working with time

This visualization displays the total number of dead and missing migrants over time, using a histogram with monthly bins. The data comes from a CSV file of missing migrants incidents and is processed with `d3.csv` and `d3.histogram`. React renders SVG elements, with axes drawn from custom components using `d3.scaleTime` and `d3.scaleLinear`. Circles mark each bin’s total, colored blue with opacity, and the time axis formats dates using `d3.timeFormat`.

MMATTE-blz

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

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

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

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

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

88% match