Skip to main content
SimilarExport ZIP
100%

Making a Line Chart - 01

✓ Published1🌍 Public
EEhtisham UL Hassan
Last edited Dec 1, 2021
Created on Dec 1, 2021
Forked from Working with Time

This example shows a line chart of weekly temperature data for San Francisco, with time on the x-axis and temperature on the y-axis. It uses D3 v5 scales (`scaleTime`, `scaleLinear`) and the `line` generator to create the path, while React components render SVG circles for each data point. The axes are built with D3 ticks and formatted using `timeFormat`, with data loaded from a remote CSV via `fetch` and `csvParse`. The chart includes labeled axes and tooltips via SVG `<title>` elements.

AI-generated description

Refactored Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Line Chart

This example demonstrates how to build a line chart in React, showing temperature over time for a week in San Francisco. The chart uses D3’s scales (`scaleTime`, `scaleLinear`) and line generator (`line()` with `curveNatural`) to draw a smooth path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG axes and the curve. Data is loaded asynchronously via `d3.csv` from a remote URL.

NNikhil Reddy Manda
93% match
Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature data for San Francisco, mapping timestamps to the x-axis and temperature values to the y-axis. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for scales, d3.line with curveNatural for the path, and d3.extent to set domains. SVG rendering includes custom axis components with timeFormat for weekday tick labels, while circle marks provide tooltips via the title element. The dataset is loaded from a CSV URL using d3.csv.

Llefat92
91% match
Loading thumbnail…

Working with Time-Line Chart

This example shows a line chart of weekly temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using React, with D3’s `scaleTime` and `scaleLinear` for axis scaling and `line` with `curveNatural` for the path. Data is loaded via `d3.csv` from a remote CSV file, and axes are generated using custom React components that call D3’s `.ticks()` method.

Rroc286
91% match
Loading thumbnail…

Line Chart

A line chart displays San Francisco temperatures over the course of a week, plotted with a smooth curved line and circular markers for each data point. Built with React and D3 v5, it uses `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for the axes, and the `d3.line` generator with `curveNatural` to create the path. SVG rendering includes reusable axis and mark components, with hover tooltips via nested `<title>` elements.

Rrstrauss127
91% match
Loading thumbnail…

Line Chart

This visualization displays a line chart of weekly temperature data for San Francisco, plotting temperature over time. The chart uses a D3 scaleTime for the x-axis and scaleLinear for the y-axis with nice rounding. React components handle the rendering, drawing SVG circles for data points and custom axis elements with tick marks. The data is loaded async from a CSV URL using the useData hook and D3's csv parser.

MMark Lam
90% match
Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature variations in San Francisco, using data from a CSV file loaded with d3.csv. The chart plots timestamps on the x-axis with a time scale and temperatures on the y-axis with a linear scale, both implemented using d3.scaleTime and d3.scaleLinear. The React component renders SVG elements, including a smooth path generated with d3.line, circular data point markers, and custom axes built with React components. The visualization is styled with Poppins typography and uses d3.extent to set domain boundaries.

AAnkit5ingh
90% match
Loading thumbnail…

Line Chart

A line chart displays weekly temperature measurements for San Francisco over time, with a single blue line and circular data point markers. The time axis runs horizontally with date labels, while the temperature axis is vertical. The visualization is built with React components and D3 v5 utilities, using `scaleTime`, `scaleLinear`, and `extent` to map data to SVG coordinates. CSV data is loaded from a GitHub repository using D3's `csv` function and rendered as an SVG path and circles.

BBetty
90% match
Loading thumbnail…

Line Chart

This line chart visualizes weekly temperature variations in San Francisco, plotting time on the x-axis against temperature on the y-axis. The React-based code uses d3.scaleTime and d3.scaleLinear to map data from a CSV file to SVG coordinates. Curved marks are rendered with d3.line, while circle elements provide hover tooltips displaying the weekday of each data point.

CChira Cezara Victoria
90% match