Fork of Stylized Line Chart-00

100%

Fork of Stylized Line Chart-00

✓ Published0🌍 Public

Last edited Feb 22, 2022

Created on Feb 22, 2022

This interactive visualization displays temperature readings over the course of a week in San Francisco, plotted as a smooth line chart using React and SVG. The chart filters the data to only show circular markers for temperatures at or above 25 degrees, with tooltips revealing the day of week for each point. Built with D3 v5, it uses <code>scaleTime</code> and <code>scaleLinear</code> for axes, <code>curveNatural</code> for the line path, and <code>csv</code> to load the dataset 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 displays temperature over time for a week in San Francisco, using a smooth natural curve rendered as a filled SVG area. The visualization relies on React for component structure and D3 v5 scales (scaleTime, scaleLinear) and shapes (area, curveNatural) to map data. Axes are built with custom React components using D3’s scale ticks. The dataset is loaded as CSV from a GitHub gist via d3.csv.

CCheng Tang

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays daily temperature variations in San Francisco over one week, using a smooth natural-curve line chart rendered as SVG within a React application. The chart pulls its dataset from a CSV file of the Data Canvas Sense Your City collection, loaded via the d3.csv function. Time-series data appears on the x-axis with a time-formatting tick function, while the y-axis maps temperature values using d3.scaleTime and d3.scaleLinear. The line path is generated with the d3.line and d3.curveNatural modules, with axis components built as custom React components that produce tick marks and labels.

Mmarianamartins87

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This chart visualizes temperature readings over the course of a week, sourced from a San Francisco dataset. A smooth line chart is rendered using D3’s natural curve interpolation. The visualization is built with React and D3 v5, utilizing `scaleTime` and `scaleLinear` for axes, `line()` and `curveNatural` for the path, and SVG elements for rendering. The interface loads data via `csv()` and includes interactive tooltips on data points. The chart features a minimal design with a custom Poppins font and muted color palette.

SSergio Scotta

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes weekly temperature trends in San Francisco using a smooth, stylized line chart with circular data points. The chart displays temperature over time, with axes labeled "Time" and "Temperature" and tooltips showing the day of week for each point. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveNatural` to render the path. SVG rendering with custom axis components and data from the Sense Your City Dataset provide the interactive visualization.

JJakob Waibel

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This React-based visualization displays a week of San Francisco temperature readings as a smooth, stylized line chart. The chart uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with d3.line and curveNatural generating the curved path. The data comes from the Data Canvas Sense Your City dataset, loaded via d3.csv and rendered as SVG elements including custom axis components and a hidden point layer.

RRochisman Datta

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature trends over a week in San Francisco using a smooth, stylized line chart. The chart, rendered as an SVG, displays time on the x-axis and temperature on the y-axis, with a notable absence of individual data point markers, emphasizing the overall trend. The visualization is built with React and D3 v5, leveraging D3's `scaleTime`, `scaleLinear`, and `line` APIs to map data and draw the curved path using `curveNatural`. The dataset is loaded from a CSV file via D3's `csv` function.

EEssoe21

94% match

Loading thumbnail…

Fork of Stylized Line Chart

An interactive SVG line chart displays temperature readings over a week in San Francisco, using a smooth curve to connect data points across time. Powered by React components and D3 scales, the visualization maps timestamps to the x-axis via `d3.scaleTime` and temperatures to the y-axis via `d3.scaleLinear`. D3’s `line` generator with `curveBasis` creates the stylized path, while custom axis components render ticks with `d3.timeFormat` for weekday labels. The data comes from a CSV file fetched with `d3.csv` from a GitHub gist.

SSharmaNirupam

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This React visualization displays a week of temperature readings from San Francisco as a smooth, stylized line chart. It uses d3-scale functions to map time and temperature data to screen coordinates, while d3.line with curveNatural generates the curved path. The chart is rendered as SVG, with axes and labels styled using the Poppins font. Data is loaded via d3.csv from a remote dataset.

Hhenry c

94% match