Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
Mmauleendertse@gmail.com
Last edited Apr 23, 2024
Created on Apr 23, 2024
Forked from HTML Starter

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3.js v7’s declarative API, including `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`, within a minimal HTML page. The SVG canvas fills the browser window, with circles sized at radius 5. Data is fetched as CSV from a remote Gist and parsed into numeric fields before being scaled and rendered. The example demonstrates a concise, modern D3 workflow for building interactive plots.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3 v7’s `csv` loader to fetch and parse the data, then renders circles with `scaleLinear`, `extent`, and axis helpers `axisLeft` and `axisBottom`. The plot is drawn as SVG, sized to the browser window, with fixed margins and no interactivity.

GGT-GillesTeuwen
94% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to point shapes. It uses the D3.js v7 library with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position and render the marks. The visualization also incorporates `axisLeft` and `axisBottom` for chart axes, and a custom shape legend generated with `symbolGenerator`. Data is loaded asynchronously from a CSV file using `csvParse` and rendered into a responsive full-viewport SVG.

Ssahithya.voleti@gmail.com
93% match
Loading thumbnail…

Fork of Fork of HTML Starter (reusable charts

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points to SVG circles, with axis labels generated accordingly. Two dropdown menus built with a custom `menu()` function let viewers switch which numeric columns are plotted on the x- and y-axes. Data is loaded asynchronously via D3’s `csv` method, and the visualization fills the browser window.

Mmauleendertse@gmail.com
93% match
Loading thumbnail…

Fork of HTML Starter

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal width for 150 flowers. Built with React and D3 v7, the visualization cycles through different column combinations every two seconds, updating the x-axis scale and re-rendering the SVG circles using a custom `scatterPlot` function. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while the animation is driven by `setInterval` and repeated calls to the chart’s render function. Circle positions are recalculated dynamically as the selected variable changes.

DDonald Bagwell
93% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica). The code loads the CSV data via D3's `d3.csv`, uses `scaleLinear` for both axes, and renders SVG circles with species-specific fills. Axis labels and ticks are generated using `axisLeft` and `axisBottom`, with the chart sized to the full window. This is a React-based D3 v6 example, rendered entirely in SVG.

Ssahithya.voleti@gmail.com
92% match
Loading thumbnail…

Fork of HTML Starter

This example shows a scatterplot of the Iris flower dataset, mapping petal length on the x-axis and sepal length on the y-axis. It loads CSV data with `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to set scales, and renders circles as SVG marks. Axes are added with `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window and is built with D3 v7 in a plain HTML page, with no React integration despite the metadata suggesting a fork.

Aaidarshafeev1@gmail.com
92% match
Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a scatter plot of the Iris dataset, mapping petal length against sepal length with circular marks. The code uses D3 version 7 with the `d3-selection-multi` extension to simplify attribute setting. It employs `scaleLinear` for axes, `extent` for domain calculation, and `axisLeft`/`axisBottom` for rendering ticks. The reusable `scatterPlot` function exposes setter methods for width, height, data, margins, and accessor functions, following a module pattern. The data is loaded asynchronously from a CSV file via `d3.csv`, with numeric parsing applied to each row before rendering as SVG circles.

Aatmr0
91% match
Loading thumbnail…

Fork of HTML Starter

The visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis for 150 samples. Each point is color-coded by species (setosa, versicolor, virginica), with tooltips revealing the exact measurements on hover. Built with D3 v7, the SVG chart uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. A legend and animated tooltip transitions provide clear interaction.

Mmadalahyndavi123@gmail.com
91% match