Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Apr 23, 2024

Created on Apr 23, 2024

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.

AI-generated description

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

Similar vizzes

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

81% match

Loading thumbnail…

Quantity vs. Price Scatter Plot visualization

This scatter plot visualizes the relationship between transaction quantity and price, with each data point represented as a steelblue circle positioned along linear axes. The visualization uses D3.js v7 within an HTML page, employing `d3.scaleLinear` for both x and y coordinates, `d3.axisBottom` and `d3.axisLeft` for the axes, and SVG rendering inside a `div` container. The dataset is hardcoded in the JavaScript file, and the chart dimensions are fixed at 600 by 400 pixels with defined margins, demonstrating a basic D3 scatter plot implementation with a React-friendly structure.

PPriyank Singh

80% 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

80% match

Loading thumbnail…

Fork of HTML Starter

This interactive line chart renders an SVG visualization of data points connected by a smooth curve, with a title and chart container styled via CSS. Built with D3 v5 and React, the visualization uses an SVG `<path>` element to draw the line, while JavaScript handles the data binding and coordinate scaling. The chart is presented on a fixed 960x500 canvas, demonstrating a minimal HTML, CSS, and JavaScript integration for a basic line chart display.

NNandini Maddula

80% match

Loading thumbnail…

Fork of HTML Starter

This example displays a scatter plot of housing data, mapping living area (GrLivArea) on the x-axis against sale price (SalePrice) on the y-axis. Each data point is rendered as a small green circle using D3.js selections and the `append("circle")` method. The visualization loads a CSV dataset from a remote URL via `d3.csv`, and constructs linear scales with `d3.scaleLinear` to position the circles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`. The plot is embedded within an HTML page styled with large, centered text.

Mmuzzheng

80% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu

80% 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

80% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes a scatter plot of gold-price data from a CSV file, animating between engine power and miles-per-gallon columns on a fixed axis. The visualization uses D3’s `csv` loader and a custom `scatterPlot` module, rendering SVG circles with a 5-pixel radius. A `setInterval` timer cycles the x-axis mapping every second, updating the chart via the plot function. The code demonstrates dynamic axis updates by re-invoking the plot with new accessors, while the y-value remains static, and the viewport dimensions are set to the window size.

NNanditha Reddy

79% match