Fork of Stylized Line Chart

100%

Fork of Stylized Line Chart

✓ Published0🌍 Public

Last edited Jan 9, 2023

Created on Jan 9, 2023

This fork of a stylized line chart visualizes temperature over time for a week in San Francisco, sourced from the Data Canvas Sense Your City dataset. The SVG chart, rendered with React and D3 v5, displays a smooth, natural curve using `line()` and `curveNatural` from d3, with custom axes via `AxisBottom` and `AxisLeft`. The Poppins font and teal color scheme style the visualization, while the data is loaded asynchronously via `csv()` from a GitHub gist.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes temperature over time for a week in San Francisco, using the Data Canvas Sense Your City dataset. The React application, built with D3 v5, renders an SVG with a time-scaled x-axis and a linear y-axis, and draws a smooth, natural cubic curve through the data points via D3's line and curveNatural functions. The chart includes styled gridlines, axis labels, and a Poppins font, with circular data markers commented out in the code.

Jjmeeks29ig

96% match

Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart visualizes San Francisco temperature trends over a week, with a smooth natural curve connecting data points. The chart loads CSV data from the Data Canvas Sense Your City dataset and renders time-scaled x-axis with day labels, paired with a linear temperature y-axis. Built with React, the visualization uses d3.csv, scaleTime, scaleLinear, and line with curveNatural to create the path. SVG rendering with Poppins typography and teal color accents provides a clean, modern aesthetic.

RReymond Mesuga

96% match

Loading thumbnail…

Fork of Stylized Line Chart

This interactive line chart visualizes temperature over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. The visualization is built with React and renders SVG elements, displaying a smooth, stylized curve generated using d3.line and curveNatural. The chart features labeled x and y axes showing time and temperature, with tick marks and axis labels styled in a custom Poppins font. The data is loaded asynchronously via d3.csv from a remote gist source, and the chart includes no interactive tooltips or additional marks beyond the line itself.

HHam1et

95% match

Loading thumbnail…

Fork of Stylized Line Chart

This line chart visualizes temperature readings over one week from San Francisco, using data from the Data Canvas Sense Your City dataset. Rendered as SVG with React, the chart connects data points with a smooth curved path and adds circular markers that show native tooltips on hover. The code builds axes with custom React components and leverages d3.scaleTime, d3.scaleLinear, d3.line with curveNatural, and d3.csv for loading. Styling uses the Poppins font and teal color accents for the line and circles.

Llena

95% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork visualizes weekly temperature data for San Francisco as a smooth, stylized line chart rendered with SVG through React. Using d3’s scaleTime and scaleLinear, the chart maps timestamps to the x-axis and temperatures to the y-axis, with a natural curve applied via d3.line and curveNatural for a flowing path. The data is loaded from a CSV using d3.csv, and custom React components (AxisBottom, AxisLeft, Marks) handle axis rendering and the line, while the Poppins font and muted teal stroke give the chart a clean, modern look.

SSteven Pearce

95% match

Loading thumbnail…

Fork of Stylized Line Chart

This example presents a stylized line chart tracking San Francisco temperatures over a week, sourced from the Data Canvas Sense Your City dataset. The visualization uses React with D3 v5 APIs, including `scaleTime`, `scaleLinear`, and `curveNatural` for the line path. SVG rendering displays a teal stroke and circular data points, with coordinate axes labeled “Time” and “Temperature.” The chart emphasizes a clean, minimal design with Poppins typography and muted colors, thereby transforming raw temporal data into an elegant, readable graphic.

RRecep Tiryaki

95% match

Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart visualizes temperature over time for a week in San Francisco, using a smooth natural curve to connect data points. The visualization employs React components with D3 scales (scaleTime and scaleLinear) to map data to SVG coordinates, with custom axis components rendering ticks. Data is loaded as CSV via D3's csv function from the Data Canvas Sense Your City dataset. The chart features a minimal, clean design with Poppins typography, muted axis colors, and a teal stroke for the temperature line, though circle markers are initially commented out.

YYannis Pagès

95% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart plots temperature over time using San Francisco week temperature data from a CSV file. The React-based visualization renders an SVG with a natural curve connecting circular data points, while the y-axis shows temperature and the x-axis displays abbreviated weekday labels. It uses d3.scaleTime, d3.scaleLinear, d3.line with curveNatural, and d3.csv for data loading. Axis components generate tick marks, and hovering over each point reveals the timestamp via SVG title tooltips. The chart features a clean design with Poppins typography and muted teal coloring.

LLyco Angelo Ty

95% match