working with time

100%

working with time

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

A histogram visualizes monthly totals of dead and missing migrants from the Data Canvas - Sense Your City API, with the x-axis showing reported dates across 2019 and the y-axis counting incidents. Built with React and D3 v5, the code uses `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.bin` with `d3.timeMonths` thresholds to group records into monthly bins. SVG rectangles render the bars, with tooltips via SVG `<title>` elements, and custom React components handle axis and mark rendering.

AI-generated description

A scatter plot of Data Canvas - Sense Your City API.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This histogram visualizes the monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset. The code uses React to render SVG rectangles, with d3.scaleTime and d3.scaleLinear for the axes, d3.histogram to bin reported dates into monthly intervals, and d3.sum to aggregate the “Total Dead and Missing” values per bin. Axes and marks are generated via custom React components, with tooltips provided by SVG `<title>` elements.

TThomas Cormican

92% match

Loading thumbnail…

Fork of Working with Time

This histogram displays the monthly total of dead and missing migrants from the Data Canvas Sense Your City Dataset. The chart aggregates individual incident records into monthly bins, with bar heights representing the summed death toll per month. Built with React and D3 v5, the visualization uses `d3.histogram` for binning, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders interactive SVG rectangles with native tooltips. The axes, formatted with `d3.timeFormat`, clearly show temporal trends in the data.

Sstefanpullen

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

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

90% match

Loading thumbnail…

Fork of Working with Time

This visualization aggregates monthly counts of dead and missing migrants from a Data Canvas Sense Your City Dataset, displaying the data as a histogram with time on the x-axis and total fatalities on the y-axis. Using React and d3.v5, it employs `d3.scaleTime`, `d3.bin`, and `d3.timeMonths` to bin events by month, while `d3.max` and `d3.extent` set scale domains. SVG rectangles render the bars, with axes generated by custom React components and tooltips via SVG `<title>` elements.

BBrian Philip

90% match

Loading thumbnail…

Ep. 38 | Working with Time

This visualization shows the total dead and missing migrants over time as a histogram, where each bar aggregates the total for a month. The chart uses a scatter plot dataset sourced from Data Canvas Sense Your City, displayed as SVG in React. It employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `timeMonths`, `histogram`, and `extent` to bin the dates into monthly intervals. The y-axis sums the casualties per bin via `sum`, with tooltips on each bar. Axes are custom drawn using React components.

YYee Han

90% match

Loading thumbnail…

Fork of Working with Time

This visualization is a bar chart that aggregates monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset, showing the sum of casualties over time. The x-axis uses a time scale with monthly bins, while the y-axis uses a linear scale for the count. Built with React and D3 v5, the code leverages `scaleTime`, `histogram` with `timeMonths` thresholds, and `sum` to bin and aggregate the data. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components.

Ssophievanderhorst

90% match

Loading thumbnail…

Fork of Working with Time

This scatter plot displays the number of dead and missing migrants over time from the Data Canvas Sense Your City Dataset. The time axis is aggregated into monthly bins, with the total count per bin plotted. Built with React and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.histogram` for binning, and `d3.extent` for domain calculation. SVG circles render the marks, with tooltips showing the month.

AAnkit-Ian-53787

90% match