Skip to main content
SimilarExport ZIP
100%

Transaction History

✓ Published0🌍 Public
WWiebke
Last edited Jul 8, 2023
Created on Jul 8, 2023
Forked from ICE-7 Line Chart

This example shows a line chart of transaction history, plotting cost over time for a dataset loaded from a remote CSV file. The visualization uses D3 v5 (`d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`) to render an SVG line path, with labeled axes and a title. The code parses the CSV values, converts the date column to JavaScript `Date` objects, and applies margins to position the chart within a fixed 960×500 SVG canvas. Grid lines are drawn via tick sizes, and the line stroke is styled in blue.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This example shows a line chart tracking the cost of sales from 2000 to 2013, with time on the x-axis and cost on the y-axis. The visualization uses D3 v5 to load CSV data, apply a time scale via `scaleTime` and a linear scale via `scaleLinear`, and render axes with `axisBottom` and `axisLeft`. A `line` generator creates the path, with gridlines drawn through tick sizing and a red stroke styled in CSS. The SVG output is centered on a fixed 960×500 canvas.

MMounishSeeni
79% match
Loading thumbnail…

linechart

A line chart tracks cost of sales from 2000 to 2013, using a CSV dataset with year and cost columns. The visualization renders an SVG with D3 v7, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path. The chart includes labeled axes and a light green stroke, with red axis labels and a styled heading.

Iindushashi.g@gmail.com
76% match
Loading thumbnail…

linechart

This example displays the cost of sales from 2000 to 2013 using a simple line chart. It renders the data as an SVG path with a light green stroke, plotting yearly values on a linear scale against a band scale for years. The visualization loads data from a local CSV file using `d3.csv` and builds axes with `d3.axisBottom` and `d3.axisLeft`. The code explicitly sets chart dimensions, margins, and labels, emphasizing a straightforward demonstration of D3 v7’s line generator and scales.

NNukaShravanKumar
75% match
Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013, using a dataset loaded from a CSV file that pairs each year with a numeric cost value. The SVG chart, built with D3 v7, uses `d3.scaleBand` for the yearly x-axis and `d3.scaleLinear` for the cost y-axis. A single light-green path stroke is drawn via the `d3.line()` generator, with axis labels and ticks styled in red, showing a simple trend of fluctuating costs across the period.

Vvineelaramulapalli32
75% match
Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013, with each year plotted along the x-axis and cost values along the y-axis. The SVG visualization uses d3.scaleBand and d3.scaleLinear for positioning, while d3.line and d3.axisBottom and d3.axisLeft construct the path and axes. Data is loaded from a CSV file via d3.csv. The chart features a lightgreen stroke, red axis labels, and a styled title.

Mmn0658
75% match
Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013, with each year plotted along the x-axis and cost values along the y-axis. The SVG visualization uses d3.scaleBand and d3.scaleLinear for positioning, while d3.line and d3.axisBottom and d3.axisLeft construct the path and axes. Data is loaded from a CSV file via d3.csv. The chart features a lightgreen stroke, red axis labels, and a styled title.

Mmn0658
75% match
Loading thumbnail…

linechart

A line chart tracks the cost of sales from 2000 to 2013 using data from a local CSV file. The SVG visualization uses `d3.scaleBand` for the year axis and `d3.scaleLinear` for cost, with `d3.axisBottom` and `d3.axisLeft` rendering the ticks. A `d3.line` path with a lightgreen stroke connects the data points, and red text labels for "Year" and "cost" are positioned via SVG transforms. The chart is built with D3 v7 in an ES6 module.

Aaniteshterala2000
74% match
Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013 using data from a CSV file. The SVG visualization, built with D3 v7, maps years on a band scale and costs on a linear scale, drawing a light green path via `d3.line()`. Both axes are generated with `d3.axisBottom` and `d3.axisLeft`, accompanied by red axis labels. The chart highlights annual cost fluctuations, peaking in 2007 and showing notable variability across the period.

MManideeprenikindi
74% match