Skip to main content
SimilarExport ZIP
100%

dv.26 - working with time

✓ Published2🌍 Public
Zzach b.
Last edited Mar 18, 2021
Created on Nov 4, 2020

A scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The x-axis uses d3.scaleTime to display timestamps with a day-of-week format, while the y-axis uses d3.scaleLinear for temperature values. React components render SVG circles for each data point, with axes generated by custom AxisBottom and AxisLeft components using D3 ticks. Native SVG `<title>` elements provide tooltips showing the temperature value per point.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

--
Datavis 2020 #26

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

This scatter plot uses D3 v6 and React to visualize temperature readings from the Data Canvas Sense Your City dataset over one week. The x-axis uses a time scale with day-based tick formatting, while the y-axis shows temperature values with a linear scale. SVG circles represent individual data points, each with a tooltip showing the timestamp. The code demonstrates how to combine React components with D3 scales, including `scaleTime`, `scaleLinear`, `extent`, and custom axis components for rendering the visualization.

WWolfgang
92% match
Loading thumbnail…

Working with Time

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.

Jjuanmy400
91% 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
91% match
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
91% match
Loading thumbnail…

working with time

A scatter plot displays daily temperature readings from the Sense Your City dataset, plotting time on the x-axis and temperature on the y-axis. Each circle’s position encodes a timestamp and temperature value, with a native SVG title element providing a tooltip showing the abbreviated weekday. The visualization uses React components for the axes and marks, with d3.scaleTime, d3.scaleLinear, and d3.extent handling the scaling and domain calculations. Data is loaded asynchronously via d3.csv and parsed into JavaScript Date objects and numeric temperatures.

Rrsulli4
91% 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
90% 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
90% 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. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the data, with `extent` and `max` computing the domains. The visualization renders as an SVG, with custom axis components and circular marks that include tooltips via SVG `<title>` elements. Data comes from the Data Canvas Sense Your City dataset, loaded as CSV through `d3.csv`.

Jjerate11
90% match