Working with Time

100%

Working with Time

✓ Published0🌍 Public

Last edited Jan 12, 2022

Created on Jan 12, 2022

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, using a time-scaled x-axis and linear y-axis. The visualization employs React components with D3 v5 scales and SVG rendering, where each circle represents a temperature measurement with a tooltip showing the date. The code uses `scaleTime` and `scaleLinear` for axis scaling, `timeFormat` for tick labels, and custom React `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist URL.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, with each circle representing a data point. The React-based D3 v5 application uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering axis ticks and circular marks as SVG elements. Tooltips display formatted timestamps via the `title` element, while the chart is styled with a Poppins font and custom colors for ticks and marks.

SSong Tao Chen

96% match

Loading thumbnail…

Working with Time

This scatter plot visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for coordinate mapping, and SVG circles as marks. Axes are generated using custom `AxisBottom` and `AxisLeft` components that call `xScale.ticks()` and `timeFormat`, with native SVG `<title>` elements providing tooltips. Data loading is handled via the `useData` hook, which fetches a CSV file using `d3.csv`.

CCurran Kelleher

94% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time using the Data Canvas Sense Your City dataset. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with each circle representing a data point. Tooltips reveal the day of the week for each point. Built with React and D3 v5, the code uses d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculations, and d3.csv for data loading. SVG circles render the marks, with custom AxisBottom and AxisLeft components generating the tick marks and labels.

TTyler Brown

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

93% match

Loading thumbnail…

Working with time

This scatter plot visualizes the relationship between time and temperature using the Data Canvas Sense Your City dataset. The visualization employs a yellow background circle with black stroke as a decorative frame. The chart uses D3 v6 scales (scaleTime and scaleLinear) to map timestamps and temperature values, with circles representing individual data points that display tooltips on hover. The React application constructs SVG elements through custom components for axes and marks, with specific styling applied to axis ticks and labels.

RRMartins11

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

93% match

Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The chart uses React components for rendering and D3 scales—specifically `scaleTime` and `scaleLinear`—to map the timestamp and temperature values from the Data Canvas Sense Your City dataset. Each data point is drawn as an SVG circle with a tooltip showing the formatted day. The visualization incorporates custom axis components that generate ticks and grid lines.

DDean Bozic

93% match

Loading thumbnail…

Working with Time Scatter Plot

A scatter plot displays temperature readings over time, with each circle representing a single observation. The visualization uses React and D3 v7, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes and `d3.csv` to load the Data Canvas Sense Your City dataset. SVG circles render the points, with hover tooltips showing the formatted time via `timeFormat`. The axis components are custom React functions, and the plot includes labeled axes for time and temperature.

RRedSorrel

93% match