Skip to main content
SimilarExport ZIP
100%

Ep. 38 | Working with Time

✓ Published0🌍 Public
YYee Han
Last edited Jan 4, 2021
Created on Dec 31, 2020

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.

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

working with time

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.

JJenny
90% match
Loading thumbnail…

Fork of Working with Time

This visualization shows the total number of dead and missing migrants over time, plotted as a scatter plot. Each circle represents a date with its corresponding casualty count, with tooltips displaying the exact date on hover. The chart uses React components to render SVG elements, with D3 scales (scaleTime and scaleLinear) handling the axes and data mapping. The data comes from the Data Canvas Sense Your City Dataset, loaded via D3’s csv function, and the visualization includes styled tick marks and axis labels for clarity.

Nnexus1058
90% match
Loading thumbnail…

Working with Time

This interactive scatter plot visualizes the relationship between reported dates and the total number of dead and missing migrants, using the Data Canvas Sense Your City dataset. The visualization is built with React and D3.js, where D3’s `scaleTime` and `scaleLinear` map the temporal and numeric variables to SVG coordinates. Each data point is rendered as a circle, with hover tooltips displaying the full date. The chart includes labeled axes for time and casualty counts, with tick marks styled using D3’s `timeFormat`.

AAnkit5ingh
90% match