Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
AAbin
Last edited Apr 23, 2021
Created on Apr 23, 2021
Forked from Working with Time

This scatter plot visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting temperature over time using React and D3 v5. It renders SVG circles positioned by `d3.scaleTime` and `d3.scaleLinear`, with axis components generated through the D3 `ticks()` method. The chart includes a `<title>` tooltip showing abbreviated weekday labels via `timeFormat`, and loading states display a "Loading..." message while `d3.csv` fetches the data.

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 temperature readings over time from the Data Canvas Sense Your City dataset, showing the fluctuation of weekly temperatures. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLinear`, to map data points as circles on an SVG canvas. Axes are rendered via custom React components, with `timeFormat` for date labels and a native SVG `<title>` element for hover tooltips. Data is loaded asynchronously using D3's `csv` method and processed through useState and useEffect hooks.

Aalitemel89
95% match
Loading thumbnail…

Fork of Working with Time

This example visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a scatter plot, with time on the x-axis and temperature on the y-axis. The plot is rendered as SVG, with each data point drawn as a circle using React components that generate `circle` elements. The code leverages `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.timeFormat` for tick labels, and `d3.csv` to load the data from a remote URL. A `d3.zoom` call is included, though its behavior is not fully implemented in the displayed code.

MMetalquill
95% match
Loading thumbnail…

Fork of Working with Time

This fork of “Working with Time” visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a time-series scatter plot. Using React with D3 v5, it renders SVG circles positioned via d3.scaleTime and d3.scaleLinear on axes generated with custom tick components, while d3.csv loads and parses the timestamp and temperature values. The y-axis label is rotated via SVG transforms, and each circle includes a native `<title>` tooltip formatted with d3.timeFormat.

Jjudietrich
95% match
Loading thumbnail…

Fork of Working with Time

A scatter plot displays temperature readings over the course of a week, with each point representing a measurement. The visualization uses a time-scaled x-axis and linear y-axis, with weekday labels on the x-axis. Built with React and D3 v5, the code loads CSV data from the Data Canvas Sense Your City dataset, uses `scaleTime` and `scaleLinear` for axes, and renders SVG circles that include tooltips showing the time of each reading.

RRoberto
95% match
Loading thumbnail…

Fork of Working with Time

A scatter plot displays temperature readings over the course of a week, with each point representing a measurement. The visualization uses a time-scaled x-axis and linear y-axis, with weekday labels on the x-axis. Built with React and D3 v5, the code loads CSV data from the Data Canvas Sense Your City dataset, uses `scaleTime` and `scaleLinear` for axes, and renders SVG circles that include tooltips showing the time of each reading.

RRoberto
95% match
Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The chart uses a time-scaled x-axis showing weekday labels and a linear y-axis for temperature, with each data point rendered as a circle. Built with React and D3 v5, the code employs `scaleTime`, `scaleLinear`, and `extent` to map data, while custom `AxisBottom` and `AxisLeft` components generate SVG ticks and labels. Circles include a `<title>` tooltip displaying the formatted timestamp.

GGeekboxer
94% match
Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, with each circle representing a single measurement across the week. The visualization uses React to render SVG elements, employing d3.scaleTime and d3.scaleLinear for the x and y axes alongside d3.extent for domain calculation. The code demonstrates a modular component structure with separate AxisBottom, AxisLeft, and Marks components, and features native SVG circle elements with titles for tooltips. Data loading is handled through d3.csv, while the playful "Loading..." placeholder displays during the asynchronous fetch.

UUlbert Alain Odle
94% match
Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, using a React-based SVG rendering with D3 scales. The x-axis employs `scaleTime` with day-of-week tick formatting, while the y-axis uses `scaleLinear` for temperature values. Circle marks represent individual data points, with native SVG `<title>` elements providing tooltips. The code leverages React hooks via `useData` to asynchronously load and parse CSV data, alongside custom `AxisBottom`, `AxisLeft`, and `Marks` components that map scales to SVG elements.

Ddr-rompecabezas
94% match