Fork of Stylized Line Chart

100%

Fork of Stylized Line Chart

✓ Published0🌍 Public

Last edited Jan 16, 2023

Created on Jan 12, 2023

A fork of a stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. The chart renders an SVG with React, using D3 v5 scales and the `line` generator with `curveNatural` to create a smooth path. Axes are drawn with custom React components, while a hidden set of circles includes tooltips via SVG `<title>` elements. The visualization applies a Poppins font and muted color styling.

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 weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. Built with React and D3 v5, it renders an SVG with a time-scaled x-axis and linear y-axis, using `scaleTime`, `scaleLinear`, and `curveNatural` to draw a smooth green line. The code employs reusable axis components (`AxisBottom`, `AxisLeft`) and a `Marks` component, with Poppins typography and custom tick styling for a polished presentation.

Pparshwa30122002@gmail.com

95% match

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

94% match

Loading thumbnail…

Fork of Stylized Line Chart

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.

JJenna Hamza

94% match

Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart visualizes temperature trends over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. The chart plots timestamp on the x-axis and temperature on the y-axis, with a smooth curved path rendered in SVG. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `curveNatural` from d3, with custom React components for the axes and marks. The visualization omits individual data points, focusing on the overall temperature curve.

RRenato Hermoza Aragonés

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes weekly temperature readings from San Francisco as a smooth, stylized line chart. Using the Data Canvas Sense Your City dataset, React components render SVG elements that map timestamps to a time scale and temperature values to a linear scale. The visualization employs d3.line with curveNatural to create a flowing path, while d3.scaleTime and d3.scaleLinear handle axis scaling. Custom axis components generate ticks and labels, with styling applied through Poppins typography and a teal color scheme for the path.

SShasvathan Pathmanaban

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This example uses React and D3 v7 to render a stylized line chart of weekly temperature data for San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization plots temperature over time using a smooth natural curve, generated with D3’s `line()` and `curveNatural` helper, with axes constructed from `scaleTime` and `scaleLinear`. Custom React components for the bottom and left axes render tick marks and labels, while the SVG path is drawn with a teal stroke and rounded line caps, set via CSS classes.

DDavid Brum Soares

93% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset. The React app uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, and a d3.line generator with curveNatural to draw a smooth path through the temperature points over time. SVG renders the chart, with Poppins font styling, muted gray axes, and a teal stroke. The code includes components for axes and marks, though circle markers are commented out, leaving only the curved line.

Cchar0496

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

93% match