Skip to main content
SimilarExport ZIP
100%

Line Graph Trial

✓ Published0🌍 Public
Hhafsa2020
Last edited Feb 20, 2020
Created on Feb 20, 2020
Forked from Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization over time, with dropdown menus allowing users to switch between metrics and coin types. The code uses D3 v5’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path, with smooth transitions via `d3.transition`. Data is loaded from a local `buildings.json` file and parsed using `d3.timeParse`. A React framework is present, though the rendering and animation are handled directly through D3’s SVG and transition APIs.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization trends over time, with dropdown menus to select the metric (price_usd or market_cap) and coin type (bitcoin, ethereum, litecoin, ripple, or bitcoin_cash). The SVG chart animates transitions between datasets using `d3.transition()`, updating the line path, x-axis (time), and y-axis (linear scale) with a duration of 700ms. Data is loaded from `buildings.json` via `d3.json()`, with dates parsed using `d3.timeParse()`, and the y-axis labels are conditionally formatted (e.g., market cap shown in thousands with “k”).

DdeafMother
93% match
Loading thumbnail…

Line graph

A line graph displays daily high stock prices for CS Bank over time, with a red-to-green vertical gradient applied to the stroke. The chart includes labeled axes, a title, and a hover interaction that reveals the exact price at any point via a movable circle and text label. Built with React and D3.js v4, it loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the line using `d3.line` with a `linearGradient` fill. Interactive tooltips rely on `d3.bisector` for nearest-date lookup.

SSheela2930
76% match
Loading thumbnail…

Fork of Line Chart

This example shows the opening price of houses over time as a smooth, curved line chart. The visualization uses D3.js version 7 within a React component to fetch and process CSV data, scaling time on the x-axis and price on the y-axis. The line is rendered using the `d3.line` generator with `curveBasis` for smooth interpolation, while axes are manually drawn with `scaleTime` and `scaleLinear`. The chart includes labeled axes for "Months" and "Opening price," with styled tick marks and a title, all rendered as SVG elements.

Nneeharika2023@gmail.com
73% match
Loading thumbnail…

Line Chart

This line chart displays closing values over time, using a smooth natural curve to connect data points. The chart renders as an SVG with React components, leveraging D3 v5 functions including `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for scales and axes. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into Date objects. The visualization includes labeled x and y axes with tick marks, while the line itself uses a teal stroke with rounded joins, omitting point markers as indicated in the commented-out circle elements.

GGayan Priyadarshana
73% match
Loading thumbnail…

Line Chart- Data Visualization

This line chart displays Amazon’s stock price over time, with the year on the x-axis and price on the y-axis, using an SVG rendered with D3 v5. It loads a CSV dataset via `d3.csv`, parses dates with `d3.timeParse`, and maps data using `scaleTime` and `scaleLinear`. The chart includes labeled axes with gridlines, and draws the price trend as a single line path generated by `d3.line`.

AAditya Pujari
73% match
Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

SSheela2930
73% match
Loading thumbnail…

Line Chart w/ d3, react

This interactive line chart visualizes temperature changes over time using the Sense Your City dataset, rendered as an SVG graphic within a React application. The chart employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperature values, while custom React components encapsulate the axes and data marks. The line path is drawn using D3’s `line` and `curveNatural` functions, with axis ticks generated via `xScale.ticks()` and `yScale.ticks()`. Data is loaded asynchronously using D3’s `csv` parser, and the interface responds to JSON data fetched from a remote GitHub gist.

Sshreyan2020
73% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes the relationship between time and money sold, using data from the Data Canvas Sense Your City dataset. It presents a smooth, natural curve through the points, drawn with a thick teal stroke. The chart uses React to render SVG elements, with scales and axes created using D3's `scaleTime`, `scaleLinear`, `extent`, and `timeFormat`. The line's path is generated with D3's `line` and `curveNatural` functions, while the tick marks and labels are custom components. The visualization is styled with the Poppins font and a distinct color palette.

UUlbert Alain Odle
73% match