Fork of Fork of Working with Time

100%

Fork of Fork of Working with Time

✓ Published0🌍 Public

Last edited Nov 23, 2023

Created on Nov 23, 2023

This stacked bar chart visualizes the frequency of natural disasters over time, broken down by disaster subgroup (Climatological, Hydrological, and Meteorological) using the Data Canvas Sense Your City dataset. The visualization uses React to render SVG marks, with `d3.bin` and `d3.timeYears` to bin events into yearly intervals, and `d3.scaleTime` and `d3.scaleLinear` for axes. Each bar segment encodes one disaster type; hovering reveals its exact count via a native `<title>` tooltip. The chart emphasizes the temporal distribution of these hazard categories across the dataset’s timeframe.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

A scatter plot visualizes the frequency of disasters over time, with each point representing a specific disaster event. The x-axis uses a time scale with yearly tick marks, while the y-axis displays frequency counts. Using React and D3 v5, the code loads CSV data from a GitHub gist, bins the records by year using `d3.bin` and `d3.timeYears`, and renders circles with SVG. The visualization applies a Poppins font and custom axis styling from the provided CSS.

MMilana

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

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

81% match

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

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

80% match

Loading thumbnail…

Fork of Polished World Map

This interactive visualization combines a world map of natural disasters with a time-series histogram. Users brush over the histogram to filter disasters by date, which updates the map’s bubble markers sized by disaster impact and colored by category (hydrological, meteorological, climatological). Radio buttons recolor the map based on minimum, average, or maximum temperature anomalies from a separate CSV dataset. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for rendering, while the histogram employs `d3.bin` and `d3.brushX` within a React framework.

MMilana

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

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

80% match