Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Mar 15, 2021

Created on Mar 15, 2021

This visualization plots temperature over time as a smooth line chart using React and D3 v5. The temperature data is loaded from a CSV file via `d3.csv` and rendered with SVG paths using D3’s `line` and `curveNatural` generators. Axes are built with `scaleLinear` for both dimensions, with custom React components for the bottom and left ticks. The chart includes labeled axes for "Time" and "Temperature," and while circle marks are defined in the code, they are currently commented out, so only the dark grey curved line is displayed. The styling applies custom fonts and bold axis labels via an external stylesheet.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with time

This visualization displays temperature readings over time, rendered as a smooth line chart in an SVG canvas. The React app loads CSV data from a GitHub-hosted weather dataset and uses D3 v5 utilities like `scaleTime`, `scaleLinear`, and `extent` to map timestamps and temperatures to coordinates. The `line` and `curveNatural` functions from D3 draw the path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks. Axis labels and tick styling are defined in CSS with the Poppins font.

SSamirAhma

94% match

Loading thumbnail…

Fork of Working with time

This interactive line chart visualizes temperature variations over time, using D3’s `scaleTime` and `scaleLinear` to map the data from the San Francisco week temperature CSV onto an SVG canvas. A natural curve connects the points, with circles marking each hourly reading, providing a clear temporal trend. Axis components—custom React modules `AxisBottom` and `AxisLeft`—render labeled ticks, while the `Marks` component employs D3’s `line` and `curveNatural` for the smooth path. Built with React and D3 v6, the chart uses the `csv` function to load data and SVG for rendering.

RRMartins11

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

91% match

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

91% match

Loading thumbnail…

Fork of Working with Time

This visualization displays temperature over time as a scatter plot, with each circle representing a timestamped measurement. The React application uses the d3.scaleTime and d3.scaleLinear APIs to map data to SVG coordinates, and d3.extent to compute domain ranges from the dataset. Data is loaded asynchronously from a gist URL using the d3.csv parser. The SVG rendering includes custom axis components that rotate bottom tick labels for readability, and each data point includes a tooltip displaying the formatted date. The visualization uses the D3 v5 library and React 16.9 for its component-based architecture.

AabhishekGNS

91% match

Loading thumbnail…

Fork of Working with Time

This fork of the Working with Time example displays a San Francisco temperature time series as a smooth curved line chart in SVG. The visualization uses React components for axes and marks, with D3 scales (scaleTime, scaleLinear) and the curveNatural line generator to render the data path. The data comes from the Data Canvas Sense Your City Dataset’s weekly temperature measurements, loaded via d3.csv.

EEugenio2192

90% match

Loading thumbnail…

Fork of 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.

WWeiping

90% match

Loading thumbnail…

Fork of Time line chart

This line chart visualizes temperature readings over time, with each data point marked by a circle and connected by a smooth natural curve. The visualization uses React components for rendering SVG elements, with D3 v5 functions like `scaleTime` and `scaleLinear` to map data to coordinates, and `curveNatural` to smooth the line. The chart includes labeled axes for time and temperature, with tick marks styled via CSS. The data is loaded from a CSV file of weekly San Francisco temperatures using D3's `csv` parser.

NNart Williamson

90% match