Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Line Chart

✓ Published0🌍 Public
KKonJoDot
Last edited Oct 25, 2022
Created on Oct 25, 2022

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.

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

Fork of Stylized Line Chart

This example shows a stylized line chart of temperature measurements over time, using data from the Data Canvas Sense Your City Dataset. The visualization features a smooth, natural curve rendered as an SVG path, with labeled axes for time and temperature. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for the scales, `line()` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components for ticks and labels. The data is loaded asynchronously via `useEffect` and `json`.

Zzenoalive
94% 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
94% 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
94% 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
94% 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
94% 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
93% 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
93% match