Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
GGregS1290
Last edited Oct 31, 2021
Created on Oct 31, 2021
Forked from Working with Time

A fork of Curran Kelleher's "Working with Time" example, this scatter plot visualizes temperature readings over one week from the Data Canvas Sense Your City Dataset. The React application uses D3 v5 scales (`scaleTime` and `scaleLinear`) and React components for axes and marks, rendering SVG circles with a `title` element for tooltips. The data is loaded asynchronously via `csv()` from a GitHub gist, with time formatted using `timeFormat('%a')` for weekday labels on the bottom axis.

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 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
94% 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
94% 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
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, 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
93% match
Loading thumbnail…

Fork of Working with Time

This fork of a working-time example plots temperature against time for one week in San Francisco, using data from Data Canvas Sense Your City. A scatter plot displays each temperature reading as a circle, with time on the horizontal axis and temperature on the vertical axis. Built with React and D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, while `d3.csv` loads the dataset from a remote URL. Axes are rendered as custom React components, with time-formatted tick labels and an SVG `<title>` element for tooltips.

WWilliam Cheung
93% match
Loading thumbnail…

Fork of Working with Time

This fork of Working with Time visualizes a week of temperature readings from the Data Canvas Sense Your City dataset, plotting timestamps against temperature values. The visualization uses SVG rendering with React components, while relying on D3 v5’s scaleTime, scaleLinear, extent, and timeFormat APIs to construct axes and map data points. The scatter plot marks are defined but not rendered in the current code, leaving the chart primarily to display axes and labels. Data loads asynchronously from the provided CSV via d3.csv.

SSampras Dsouza
93% match
Loading thumbnail…

Fork of Working with Time

A fork of the Working with Time example, this visualization renders a scatter plot of the Data Canvas Sense Your City temperature dataset as a time series. Using React with D3 v5, the code employs `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates, with `AxisBottom`, `AxisLeft`, and `Marks` components drawing axes and data points. A CSV loaded via `d3.csv` provides the data, and each circle includes a `<title>` tooltip formatted with `timeFormat`. The visualization presents weekly temperature readings across the x-axis and temperature values on the y-axis.

IIrene-zou
93% match
Loading thumbnail…

Fork of Working with Time

A fork of the "Working with Time" example visualizes temperature over time as a scatter plot with a smooth line connecting points. The chart plots time on the x-axis and temperature on the y-axis, using a dataset from Data Canvas Sense Your City (week temperature data for San Francisco). Built with React and D3 v5, it leverages D3 scales (`scaleTime`, `scaleLinear`), the `line` and `curveNatural` path generators, and `csv` for data loading. The SVG rendering includes interactive circle tooltips via a `<title>` element.

RRod* Wilhelmy
93% match