Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jan 8, 2024

Created on Jan 7, 2024

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.

AI-generated description

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

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 D3 Scatter Plot2

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 flowers appears as a small circle positioned using D3’s `scaleLinear`, with axes generated by `axisLeft` and `axisBottom`. The code loads the CSV data via `d3.csv`, parses numeric fields, and renders the marks as SVG circles, with the chart sized to fill the browser window. The example uses D3 v7 within a React-independent HTML page.

Rroyable88

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7’s `csv` loader and `scaleLinear` for both axes, with `axisLeft` and `axisBottom` to render tick marks. The SVG circles are bound to data via `selectAll('circle').data().join('circle')`. The code loads data from a GitHub gist and sizes the chart to the full window, with margins and a fixed point radius of 5 pixels.

SSubhendu Karmakar

91% match

Loading thumbnail…

Fork of Hello HTML

This example shows an interactive scatterplot of the Iris dataset, plotting sepal width against sepal length. The visualization uses React to render SVG elements and d3.scaleLinear for both axes. Data is loaded asynchronously via d3.csv from a GitHub gist, with custom React components like AxisBottom, AxisLeftScatterChart, and CircleMarks composing the chart. The axes display tick marks and labels, while circles represent individual data points, all styled with CSS classes for a clean, readable layout.

IIgor T.

91% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each circle representing a flower sample. The visualization is built with React and D3 v7, using a custom `viz` function that creates linear scales via `d3.scaleLinear` and renders SVG circles with the data join pattern. Axes are added through `d3.axisLeft` and `d3.axisBottom` in a separate module. The code demonstrates a decoupled architecture where React manages the component lifecycle and D3 handles the drawing logic, with data loaded asynchronously via `d3.csv`.

CCheng Tang

90% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatterplot of the Iris dataset, plotting sepal length against petal length for each flower sample. The visualization is built with React and D3 v7, where React manages the component lifecycle and D3 handles the rendering of circles, axes, and scales. The visualization uses D3's `csv` loader to parse the data, `scaleLinear` for coordinate mapping, and `axisLeft`/`axisBottom` for the axes, all output as SVG elements.

SSimone Tolomelli

90% match

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris dataset, plotting petal length against sepal length. It uses `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG `circle` marks with a join operation. The chart is rendered in React with D3 v6, dynamically sized to the window, and includes axes via `axisLeft` and `axisBottom`.

JJetlinZ

90% match

Loading thumbnail…

Fork of Fork of React & D3 Starter-2

This example displays a scatterplot of the classic Iris flower dataset, using sepal length for the x-axis and petal length for the y-axis, with each point drawn as a semi-transparent circle. The visualization is implemented using React for the component structure and D3 v7 for the rendering logic, specifically leveraging D3's `scaleLinear`, `extent`, and axis functions to map data values to pixel coordinates. The SVG output is generated within a React wrapper that uses a `useRef` hook to pass the target element to the D3 visualization function. The data is loaded asynchronously via D3's `csv` parser, and the chart scales to the full size of the browser window.

RROU

90% match