working with time

100%

working with time

✓ Published0🌍 Public

Last edited Apr 16, 2021

Created on Apr 14, 2021

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

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

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

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

92% match

Loading thumbnail…

Working with Time

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.

KKai Stewart

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

91% match

Loading thumbnail…

Fork of Working with Time

This histogram displays the total number of dead and missing migrants over time, with monthly bins aggregated from the Data Canvas Sense Your City dataset. The visualization uses React components for the axes and marks, with d3.scaleTime and d3.scaleLinear for scales. The data is loaded via d3.csv and processed using d3.histogram, d3.timeMonths, and d3.sum to create the bar chart rendered as SVG rectangles.

RRajat Dangat

91% match

Loading thumbnail…

Missing Migrant of Working with Time

This histogram shows the monthly total of dead and missing migrants over time, based on data from the Missing Migrants Project subset. The visualization uses a bar chart with time on the x-axis and the aggregated death count on the y-axis, with hover tooltips displaying exact values. Built with React and D3 v5, it leverages `d3.scaleTime`, `d3.bin` with `timeMonths` thresholds, and `d3.sum` to aggregate the data, while custom SVG components like AxisBottom, AxisLeft, and Marks render the chart. The code loads CSV data via `d3.csv` and renders as SVG.

SSong Tao Chen

91% match

Loading thumbnail…

Migrants

This visualization displays the total number of dead and missing migrants over time as a histogram. The code uses React and D3 v5, with CSV data loaded via `d3.csv`. The x-axis shows time using `d3.scaleTime`, while the y-axis is scaled using `d3.scaleLinear`. The bars, rendered via SVG rectangles, aggregate the data into monthly bins using `d3.histogram` and `d3.timeMonths`. The visualization uses Poppins font and custom axis components, with a tooltip showing the exact count.

LLawrence Liu

90% match