Skip to main content
SimilarExport ZIP
100%

Stylized Area Chart with D3 and React-playing around

✓ Published1🌍 Public
NNita
Last edited Nov 14, 2020
Created on Nov 14, 2020

This stylized area chart displays temperature readings over time for a week in San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization uses smooth natural curves to connect data points, creating a flowing, organic shape beneath a dark outline. Built with React and D3 v5, the example renders as an SVG and uses d3.scaleTime and d3.scaleLinear for axes, d3.area with curveNatural for the filled path, and custom React components for axis tick marks and labels. The chart includes a Poppins font and a muted color scheme defined in the accompanying stylesheet.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Area Chart with D3 and React

This stylized area chart displays temperature readings over time from the Data Canvas Sense Your City dataset. It uses React to render SVG elements while D3 v5 handles the data loading, scales, axes, and the area generator with a natural curve. The dashed line is commented out, so only the filled area path is shown, rendered in steelblue against a clean white background. Axis components are built as reusable React functions, with tick marks and labels styled through CSS.

NNita
92% 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
92% 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
92% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature variations in San Francisco using the Data Canvas Sense Your City dataset. The chart displays a smooth, natural curve connecting temperature readings over time, with small circular markers positioned at each data point. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and d3.csv for data loading. The minimalist design features a teal color scheme, Poppins typography, and native SVG rendering with hover tooltips showing formatted dates.

Jjuanmy400
91% match
Loading thumbnail…

Stylised LineChart

This stylised line chart visualizes San Francisco temperature readings over a week. The SVG rendering uses React components for the axes and marks, with D3 v5's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` APIs to draw a smooth path. Data comes from the Data Canvas Sense Your City dataset, loaded via `csv`. The chart features circular points with tooltips, a Poppins font, and custom colors for ticks and the series.

CChris Knight
91% match
Loading thumbnail…

Stylized Line Chart

This visualization displays temperature variations over time for San Francisco, drawing from a week's worth of data from the Sense Your City dataset. The chart uses a smooth, stylized line to represent the temperature trend, with a natural curve applied via D3's `curveNatural` function, giving the path an organic, flowing appearance. Rendered in SVG within a React framework, the code leverages D3 v5's `scaleTime`, `scaleLinear`, and `extent` APIs to map data to axes, while the `AxisBottom` and `AxisLeft` components handle tick marks and labels. Styling is managed through CSS with the Poppins font, and a custom `Marks` component draws the data path.

Aaurelio-david
91% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time for a week in San Francisco, plotted as a smooth curve using React with SVG rendering. The chart loads CSV data via d3.csv and scales time with d3.scaleTime and temperature with d3.scaleLinear. The line path is generated using d3.line with curveNatural to produce a smooth, organic flow between points. The minimalist design features a teal stroke, clean axes from custom React components, and the Poppins font, with the original dataset credited to Data Canvas Sense Your City.

Ssathishkanna11
91% match
Loading thumbnail…

Stylised Line Chart with React & D3

This stylized line chart visualizes San Francisco temperature readings over a week, using a natural curve to connect data points and circular markers with hover tooltips. Built with React and D3 v5, it renders as an SVG, mapping timestamps to the x-axis via `d3.scaleLinear` and formatting tick labels with `d3.timeFormat`. The chart leverages `d3.line` with the `curveNatural` option for smooth paths, while custom axis components handle gridlines and labels. Data is loaded asynchronously from a CSV using `d3.csv`. The clean, minimalist design uses the Poppins font and a teal accent color.

Bbassra
91% match