Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ppavan vasamsetti
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from HTML Starter

This example demonstrates a D3.js v7 line chart that visualizes the profit trends of an automobile sales company from 1985 to 2024. The visualization uses SVG rendering with a band scale for the years on the x-axis and a linear scale for profit values (in millions) on the y-axis. Red circular points mark yearly data values with tooltips on hover, connected by a red line to emphasize trends. The chart includes labeled axes, a title, and uses the Poppins font, with margins calculated from the window dimensions for a responsive layout. The source data is fetched from a CSV file hosted on GitHub.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This area chart visualizes automobile sales in India from 2008 to 2024, highlighting the trend in annual sales figures. The visualization uses D3.js v5 with SVG rendering to draw both a smooth line and an area fill beneath it, employing `scaleTime` for the temporal x-axis and `scaleLinear` for the y-axis. Data is loaded from a CSV file, parsed with `d3.timeParse` for dates, and rendered with `line()` and `area()` generators using `curveBasis` for smooth interpolation. The chart includes labeled axes and a titled heading, with the area styled in a light green tone.

Ppavan vasamsetti
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a multi-series line chart comparing sales, profit, and expense data across 150 synthetic data points. The chart uses D3.js v7 to generate random values for each series, which are then plotted as three distinct colored lines using `d3.line()` and `d3.scaleLinear()` scales. The visualization includes axis labels, a title, and a manual legend, all rendered as SVG elements within a single `<svg>` container. The code explicitly handles margin calculations and applies `d3.axisBottom()` and `d3.axisLeft()` for axis generation.

Yyazneshpara2@gmail.com
84% match
Loading thumbnail…

Fork of HTML Starter

This multi-series line chart displays three synthetic data streams—sales, profit, and expense—across 150 indexed points. The visualization uses D3 v7 to generate the data and render an SVG line chart with distinct colored lines for each series. The chart includes labeled axes for the index and value, a chart title, and a manual legend identifying each line. The code uses d3.range to create the data, and d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft to construct the visualization.

Ssaiabhishekmunnangi@gmail.com
84% match
Loading thumbnail…

Fork of Fork of HTML Starter

A line chart visualizes cost data from 2000 to 2013, plotting expenses against time with a green line. The visualization uses D3 v5 to load CSV data, create time and linear scales, and render axes with custom tick styling. The chart highlights the upward trend in sales, with red axis labels and a bold title, set against a light blue background. The code employs d3.select, d3.csv, d3.scaleTime, d3.scaleLinear, and d3.line to construct the SVG-based chart.

NNandini Maddula
83% match
Loading thumbnail…

Fork of Fork of line chart section 3

This example displays car sales data from 2013 to 2021 as a single red line chart. The visualization uses D3 v5 with SVG rendering to plot years on the x-axis and total sales on the y-axis, incorporating linear and time scales. The code loads CSV data from a GitHub gist, then applies d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisLeft/axisBottom to construct the chart with grid lines and axis labels. The data parsing converts string years into date objects using d3.timeParse for proper time-based scaling.

RRadhakrishna246
82% match
Loading thumbnail…

Fork of HTML Starter

This dashboard presents three dark-themed D3 v7 charts visualizing monthly sales and profit data embedded as CSV strings. A bar chart highlights peak sales with an annotated circle on a square root scale, while a scatter plot maps sales against profit using ordinal color encoding for each month. A multi-series chart combines bars for sales and a monotone line with circles for profit, using dual axes. All charts use SVG rendering with grid lines and rotated axis labels.

GGorantla Sravani
82% match
Loading thumbnail…

Fork of Fork of Fork of D3 Starter

This visualization analyzes daily sales, revenue, and profit trends using two D3.js v7 SVG charts. A multi-series line chart displays all three metrics over time, while a combined chart overlays sales as bars with a profit line, both featuring custom tooltips and a styled interface using the Poppins font. The code loads CSV data via `d3.csv`, constructs scales with `d3.scaleTime` and `d3.scaleLinear`, and renders paths and bars with `d3.line` and `d3.axisBottom`, applying color-coded series and gridlines for readability.

Ssainishanthreddyk@gmail.com
82% match
Loading thumbnail…

Fork of Fork of D3 Starter

This visualization presents daily sales, revenue, and profit trends from a CSV dataset across two SVG charts. The first chart displays three overlaid time-series lines for each metric, with colored dots for each data point. The second combines bars for sales with a line for profit, using hover-triggered tooltips for interactivity. Built with D3 v7, it uses `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for path generation. Gridlines, axis labels, and a legend support readability.

Ssainishanthreddyk@gmail.com
81% match