p — VizHub

100%

p

✓ Published0🌍 Public

Last edited Mar 25, 2022

Created on Mar 25, 2022

This example visualizes a week of temperature readings from San Francisco, plotting temperature over time as a smooth, natural curve. The chart displays time on the x-axis with weekday labels and temperature on the y-axis, both rendered using d3.axisBottom and d3.axisLeft. Built with React, the visualization uses d3.scaleTime and d3.scaleLinear to map data, and d3.line with curveNatural to draw the path. Data comes from the Sense Your City Dataset via CSV, loaded asynchronously with d3.csv.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with d3

This example visualizes one week of temperature readings from the Data Canvas Sense Your City dataset for San Francisco. A natural curve connects daily temperature points, with circles marking each measurement and a tooltip showing the day of the week. The chart uses a React component structure with D3 scales (`scaleTime`, `scaleLinear`) for axes and the `line` generator with `curveNatural` for the path. SVG rendering handles all marks, including custom tick components and axis labels.

MMonish Vassantrai

89% match

Loading thumbnail…

Working with time

This example visualizes temperature readings over time as a smooth, curved line chart, showing how temperature fluctuates across the days of a week. The data comes from the Data Canvas Sense of Your City dataset, specifically week temperature measurements for San Francisco. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `d3.line()` with `curveNatural` to generate the smooth path, and `timeFormat('%a')` to display weekday labels. The SVG rendering includes custom axis components and a styled mark path with rounded line joins.

PPiotr Paszek

89% match

Loading thumbnail…

Working with Time

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the horizontal axis and temperature on the vertical axis. The data is loaded from a CSV file using d3.csv, then rendered as an SVG through React components. The chart uses d3.scaleTime and d3.scaleLinear to map the timestamp and temperature values, while d3.line with curveNatural generates the curved path connecting the data points. Custom axis components and a simple tooltip via SVG title elements are included.

JJohn Huang

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

88% match

Loading thumbnail…

Working with Time

This visualization shows a week of temperature readings in San Francisco as a smooth line chart, with points marking each hourly measurement. The time axis uses a time scale and formats tick labels as abbreviated weekday names. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and custom `AxisBottom` and `AxisLeft` components to render the SVG. Data comes from the Data Canvas Sense Your City API, loaded via `csv`, with tooltips on points displaying the formatted timestamp.

Jjiro2017

88% match

Loading thumbnail…

Temperatures of SF

This visualization displays a week of temperature measurements in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The code uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, and d3.line with curveBasis to generate the curved path. Axes are rendered with d3.axisBottom and d3.axisLeft, while d3.extent computes the domains. The SVG is created with React and D3 v6, featuring labeled axes and a title.

MModalMBS

87% match

Loading thumbnail…

Time Lines

This example visualizes temperature readings over time as a smooth, natural curve with circular markers for each data point, drawn from a week of San Francisco weather data. The chart displays time on the x-axis and temperature on the y-axis, with tooltips showing the formatted day of the week. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `extent`, and the `line` generator with `curveNatural` to create the path. Axes are rendered via custom React components (`AxisBottom` and `AxisSide`) that leverage D3’s tick generation.

NNoelle Huchette

87% match

Loading thumbnail…

Temperature Line Chart Example

This visualization displays a week of temperature readings in San Francisco, plotting time on the x-axis and temperature on the y-axis as a smooth curved line. The chart includes labeled axes with grid lines and a title. Using d3.csv to load the data, the code leverages d3.scaleTime and d3.scaleLinear to map values, d3.axisBottom and d3.axisLeft for the axes, and d3.line with curveBasis to generate the smoothed path. The SVG is rendered within a React-compatible setup.

NNico Donovan

87% match