Fork of "InvoiceDate" and "Price" line chart visualization

100%

Fork of "InvoiceDate" and "Price" line chart visualization

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 23, 2024

Forked from "InvoiceDate" and "Price" line chart visualization

A scatter plot with connected line visualizes the relationship between product quantity and price using seven sample e-commerce items, each labeled with its full description. Circles in steelblue mark data points, while a line connects them in sequence. Built with D3 v7 and SVG, the code manually constructs axes as line and text elements, uses linear scales for both dimensions, and positions labels offset from each point.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

"InvoiceDate" and "Price" line chart visualization

This example shows a scatter plot of quantity against price, with each data point labeled by its coordinates. The SVG visualization uses D3.js v7 to create axes, axis labels, and steelblue circles plotted via `d3.scaleLinear` scales. The code explicitly draws the x- and y-axes as separate line elements, positions circles using `attr('cx', ...)` and `attr('cy', ...)`, and adds text labels using `enter().append('text')`. All data is hardcoded in a JavaScript array.

JJames Cruz

90% match

Loading thumbnail…

Fork of HTML Starter

This example shows a scatter plot of transaction data, plotting Quantity on the x-axis against Price on the y-axis using D3.js v7. The code defines a small inline dataset, sets up an SVG canvas with margins, and uses `d3.scaleLinear` to map data values to pixels. Circles are rendered with `d3.axisBottom` and `d3.axisLeft` adding the corresponding axes. The visualization is a minimal, static representation of the relationship between the two numeric variables.

PPriyank Singh

79% match

Loading thumbnail…

Fork of Fork of Fork of d3.js project

This scatterplot displays the relationship between Sales and Profit for five products, with each circle representing a product and positioned according to its sales and profit values. The visualization uses D3.js v3, loading data from a CSV file via `d3.csv` and rendering an SVG with `d3.select`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with linear scales (`d3.scaleLinear`) mapping the data ranges to the 500×400 pixel canvas. Steelblue circles mark the data points, while axis labels identify the measured variables.

Ssowjanyateppali4202@gmail.com

78% match

Loading thumbnail…

Fork of linechart

This fork of a line chart visualizes product sales trends from 2018 to 2024, with each product’s sales values plotted as a separate line and points. The chart uses D3 v7 APIs including `d3.csv`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` to render an SVG with axes, grid lines, and a legend. Data is loaded from a remote CSV file.

AAmrit Adhikari

78% match

Loading thumbnail…

Fork of Line Chart

This example displays a line chart of two ordered numerical variables, plotting date against value. It uses D3.js v4 to load CSV data and render an SVG path with a steelblue stroke. The code explicitly configures time-scaled x-axis and linear y-axis, with axis labels for “Numbers” and “Amount.” The visualization is built within a React-style HTML page, embedding d3.csv for data loading and d3.timeParse for date formatting.

Bbugfree55

78% match

Loading thumbnail…

Fork of reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes inventory data, plotting Quantity on the x-axis and Price on the y-axis. It alternates between two halves of the dataset every five seconds, switching the displayed points and updating the axes and circles accordingly. The code uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeCategory10` for coloring. The data is loaded from a CSV file, and the visualization renders in an SVG container with margins, axis labels, and animated transitions via `setInterval`.

Ssriram.official9@gmail.com

77% match

Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri

76% match

Loading thumbnail…

Fork of Line chart for electronics sales

This fork shows monthly electronics sales from January through June, with a steel-blue line tracing sales figures that peak in June. The chart uses D3.js v6 to render an SVG path via the line generator, with point and linear scales mapping months and dollar amounts. Axis labels are added using d3.axisBottom and d3.axisLeft, while a fixed dataset is defined inline in the script.

Ppriyapravallika44@gmail.com

76% match