Line chart

100%

✓ Published0🌍 Public

Last edited Jun 25, 2021

Created on Jun 25, 2021

This line chart visualizes San Francisco temperature readings over a week, with a smooth natural curve connecting individual data points and circles marking each observation. Built with React and D3 v5, the visualization uses `scaleTime` for the x-axis, `scaleLinear` for temperature values, and the `line()` generator with `curveNatural` for the path. Axes, labels, and tick marks are rendered as SVG elements, with tooltips providing abbreviated weekday labels for each data point.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

A line chart displays temperature readings over time for a week in San Francisco, with a smooth curve connecting circular data points. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `line().curve(curveNatural)` for the path, and native SVG `<circle>` elements with `<title>` tooltips for points. Data loads as CSV via `d3.csv`.

CCatalina Vajiac

96% match

Loading thumbnail…

Line Chart

A line chart displays temperature over time across a week in San Francisco, using a smooth curved path and circular markers for each data point. The visualization is built with React and D3 v5, leveraging `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and `csv()` to load the dataset. SVG renders the chart, with tooltips showing the day for each circle via `timeFormat`.

Vvangenned

96% match

Loading thumbnail…

Line Chart

A line chart displays San Francisco temperatures over the course of a week, plotted with a smooth curved line and circular markers for each data point. Built with React and D3 v5, it uses `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for the axes, and the `d3.line` generator with `curveNatural` to create the path. SVG rendering includes reusable axis and mark components, with hover tooltips via nested `<title>` elements.

Rrstrauss127

95% match

Loading thumbnail…

Line Chart

This line chart visualizes temperature changes over time in San Francisco over a week. The visualization uses React to render SVG elements, with D3 v7 scales for positioning data points along time and linear axes. The chart displays a smooth curve connecting temperature readings using the D3 line generator with a natural curve interpolation. The data is loaded from a CSV file using D3's csv function, with custom axis components drawing tick marks and labels for both the date and temperature dimensions.

KK3zter

95% match

Loading thumbnail…

Line Chart

This line chart visualizes hourly temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses React to render SVG elements, leveraging d3-scale functions like `scaleTime` and `scaleLinear` for axes, and d3-shape’s `line()` with `curveNatural` to draw the smooth temperature curve. Data is loaded as CSV via d3.csv from a GitHub gist, with axis labels and ticks styled in a minimalist theme.

CCarlos Caballero

94% match

Loading thumbnail…

LineChart

This interactive line chart visualizes weekly temperature trends in San Francisco, plotting temperature readings across time with carefully styled curves and circular data points. Built with React 16 and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, while d3.line with a curveNatural interpolation generates smooth paths from CSV data loaded via d3.csv. The SVG rendering includes custom axis components with tick marks and labels, plus styled marks using a muted purple palette for the path and circles.

EEd Hutchinson

94% match

Loading thumbnail…

Line chart

This line chart displays temperature readings over time from a week-long San Francisco weather dataset. The visualization uses React with D3 v5 scales and axis components to render an SVG plot, with a smooth curve applied via d3.line() and curveNatural. A custom useData hook fetches the CSV data and parses timestamps and temperature values. The chart includes labeled axes for time and temperature, with tick marks styled through CSS.

Ggayatrisridhar

94% match

Loading thumbnail…

Line Chart

This line chart tracks daily temperature fluctuations over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization renders as an SVG using React components for the axes and marks. The line path is drawn with `d3.line` using natural curve interpolation, while individual data points appear as circles with tooltips. Data comes from a CSV file loaded via `d3.csv`, and the scales use `d3.scaleTime` and `d3.scaleLinear`.

Mmbooch22

94% match