Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
Ddr-rompecabezas
Last edited May 15, 2021
Created on May 15, 2021
Forked from 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.

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. 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
97% 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
96% 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
96% match
Loading thumbnail…

Fork of Working with Time

A time-series scatter plot visualizes temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. React renders SVG circles through the `Marks` component, while `d3.scaleTime` and `d3.scaleLinear` map the data extents. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, with CSS styling applied via SVG classes.

Eevers-codeshop-ai
96% match
Loading thumbnail…

Fork of Working with Time

A time-series scatter plot visualizes temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. React renders SVG circles through the `Marks` component, while `d3.scaleTime` and `d3.scaleLinear` map the data extents. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, with CSS styling applied via SVG classes.

Eevers-codeshop-ai
96% 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
96% 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
96% match
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
96% match