Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited May 10, 2021

Created on Mar 20, 2021

A histogram visualizes the distribution of frequency data against interval boundaries (組界) from a lab dataset. The chart uses a bar chart layout with a D3.js v5 `scaleBand` for the categorical x-axis and a linear scale for the y-axis, displaying counts via SVG rectangles. The code leverages React components (AxisBottom, AxisLeft, Marks) and D3 utilities like `csv`, `scaleLinear`, and `histogram()` (from D3's histogram extension) to bin and render the data. The static visualization is styled with custom fonts and colors, with the dataset fetched from a Gist, presented in a React-based rendering pipeline.

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 displays temperature over time as a scatter plot, with each circle representing a timestamped measurement. The React application uses the d3.scaleTime and d3.scaleLinear APIs to map data to SVG coordinates, and d3.extent to compute domain ranges from the dataset. Data is loaded asynchronously from a gist URL using the d3.csv parser. The SVG rendering includes custom axis components that rotate bottom tick labels for readability, and each data point includes a tooltip displaying the formatted date. The visualization uses the D3 v5 library and React 16.9 for its component-based architecture.

AabhishekGNS

79% match

Loading thumbnail…

Fork of Working with time

This interactive line chart visualizes temperature variations over time, using D3’s `scaleTime` and `scaleLinear` to map the data from the San Francisco week temperature CSV onto an SVG canvas. A natural curve connects the points, with circles marking each hourly reading, providing a clear temporal trend. Axis components—custom React modules `AxisBottom` and `AxisLeft`—render labeled ticks, while the `Marks` component employs D3’s `line` and `curveNatural` for the smooth path. Built with React and D3 v6, the chart uses the `csv` function to load data and SVG for rendering.

RRMartins11

79% match

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

79% match

Loading thumbnail…

Fork of Working with Time

A scatter plot of temperature over time, this React visualization uses D3.js scales and axes to map the data. The code defines axes and marks as separate React components, and uses `d3.scaleTime` and `d3.scaleLinear` to position circles. The `csv` function loads the Sense Your City dataset, and the `timeFormat` API formats x-axis tick labels. The chart is rendered as an SVG, with each data point displayed as a circle whose hover tooltip shows the timestamp.

WWeiping

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

79% match

Loading thumbnail…

Fork of Working with Time

This example visualizes daily temperature variations in San Francisco using a scatter plot. The chart plots timestamp data on the x-axis against temperature on the y-axis, with each data point rendered as a circle. Built with React and D3 v5, the visualization uses the `scaleTime` and `scaleLinear` functions to map the data domain to pixel coordinates within an SVG. The `csv` function loads the dataset from a remote URL, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and data points, with tooltips displaying the formatted date on hover.

Cchar0496

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

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

77% match