Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Oct 7, 2021

Created on Oct 6, 2021

This example is a scatter plot of the Data Canvas Sense Your City Dataset, showing the relationship between Reported Date and Total Dead and Missing counts from the Missing Migrants Global dataset. The visualization uses React components with D3 v5 scales and axes (`scaleTime`, `scaleLinear`, `AxisBottom`, `AxisLeft`) to render SVG circles as marks. The code also imports `histogram` and `timeMonths` for binning, though the current view displays individual data points with tooltips showing formatted dates. The chart includes labeled axes for both dimensions and loads data asynchronously via a CSV URL.

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 scatter plot visualizes reported dates against total dead and missing counts from the Data Canvas Sense Your City Dataset, revealing temporal patterns in migration incidents. The visualization uses React with D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering as SVG circles with tooltips. Axes are built through reusable React components that map ticks using D3’s tick generation, while data loading employs D3’s `csv` parser with custom row formatting for date and numeric conversions.

Wweny1109

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

92% match

Loading thumbnail…

Fork of Working with Time

This visualization is a histogram that aggregates the "Total Dead and Missing" values from the Data Canvas Sense Your City Dataset, grouping the data by month using the `d3.histogram` and `d3.timeMonths` functions. It displays the temporal distribution of the data on a time-scaled x-axis, produced with `d3.scaleTime`, and a linear y-axis representing cumulative monthly counts. The React application uses `d3.csv` to load the data, which is then processed and rendered as SVG rectangles via the `Marks` component. Custom `AxisBottom` and `AxisLeft` components create the chart axes, while the `useData` hook fetches the external CSV, and the code specifies a D3 version 5.11.0 environment.

Nnexus1058

92% match

Loading thumbnail…

Fork of Working with Time

This visualization uses a React-based D3 v5 implementation to display a scatter plot of the Data Canvas Sense Your City dataset. It aggregates the dataset’s “Total Dead and Missing” values over time, binning the reported dates into monthly intervals using D3’s histogram function with `timeMonths` thresholds. The resulting bar chart is rendered as SVG rectangles, with time on the x-axis and the binned death counts on the y-axis. The code explicitly defines axes with `scaleTime` and `scaleLinear`, and formats tick labels using `timeFormat`.

Ssteelerfan107

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

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

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

91% match

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

91% match