Skip to main content
SimilarExport ZIP
100%

Stylised Line Chart

✓ Published2🌍 Public
Aazharahmad0
Last edited Mar 27, 2021
Created on Mar 27, 2021

This stylised line chart displays temperature over time for a week in San Francisco, with a smooth natural curve connecting circular data points. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the CSV data, while `line` with `curveNatural` creates the curved path. SVG renders the axes, gridlines, and color-coded marks, with native `<title>` elements providing hover tooltips formatted via `timeFormat`.

AI-generated description

A scatter plot of temperature over time.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature over time for a week in San Francisco, using a smooth natural curve to connect data points. The visualization is rendered as SVG through a React application, with D3.js handling scales, axes, and line interpolation via `curveNatural`. Data is loaded from a CSV file using D3's `csv` function, featuring sparse, minimalist styling with Poppins typography and a teal color scheme.

Aahora
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes San Francisco temperature data over a week, using a smooth natural curve to connect individual data points. The chart is rendered with React and D3 v5, using `scaleTime` and `scaleLinear` to map the temporal and temperature axes, while the `line`, `curveNatural`, and `extent` APIs generate the path. The SVG output uses a teal color scheme with circular markers that include tooltips for hourly timestamps, and the plot is framed by custom tick marks from the `AxisBottom` and `AxisLeft` components.

HHumanistic Quality Management
95% match
Loading thumbnail…

Stylized Line Chart

A stylized line chart displays weekly temperature trends for San Francisco, plotting time against temperature in degrees. The visualization uses a smooth, natural curve to connect data points, with a clean, minimalist aesthetic featuring teal strokes and labeled axes. Built with React and D3 v5, it loads CSV data via `d3.csv`, scales time and linear values with `scaleTime` and `scaleLinear`, and renders axes and the path using SVG elements. The `curveNatural` interpolation from d3 shapes the line, while reusable React components define the bottom and left axes.

Yyinhao0424
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time, using a smooth, natural curve to connect the data points from San Francisco week temperature data. The visualization, built with React and D3 v5, renders as an SVG with axes and labels, employing d3's scaleTime, scaleLinear, line, and curveNatural functions. The chart's aesthetic is defined by Poppins typography, a muted color palette for ticks and labels, and a teal stroke for the path, with axis labels included for clarity.

Jjwlam83
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from San Francisco, plotting temperature against time with a smooth curve and circular markers. The visualization uses React to structure an SVG rendering, with D3 v7 providing the `scaleTime` and `scaleLinear` scales, the `line` generator with `curveNatural` for the path, and helper components for the axes. Data is loaded via `d3.csv` from a gist, and the chart includes interactive tooltips on each circle showing the formatted time and temperature value.

Ccaineosborne
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time for a week in San Francisco, plotted as a smooth curve using React with SVG rendering. The chart loads CSV data via d3.csv and scales time with d3.scaleTime and temperature with d3.scaleLinear. The line path is generated using d3.line with curveNatural to produce a smooth, organic flow between points. The minimalist design features a teal stroke, clean axes from custom React components, and the Poppins font, with the original dataset credited to Data Canvas Sense Your City.

Ssathishkanna11
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature over time for a week in San Francisco, using a smooth curving line in teal against a clean, minimal grid. The visualization is built with React and D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `d3.line` with `curveNatural` for the path, and `d3.csv` to load the Data Canvas Sense Your City dataset. Rendered as SVG, it features styled tick labels and Poppins typography, with temporary loading text displayed before data arrives.

TTajallah-maryam
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over a week in San Francisco, using a smooth natural curve to connect data points. The chart is built with React and rendered as SVG, with D3 v7 handling data loading via `d3.csv`, linear and time scaling through `scaleLinear` and `scaleTime`, and axis generation. Styling uses the Poppins font with teal-colored marks and custom tick formatting for weekday labels, while the underlying data comes from a CSV file containing timestamp and temperature values.

KKevin McMorrow
95% match