Fork of Stylized Line Chart

100%

Fork of Stylized Line Chart

✓ Published0🌍 Public

Last edited Mar 26, 2022

Created on Mar 26, 2022

This fork of a stylized line chart visualizes temperature over time from five cities. The React and D3 code renders an SVG with a natural curve connecting daily temperature data points, using scales from `d3.scaleTime` and `d3.scaleLinear`. Axes display weekday abbreviations and temperature values, styled with Poppins font and muted teal colors. The chart loads CSV data from a Data Canvas Sense Your City dataset via `d3.csv`.

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 readings over time from the Data Canvas Sense Your City dataset, rendered as an SVG with React. The chart uses D3 v5's `scaleTime` and `scaleLinear` to map timestamps and temperature values, while the `line` and `curveNatural` functions from D3 draw the smooth path. Axis ticks and labels are generated with D3's `timeFormat`, and the Poppins font styles the text. The code is structured into reusable components for axes, marks, and data loading via `csv`.

MMarvin

94% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset. The code uses D3.js functions such as `scaleUtc`, `scaleLinear`, and `timeFormat` to map timestamps to the x-axis and temperatures to the y-axis within an SVG rendered through React. A natural curve (using `curveNatural`) connects data points, with axis labels and tick marks styled via the Poppins font and a custom color palette from the CSS file.

SSabyasachi Goswami

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

91% match

Loading thumbnail…

Fork of Stylized Line Chart

This line chart displays temperature readings over time from the Data Canvas Sense Your City dataset. The visualization uses a natural curve to create a smooth, stylized path through the weekly temperature data points, with axes labeled "Time" and "Temperature." Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `curveNatural` to position and render the SVG line. The code loads CSV data via `d3.csv`, and includes modular axis and marks components that handle tick generation and path drawing.

AAndres de la Garza

91% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over a week using data from the Data Canvas Sense Your City dataset. The chart uses an SVG rendering with React components, where D3 v5 scales (scaleTime and scaleLinear) map timestamps and temperature values to pixel coordinates. A smooth line path is drawn using d3.line with curveNatural, while AxisBottom and AxisLeft components generate tick marks and labels. The visualization is currently incomplete, showing only the x-axis without the temperature line, y-axis, or data marks.

Wwdoucet

91% match

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing a smooth, stylized line chart rendered as SVG in a React application. The code uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the curved path, and d3.csv to load the weather data. A time format function labels the x-axis with weekday abbreviations, while the y-axis displays temperature values, with React components managing the marks and axis rendering.

Ssumukh-bharadwaj

91% match

Loading thumbnail…

Fork of Stylized Line Chart

This interactive chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, using a stylized line chart with rotated axis labels and a clean, minimalist aesthetic. The visualization is built in React with D3 v5's scale functions and line generator, using `curveNatural` for smooth path interpolation. SVG rendering, tick marks with custom colors, and a Poppins font create a polished, lightweight presentation. Axis components are separate, re-used modules, showing a modular approach to the chart’s construction.

AAmmar Ehab

91% match

Loading thumbnail…

Fork of Stylized Line Chart

This line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature against time. The SVG rendering uses React components with D3 scales (scaleTime, scaleLinear) to map the data points and a D3 line generator with curveNatural to create a smooth, stylized path. Axes are built using custom React components that leverage the D3 axis tick system, with a Poppins font and muted color palette applied via CSS.

Ppreethamkesa

91% match