Skip to main content
SimilarExport ZIP
100%

Stylized Line Chart

✓ Published0🌍 Public
Tthomasjungcoe
Last edited Mar 16, 2021
Created on Mar 16, 2021

This stylized line chart visualizes the relationship between time and temperature in San Francisco, using data from the Data Canvas Sense Your City dataset. The visualization is built with React and rendered as an SVG, leveraging D3’s `scaleTime`, `scaleLinear`, and `curveNatural` to create a smooth, natural spline through the data points. The chart’s minimal aesthetic features a teal line with a thick stroke, styled tick marks, and a clean Poppins font for axis labels, with temperature plotted against a time axis formatted to display the day of the week.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature over time for San Francisco, plotted from the Data Canvas Sense Your City dataset. A smooth, natural curve connects weekend temperature readings, with the time axis formatted to show weekday abbreviations. Built with React and D3 v5, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveNatural` to render the path. The SVG output includes styled tick marks, axis labels, and a teal stroke, while the code includes commented-out circular markers and tooltips for potential interactivity.

Ddmljc
96% match
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
95% match
Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature changes over time for San Francisco using the Data Canvas Sense Your City dataset. The chart uses a smooth natural curve to connect data points, with a teal stroke and circular marks positioned along the path. Built with React and D3 v5, it employs `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `line().curve(curveNatural)` for rendering. SVG output includes custom axes with tick labels formatted as abbreviated weekday names via `timeFormat('%a')`.

SSuman Choudhary
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time in San Francisco from the Data Canvas Sense Your City Dataset. Using React and D3 v5, it renders an SVG with axes built from custom components and a smooth line path via d3.line with curveNatural. The chart uses scaleTime and scaleLinear for positioning, while the data is loaded asynchronously through d3.csv from a GitHub gist. Styled with the Poppins font and muted colors, the visualization omits data point circles, showing only the clean, flowing trend line.

Cchezydan
95% 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 line chart visualizes temperature readings from San Francisco’s week in the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. The data loads asynchronously via d3.csv, while React (with hooks) manages rendering of SVG elements. d3.scaleTime, d3.scaleLinear, and d3.extent set the scales, and d3.line with curveNatural draws a smooth, stylized teal path. Axis ticks and labels are generated by custom React components, with d3.timeFormat for abbreviated day labels and Poppins font styling.

Rrshormazabal
95% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization uses React to render SVG elements, with D3’s `scaleTime` and `scaleLinear` mapping timestamps to positions along the axes. A smooth curve is drawn using D3’s `line()` generator with `curveNatural` interpolation, styled with a teal stroke. The chart includes labeled axes for time and temperature, with tick marks formatted using `timeFormat`.

JJun Suzuki
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
94% match