Fork of Stylized Line Chart

100%

Fork of Stylized Line Chart

✓ Published1🌍 Public

Last edited Mar 30, 2021

Created on Mar 29, 2021

This visualization displays a time series of temperature data, rendered as a line chart that switches between a refined line and a filled area representation. Built with React and D3 v5, it uses `d3.scaleLinear` and `d3.scaleTime` to map data to SVG coordinates, with `d3.area` for the area chart. Users can brush horizontally to zoom into the data, which triggers a level-of-detail reduction that switches between raw data points and aggregated min/max ranges, with circles drawn at high zoom levels.

AI-generated description

A scatter plot of Data Canvas Sense Yout City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This interactive line chart visualizes 20,000 synthetic temperature readings over time, rendered as SVG paths using D3’s `line` and `area` generators within a React framework. Users can brush horizontally to zoom into finer levels of detail, switching between area and line representations while tooltips display exact timestamps and values. The data is preprocessed into multiple levels of detail, reducing points per view to maintain performance. D3 scales (`scaleTime`, `scaleLinear`) and axis components handle the coordinate system, with brush interactions powered by `brushX` and event listeners.

RRajat Dangat

92% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization plots temperature readings against time, using a natural cubic spline to create a smooth, stylized line. The chart’s interactive hover tooltips appear on circular data points, and both axes are labeled with custom tick formatting. Built with React and D3 v5, it uses d3’s `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `line` and `curveNatural` functions from d3 to shape the path, sourcing data from the Data Canvas Sense Your City week temperature dataset.

TThiago Sawada

91% match

Loading thumbnail…

Fork of Stylized Line Chart

This chart displays temperature changes over time using a stylized line chart rendered with SVG in a React application. The line employs d3.line with curveNatural to create a smooth path, while d3.scaleTime and d3.scaleLinear map data to the axes. The visualization uses data from the Data Canvas Sense Your City dataset, with React hooks managing the data loading state and timestamp formatting via d3.timeFormat. Axis components generate ticks and labels using d3 scales, and the code uses the Poppins font for styling.

Fflamont

90% match

Loading thumbnail…

Fork of Stylized Line Chart

A fork of a stylized line chart renders temperature readings over time as a smooth curved path with circular points using an SVG and React. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `line().curve(curveNatural)`, and custom React components for axes and marks. Data is loaded via `d3.csv` from a weekly San Francisco temperature dataset, with tooltips showing weekday labels.

AAleksei Vozhdaev

90% match

Loading thumbnail…

Fork of Stylized Line Chart

This interactive line chart visualizes temperature readings over time, using a smooth, natural curve to connect data points. The visualization is built with React and renders to SVG, leveraging D3 v5 APIs including `scaleTime`, `scaleLinear`, and the `line` and `curveNatural` functions to compute the path. The chart’s axes are drawn with custom tick marks, and the dataset comes from the San Francisco week temperature CSV supplied by Data Canvas. Styling uses the Poppins font and a muted color palette applied through CSS rules targeting the SVG elements.

AAleksei Vozhdaev

89% match

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature readings over time as a smooth line chart, with a time-based x-axis and linear temperature y-axis. The chart uses React components with D3 v5 scales and the `line` and `curveNatural` generators to draw the curved path, while helper components render axes with tick marks and labels. The data originates from the Data Canvas Sense Your City Dataset, though the active dataset loads world country topologies via `d3.json` and `topojson.feature`, making the chart behavior partly exploratory. The SVG rendering includes styled axis lines, text, and a stroke-only path without visible data points.

DDavid Allyn

89% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over time, mapping the data to a line drawn with a smooth natural curve using D3’s `line` and `curveNatural`. The React app uses `scaleLinear` for both axes and renders the visualization as SVG, with reusable `AxisBottom` and `AxisLeft` components generating gridlines and labels. The data comes from a CSV of weekly San Francisco temperatures, though the chart hardcodes a static list of numeric values for the y-axis and uses an index-based x-axis.

Llhikarul

89% match

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart of temperature over time, using data from a CSV file loaded via `d3.csv`. The visualization uses React components to render an SVG with `d3.scaleTime` and `d3.scaleLinear` for axes, and a path generated by `d3.line()` with `curveNatural` for the line. The y-axis is fixed from 0 to 100, and the chart includes labeled axes and tick marks styled with custom CSS.

AAhmeTyAtakan

89% match