Stylised LineChart

100%

Stylised LineChart

✓ Published2🌍 Public

Last edited Jun 27, 2022

Created on Jun 27, 2022

This stylised line chart visualizes San Francisco temperature readings over a week. The SVG rendering uses React components for the axes and marks, with D3 v5's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` APIs to draw a smooth path. Data comes from the Data Canvas Sense Your City dataset, loaded via `csv`. The chart features circular points with tooltips, a Poppins font, and custom colors for ticks and the series.

AI-generated description

A scatterplot of the Data Canvas Sense Your City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. The visualization combines a smooth natural curve for the line path and circular markers with tooltips for each data point. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and renders as SVG. The chart features a Poppins font, teal color scheme, and custom axis styling.

Ttsys45gh

96% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature fluctuations over a week in San Francisco, using a smooth natural curve to connect data points from the Data Canvas Sense Your City dataset. The SVG rendering leverages React components, with D3’s `scaleTime` and `scaleLinear` for axes, and `line` with `curveNatural` for the path. Styling via the Poppins font and muted colors gives the chart a clean, modern aesthetic, while tick marks and labels are generated through custom `AxisBottom` and `AxisLeft` components.

RRajat Dangat

95% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. The chart displays time on the x-axis and temperature on the y-axis, with a smooth curved line connecting data points and circles marking each observation. Rendered as SVG in React, the visualization uses D3's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` APIs to construct the plot, with custom `AxisBottom` and `AxisLeft` components handling tick generation. The Poppins font and teal color scheme create a clean, modern aesthetic.

RRedSorrel

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

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperatures in San Francisco over a week, rendered as circles on an SVG canvas using React and D3 v5. The code loads CSV data via `d3.csv`, then builds scales with `scaleTime` and `scaleLinear`. Axes are custom React components with formatted tick labels using `timeFormat`, and each data point includes a tooltip via a `<title>` element. The Poppins font and muted color palette give the visualization a modern, clean aesthetic.

Llefat92

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

94% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature variations in San Francisco using the Data Canvas Sense Your City dataset. The chart displays a smooth, natural curve connecting temperature readings over time, with small circular markers positioned at each data point. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and d3.csv for data loading. The minimalist design features a teal color scheme, Poppins typography, and native SVG rendering with hover tooltips showing formatted dates.

Jjuanmy400

94% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. The chart plots temperature over time with a smooth natural curve, rendered as an SVG path using d3.line and curveNatural. Axes are generated with d3.scaleTime and d3.scaleLinear, while React components structure the visualization. The teal stroke, Poppins font, and labeled axes give the chart a modern, polished appearance. Data loading relies on d3.csv within a custom useData hook.

Bbroomc

94% match