Fork of CV: Line Chart

100%

Fork of CV: Line Chart

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This multi-series line chart visualizes 150 months of simulated coffee business trends, comparing coffee sales, pastry sales, and customer counts. The visualization uses a dual y-axis: a left axis scaling sales figures in dollars and a right axis scaling customer volume, while the x-axis represents month increments. Built with React and D3 v7, the chart renders as an SVG, using `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.line` path generators for each series. A legend distinguishes the three metrics through color and a dashed stroke for customer counts.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Bar Chart

This example shows an interactive bar chart of coffee product sales, aggregating monthly units sold per product using d3.rollup and d3.sum. Built with React and D3 v7, the chart renders SVG bars that change fill color and stroke on click, with scales created via d3.scaleBand and d3.scaleLinear. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels added through d3 selection joins. Data loads from a CSV file, and the chart resizes responsively using a ResizeObserver.

Rrevanthdasari10@gmail.com

84% match

Loading thumbnail…

Fork of React & D3 Starter

A multi-line chart displays coffee shop performance over 150 days, tracking sales, profit, and customer counts as three colored paths (red, blue, green) against shared day and value axes. The example loads data from a CSV file using d3.csv, converts values to numbers, and renders the lines with d3.line, scaling positions with d3.scaleLinear and adding d3.axisBottom and d3.axisLeft. The visualization is built within a React component using refs and the d3-selection library, outputting to SVG.

Rrevanthdasari10@gmail.com

84% match

Loading thumbnail…

Fork of CV: Line Chart

This fork of the Observable Line Chart example plots website visitors over 90 days using a React component with D3 v7. The SVG chart displays an orange line connecting daily visitor counts, with linear scales mapping days to the x-axis and visitor totals to the y-axis. The code loads data from a CSV file using d3.csv, converts the values to numbers, and renders the line using d3.line with d3.axisBottom and d3.axisLeft for the labeled axes.

AAddiga Himesh Chander

80% match

Loading thumbnail…

Fork of React & D3 Starter

This chart displays monthly sales data from a CSV file as a light-blue area chart with a blue line overlay, using an SVG rendered in D3 v7 within a static HTML page. The x-axis uses a point scale for months, while the y-axis employs a linear scale for sales values. The code constructs the chart with `d3.area` and `d3.line` generators, and configures axes using `d3.axisBottom` and `d3.axisLeft`. It reads the data asynchronously with `d3.csv`, then applies margins and transforms to position the visualization.

Ppvvaishnavi93@gmail.com

80% match

Loading thumbnail…

Fork of Line Chart

This line chart visualizes sales figures by month, with data points marking each value along the trend line. The chart uses the D3.js library, specifically `d3.csv` to load the dataset, `d3.scalePoint` for the categorical month axis, and `d3.scaleLinear` for the sales axis. The visualization is rendered as an SVG, featuring a steelblue line and circles for data points, with labeled axes and a title. The code also demonstrates chained methods like `d3.select` and `d3.line` for constructing the graph.

445.saiful@gmail.com

79% match

Loading thumbnail…

Fork of CV: Line Chart

A line chart displays atmospheric CO2 levels over time using monthly measurements. The visualization is rendered as an SVG within a React application, utilizing D3 v7 methods including `scaleTime`, `scaleLinear`, `line`, and `axisBottom`. Data loaded from a local CSV file includes years, months, and CO2 values, with missing data points filtered out before scaling. The chart updates responsively based on container dimensions, allowing the line to adapt to resizing. Axes are labeled with date and CO2 level measurements.

KKota Charan Kumar Reddy

79% match

Loading thumbnail…

Fork of line chart

This fork of a line chart displays monthly electronics sales for 2023, using a point-based x-axis for months and a linear y-axis for sales values. The visualization loads CSV data from a remote URI, then renders axes with grid lines, labels, and a colored line path. It leverages D3’s `scalePoint`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators within a React app, with margins and a title included. The chart highlights sales trends across the year, emphasizing monthly fluctuations without converting month names to dates.

Rreddysushma994@gmail.com

79% match

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes monthly sales data for 2022, plotting sales figures against months. The chart uses D3 v5 and renders as an SVG, with a purple line connecting data points. It employs `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded from a CSV file via `d3.csv`, with axis labels and a title styled through CSS. The visualization includes gridlines via the y-axis tick size.

79% match