Working with Time

100%

Working with Time

✓ Published2🌍 Public

Last edited Jan 8, 2022

Created on Jan 8, 2022

A line chart shows temperature readings over one week from the Data Canvas Sense Your City dataset. The visualization uses D3 v7 scales and axes to map time on the x-axis and temperature on the y-axis, with a smooth curve generated by `d3.line` and `curveNatural`. Rendered as SVG in a React application, the chart includes custom axis components and labeled axes.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

A line chart of weekly temperature readings from the Data Canvas Sense Your City dataset displays temperature over time. The React app uses D3 v5’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to render the SVG path. Custom `AxisBottom` and `AxisLeft` components generate ticks, while data is loaded via `d3.csv` with timestamps parsed as `Date` objects.

OOlof Ollerstam

93% match

Loading thumbnail…

Line Chart - from Working with Time

This line chart visualizes temperature readings over one week from the Data Canvas Sense Your City dataset, depicting time on the x-axis and temperature on the y-axis. The SVG visualization, built with React and D3 v5, uses `scaleTime` and `scaleLinear` for axes, and draws the line with `line().curve(curveNatural)` while rendering data points as circles with tooltips showing the timestamp. Styled with the Poppins font and teal marks, the example demonstrates natural curve interpolation for time-series data.

Aarock392

93% match

Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings from the Data Canvas Sense Your City dataset. It is a scatter plot with a smooth natural curve line connecting the points, where the x-axis represents time and the y-axis shows temperature in degrees. The visualization is rendered in SVG using React and D3 v5, leveraging `scaleTime` and `scaleLinear` for axes, and `line` with `curveNatural` for the path. Hovering over any circle reveals its exact timestamp via a tooltip.

MMichael Bergerson

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

92% match

Loading thumbnail…

Line Chart - from Working with Time

This line chart displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The React-based visualization renders as an SVG, using d3.scaleTime and d3.scaleLinear to map data from the Data Canvas Sense Your City dataset. A path generated with d3.line and curveNatural connects the points, while circle elements provide tooltips via the title tag. Axes are built programmatically using d3.timeFormat and custom React components for bottom and left ticks.

Ssophburke

92% match

Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The chart uses React components for rendering and D3 scales—specifically `scaleTime` and `scaleLinear`—to map the timestamp and temperature values from the Data Canvas Sense Your City dataset. Each data point is drawn as an SVG circle with a tooltip showing the formatted day. The visualization incorporates custom axis components that generate ticks and grid lines.

DDean Bozic

91% match

Loading thumbnail…

Working with Time

A line chart shows temperature readings over one week in San Francisco, drawn as a smooth natural curve across time. The visualization uses React with D3 v5 scales and axes, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering SVG elements. Data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, with time formatted as abbreviated weekdays. The chart includes labeled axes and a teal curve, with tick marks styled in muted gray.

BBenoit Mouly

91% match

Loading thumbnail…

Working with Time

This visualization displays a week of temperature measurements from the Data Canvas Sense Your City dataset as a scatter plot. The code uses React components to render SVG circles representing individual temperature readings, with D3’s `scaleTime` and `scaleLinear` mapping timestamps and temperature values to screen positions. Axes are built using D3’s `timeFormat` for weekday labels, and the hover tooltip shows the formatted date via an SVG `<title>` element. The chart is rendered with React, using D3 utilities for data loading and scaling.

SShmuel Leider

91% match