Fork of mapLinky

100%

Fork of mapLinky

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

Forked from mapLinky

This line chart visualizes temperature changes over time for a week in San Francisco, using data from the Data Canvas Sense Your City Dataset. The React-based application employs D3 v5 scales and the `d3.line` function with a natural curve to draw the smooth temperature path across a time-based x-axis. Both axes are rendered as SVG elements with tick marks, while CSS styling applies a consistent teal color scheme. The visualization loads CSV data asynchronously via `d3.csv` and updates the chart once the data arrives.

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

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

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

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

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

89% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization shows the variation of temperature over time in San Francisco for a single week. The data comes from the Data Canvas Sense Your City dataset and is rendered as a smooth, stylized line chart using SVG. The code, built with React and D3 v5, employs `line()` with `curveNatural` from D3 to create the curved path, while `scaleTime` and `scaleLinear` set the axes. The chart’s visual style, including the teal line and soft gray ticks, is defined in CSS, with interactive tooltips currently disabled.

Ttrissentety

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

89% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization shows a line chart of weekly temperature readings over time for San Francisco, with the data sourced from the Data Canvas Sense Your City dataset. The chart displays the temperature variable against a timeline, using a smooth natural curve to connect data points, rendered as an SVG within a React application. The code leverages d3.v5 APIs including `scaleTime`, `scaleLinear`, `extent`, and `curveNatural` for scaling and path generation, while the `csv` function loads the remote dataset, and custom React components handle axis and mark rendering. The chart features labeled axes, a minimal color palette of teal and gray, and tick marks styled via CSS.

JJoachim Klug

89% match