D3-DEMO

100%

✓ Published1🌍 Public

Last edited Apr 26, 2023

Created on Apr 26, 2023

This example displays a temperature time series from the Sense Your City dataset, with a line chart mapping days to temperature values. Built with React and D3 v5, it renders SVG elements including axes and a smoothed path using D3's `line` and `curveNatural` APIs. The time axis uses `scaleTime` with formatted tick labels, while the linear temperature axis relies on `scaleLinear`.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3-DEMO

This visualization displays a line chart of weekly temperature readings over time, using data from the Data Canvas Sense Your City dataset. The chart renders as an SVG, with the time axis formatted to show day names and the temperature axis using a linear scale. Built with React and D3 v5, it employs `scaleTime` and `scaleLinear` for scaling, and D3's `line` with `curveNatural` to generate the path. Axis components create SVG groups with ticks and labels, while reusable components manage scales, data loading via `csv`, and margins.

AAdriel Gomez

88% match

Loading thumbnail…

Line Chart

This line chart visualizes temperature over time using data from the Data Canvas Sense Your City Dataset. Rendered with React and SVG, it uses D3 v5's `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` to plot a smoothed path and circular points. The chart includes labeled axes with tick marks formatted via `timeFormat('%a')`, and hovering over a point reveals its timestamp.

Wwindwaver

83% match

Loading thumbnail…

Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset, plotting temperature against timestamps. The chart uses a line path rendered with d3.line and curveNatural, while employing scaleTime and scaleLinear to map the data domain to pixel coordinates. The React component structure includes custom AxisBottom and AxisLeft components for tick marks, with d3.timeFormat to display abbreviated weekday labels. The SVG rendering leverages D3 v7 within a React framework, showing a smooth natural curve through the temperature data points.

Rrmgoldberg24

83% match

Loading thumbnail…

Line Chart w/ d3, react

This interactive line chart visualizes temperature changes over time using the Sense Your City dataset, rendered as an SVG graphic within a React application. The chart employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperature values, while custom React components encapsulate the axes and data marks. The line path is drawn using D3’s `line` and `curveNatural` functions, with axis ticks generated via `xScale.ticks()` and `yScale.ticks()`. Data is loaded asynchronously using D3’s `csv` parser, and the interface responds to JSON data fetched from a remote GitHub gist.

Sshreyan2020

82% match

Loading thumbnail…

Stylized Line Chart - working with time

This stylized line chart visualizes temperature readings over time from the Sense Your City dataset. Built with React and D3 v6, it uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering an SVG path with natural curve smoothing via `curveNatural`. The minimal design includes custom axes from `AxisBottom` and `AxisLeft`, Poppins typography, and a muted color palette, with x-axis labels formatted as abbreviated weekday names using `timeFormat`.

Ee-ines

82% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature measurements over time from the Data Canvas Sense Your City dataset. The data is rendered as a smooth, natural curve using D3’s `line` and `curveNatural` functions, displayed as a thick teal path within an SVG. Axes are labeled “Time” and “Temperature”, with ticks styled in muted grays and a Poppins font applied throughout. The React application loads CSV data via `d3.csv`, maps timestamps and temperatures, and uses `scaleTime` and `scaleLinear` with `extent` and `nice` to set domains and ranges.

Rreo440

82% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature variations over time using the Data Canvas Sense Your City dataset, loaded via d3.csv. The React-based application renders an SVG with a natural curve path (d3.line with curveNatural) linking data points, while d3.scaleTime and d3.scaleLinear map timestamps and temperature values to axes. The axes, built with custom React components, display weekdays and temperature labels using d3.timeFormat. The chart omits individual data point markers, emphasizing the smooth curved trend line with a teal stroke styled through CSS.

Nnorangai

82% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset. A smooth, natural curve traced through the data points emphasizes the overall trend. Built with React and rendered as SVG, the chart uses D3 v5 functions like `scaleTime`, `scaleLinear`, and `curveNatural` to construct the path. Custom axis components generate a clean, minimal design with styled tick marks, and the Poppins font contributes to the polished aesthetic.

Ssarahdays

81% match