Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
WWeiping
Last edited Nov 28, 2021
Created on Nov 28, 2021
Forked from 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.

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 example shows a scatter plot of temperature readings over time, drawn from the Data Canvas Sense Your City Dataset. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG coordinates, with React components structuring the axes and circular marks. Axis ticks are generated from d3 scale methods, and each circle includes a native SVG `<title>` element for tooltips. The chart is rendered with React and D3 v5, loading data asynchronously via d3.csv.

JJoakim Warholm
95% match
Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset, displayed as circles in an SVG rendered via React. The x-axis uses a time scale with weekly tick labels, while the y-axis shows temperature values from a linear scale. The code leverages d3.scaleTime, d3.scaleLinear, d3.extent, and d3.csv for data loading, alongside React components for reusable axes and marks. Hovering over a circle reveals the timestamp via an SVG title tooltip, and the layout includes rotated and offset axis labels.

Pparshwa30122002@gmail.com
94% match
Loading thumbnail…

Fork of Working with Time

A scatter plot displays temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a data point, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to handle scales and ticks. SVG circles render the marks, while `csv` loads and parses the data, and `useState`/`useEffect` manage the asynchronous data loading.

Aarjandhakal
94% match
Loading thumbnail…

Fork of Working with Time

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendering a scatter plot with circular marks positioned by a d3.scaleTime x-axis and d3.scaleLinear y-axis. Built with React and rendered as SVG, the plot uses d3.csv to load the data and d3.extent to compute domains. The d3.axisBottom and d3.axisLeft components generate tick marks, while native SVG <title> elements provide hover tooltips formatted with d3.timeFormat.

GGokulkrishnan1996
93% match
Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a temperature measurement, with the x-axis displaying days and the y-axis showing temperature values, using tooltips for precise day information. The visualization is built with React components that render SVG elements, using D3’s `scaleTime`, `scaleLinear`, `extent`, and `csv` for data loading and scaling. The code defines reusable axis and mark components, with axis labels and tick formatting applied via React props.

Bbigstonecompany
93% match
Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a temperature measurement, with the x-axis displaying days and the y-axis showing temperature values, using tooltips for precise day information. The visualization is built with React components that render SVG elements, using D3’s `scaleTime`, `scaleLinear`, `extent`, and `csv` for data loading and scaling. The code defines reusable axis and mark components, with axis labels and tick formatting applied via React props.

Bbigstonecompany
93% match
Loading thumbnail…

Fork of Working with Time

This interactive scatter plot visualizes temperature over time, with each circle representing a data point from the Data Canvas Sense Your City dataset. The visualization uses an SVG rendering approach with React for the component structure. D3 version 5 APIs handle the core data processing, including the `csv` parser for loading data, `scaleTime` for the temporal x-axis, and `scaleLinear` for the temperature y-axis. The `extent` function calculates the domain for both axes, while `timeFormat` formats timestamp labels.

AAndro
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