Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Line Chart

✓ Published0🌍 Public
AAkshat Mathur
Last edited May 27, 2021
Created on May 26, 2021

This fork of the Stylized Line Chart presents time-series data from the Data Canvas Sense Your City Dataset, plotting measurements over a temporal x-axis and temperature values on the y-axis. Built with React and rendered as SVG, it uses d3’s `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `timeFormat` to draw a smooth, single-line path without individual data points. The chart includes styled axes with tick marks and rotated axis labels, all styled via the Poppins font.

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 Fork of Stylized Line Chart

This chart displays temperature readings over time from the Data Canvas Sense Your City dataset, with the x-axis mapping timestamps and the y-axis mapping temperature values. The visualization uses React to render SVG elements, with D3.js handling the core data processing, scaling, and line smoothing through `scaleTime`, `scaleLinear`, `extent`, and `curveNatural` APIs. The line path is generated using D3's `line` function, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) manage axis ticks and the data visualization. The chart includes styled axis labels and a stylized line rendered with a thick, round-capped stroke.

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

Fork of Stylized Line Chart

This visualization displays temperature readings over time as a smooth, natural line within a scatter plot framework. The chart uses data from the Data Canvas Sense Your City dataset, loaded as CSV and rendered as an SVG. Built with React and D3 v5, the implementation leverages D3's `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `timeFormat` for axes, while the line path is styled with a custom stroke color and width, with axis ticks and labels using the Poppins font family.

SSampras Dsouza
92% match
Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays time-series temperature data from the Data Canvas Sense Your City dataset. It renders a smooth, natural curve through the data points using d3.line with curveNatural, React, and SVG. The visualization includes formatted time axis ticks, axis labels, and a clean, minimal design with custom Poppins typography. The useData hook loads the dataset via d3.json from the unpkg-hosted World Atlas TopoJSON file, though only the charting logic is exercised.

NNICHAPA
92% match
Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over time, using a smooth natural curve to connect data points drawn from the Data Canvas Sense Your City Dataset. Built with React and D3 v5, it renders SVG elements including axes, grid lines, and a path generated by `d3.line` with `curveNatural`. The code uses `scaleTime` and `scaleLinear` for scales, `extent` for domains, and `timeFormat` for tick labels. The map data is fetched as JSON with `d3.json` from the World Atlas TopoJSON.

KKonJoDot
92% match
Loading thumbnail…

Fork of Stylized Line Chart

This line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendered as a smooth, natural curve using React and SVG. The chart displays time on the x-axis with day-of-week labels and temperature on the y-axis, with gridlines and axis labels styled via CSS. Built with React components and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` to generate the path, while axis ticks are created through custom `AxisBottom` and `AxisLeft` components that leverage D3’s scale methods.

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