Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
Ssimontoblad
Last edited Jan 30, 2022
Created on Jan 30, 2022
Forked from Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset as a connected line chart, with time on the x-axis and temperature on the y-axis. The data is loaded via d3.csv from a public GitHub gist. Built with React and d3.v5, the chart uses d3.scaleTime and d3.scaleLinear for scales, custom React components for axes, and d3.line to generate the SVG path.

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 visualization displays temperature readings over time from the Data Canvas Sense Your City dataset as a smooth line chart with circular markers. React components render SVG elements, while d3.scaleTime and d3.scaleLinear map data to coordinates, and d3.line with curveNatural creates the interpolated path. Axis components generate tick marks and labels, with hover tooltips providing formatted timestamps via SVG titles. The code imports specific d3 utilities like csv, extent, max, and timeFormat to parse the external CSV data source.

Pplusbeauxjours
95% match
Loading thumbnail…

Fork of Working with Time

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, plotting each measurement as a circle on an SVG scatter plot with a connected line. The visualization uses React components and D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for temperature on the y-axis. Axes are rendered through custom tick components, while the line and points are drawn using D3’s `line` generator within a React marks component, with tooltips provided via native SVG `<title>` elements.

SSam
94% 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
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…

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

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
92% 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
92% 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
92% match