Fork of Working with Time

100%

Fork of Working with Time

✓ Published1🌍 Public

Last edited Mar 23, 2022

Created on Mar 23, 2022

This example visualizes the number of total dead and missing migrants over time, with each circle representing a reported incident plotted along a time-based x-axis and a linear y-axis. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `extent` to map the data, while custom React components render the axes and SVG circles. The dataset is loaded asynchronously via `d3.csv` from a GitHub gist, and includes native SVG tooltips using the `<title>` element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This visualization plots reported migrant deaths and disappearances over time, with each circle representing an incident and its vertical position encoding the number of dead or missing. The scatterplot is built with React components rendering SVG, while D3 utilities handle data loading via `d3.csv`, scales via `scaleTime` and `scaleLinear`, and axis tick generation. Data comes from a Missing Migrants Project CSV file, with tooltips showing formatted dates.

Nnexus1058

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

92% match

Loading thumbnail…

Fork of Fork of Working with Time

This histogram visualizes the total number of dead and missing migrants over time, with monthly bins along the x-axis and aggregated death counts on the y-axis. It uses d3.csv to load the Missing Migrants dataset, d3.bin with timeMonths thresholds to group reported dates, and d3.scaleTime and d3.scaleLinear to map the data. React components render the SVG axes and rectangular marks, with CSS styling for ticks and bars.

Mmikekslv

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

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…

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

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

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

89% match