Line Chart with D3.js

100%

Line Chart with D3.js

✓ Published0🌍 Public

Last edited Mar 25, 2020

Created on Mar 25, 2020

This line chart visualizes the Bitcoin Price Index from December 2017 to April 2018, using historical data fetched from the CoinDesk API. The chart displays price trends over time with a red line, clearly showing fluctuations in Bitcoin’s value across the four-month period. The visualization is built with D3.js v4, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes. The data is parsed from JSON into date-value pairs, and the SVG rendering includes styled gridlines, tick labels, and an axis label for price in dollars.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with D3.js

This line chart displays the historical Bitcoin Price Index from December 2017 to April 2018, fetched live from the CoinDesk API. The data is parsed into date–value pairs and rendered as an SVG path using `d3.line`, with time and linear scales for the axes. A single line with a steelblue stroke shows the price trend over time, while axis labels are generated via `d3.axisBottom` and `d3.axisLeft`. The chart is built with D3 v4 and updates dynamically when the DOM content loads.

TTajallah-maryam

96% match

Loading thumbnail…

Line Chart with D3.js

This line chart visualizes the daily closing price of Bitcoin from December 31, 2017, to April 1, 2018, using data fetched from the CoinDesk API. The chart is drawn as an SVG using D3.js v4, with a time-scaled x-axis and a linear y-axis representing price in dollars. The line path is generated via `d3.line()` with rounded line joins and caps, styled in steel blue, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`. The dataset, parsed into date–value pairs, is rendered without additional point marks, focusing on the trend.

TTajallah-maryam

91% match

Loading thumbnail…

Learn D3.js

This interactive line chart visualizes Bitcoin’s historical price index from December 2017 to April 2018, using data fetched live from the CoinDesk API. The code parses the JSON response into date–value pairs, then renders an SVG path with D3’s `d3.line()` and `d3.scaleTime()`, alongside `d3.axisBottom()` and `d3.axisLeft()` for axes. The y-axis is labeled “Price ($)” and the single steelblue line is drawn without fill, with rounded line joins and caps. Data is loaded via `fetch` after the DOM content is ready.

Aaruba-haroon

89% match

Loading thumbnail…

Learn D3.js

This line chart visualizes the historical Bitcoin Price Index from December 2017 to April 2018, using data fetched from the CoinDesk API. The SVG chart displays price over time with a steelblue line, axis labels, and a rotated y-axis title. The example demonstrates D3.js v4's `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for building a complete, responsive chart from JSON data parsed into date-value pairs.

Pprincit

89% match

Loading thumbnail…

Line Chart ICE-7

This line chart shows the fluctuation of Bitcoin rates over time, with timestamps plotted on the x-axis and Bitcoin values on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate a smooth SVG path. Data is loaded from a CSV file via `d3.csv`, and margins, axis labels, and a title are styled with custom CSS. Gridlines are created through tick sizing, and the chart is rendered entirely as SVG.

Ssuchitra2602

80% match

Loading thumbnail…

Multi-Cryptocurrency Line Chart

This multi-cryptocurrency line chart visualizes the daily closing price of Bitcoin from 2013 to 2021, using a smooth curved line to show price trends over time. The chart includes labeled axes, gridlines, and a bold title, with data loaded from a CSV file hosted on GitHub. Built with D3 v6, the visualization uses `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `curveBasis` to render the SVG path.

Iiamsravan

78% match

Loading thumbnail…

BTC Closing Price - Line Chart

This line chart displays the closing price of Bitcoin from 2013 to 2021, with time on the x-axis and price on the y-axis. The visualization uses D3.js v6 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisBottom`/`axisLeft` with gridlines. Data is loaded from a CSV via `d3.csv` from a GitHub gist, originally sourced from Kaggle’s cryptocurrency price history dataset. Gridlines and clear axis labels enhance readability.

Ssenthilrajendran1

77% match

Loading thumbnail…

ICE 7: Line Chart

This example visualizes Bitcoin prices from 2008 to 2020 with a line chart. It uses D3 v5 to render an SVG, mapping years on the x-axis and costs on the y-axis. The code builds linear and time scales, adds axis labels, and generates a red line path from the loaded CSV data. The chart uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator.

PPYATA SHARAN

76% match