Skip to main content
SimilarExport ZIP
100%

Model.js Dynamic Scatter Plot

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 11, 2015
Created on Sep 11, 2015

This dynamic scatter plot, built with model.js and D3, visualizes the classic Iris dataset, mapping sepal width and length to Cartesian coordinates. The visualization animates transitions when configuration values change, leveraging SVG for crisp rendering. The chart reads its data from a TSV file containing 150 measurements across three iris species, while a separate configuration file drives the x and y axis field selections, labels, and margins, making it a flexible, data-driven example for reusable chart components.

AI-generated description

An example model-driven scatter plot using model.js. Draws from the D3 scatter plot example.

Curran Kelleher 4/17/2014

Updated DOM creation pattern and posted to bl.ocks.org 9/10/2015.

Similar vizzes

Loading thumbnail…

D3 Example

This interactive scatter plot visualizes the classic Iris dataset, mapping sepal and petal measurements to positions and size. The visualization is built using D3.js and Model.js to create a reusable, reactive module, with SVG rendering. It responds to window resizing, adjusting its dimensions via CSS while maintaining a dotted border and hover effects on data points. Axis labels and tick formatting are configurable, and the chart is derived from example 106 of the "Introduction to D3.js" screencast series.

CCurran Kelleher
85% match
Loading thumbnail…

The Dynamic Reusable D3 Scatter Plot

This dynamic scatter plot visualizes the Iris dataset, with points representing individual flowers. It uses a reusable D3 module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes in SVG. Every two seconds, the x-axis attribute cycles through petal width, sepal width, petal length, and sepal length, automatically updating the scales and circles. Data is loaded via `d3.csv` from a GitHub gist, and the chart animates through these four feature comparisons.

AAndre J Denais
85% match
Loading thumbnail…

Dynamic D3 Scatter plot

This dynamic scatter plot visualizes the Iris dataset, cycling through four different measurements on the x-axis every two seconds while keeping sepal length on the y-axis. Built with React and D3 v7, it uses SVG rendering with scaleLinear for axes, extent for domains, and selection joins to update circles smoothly. The example demonstrates reusable chart components through a scatterPlot factory function, updating axis and circle positions as the x-value accessor changes via setInterval.

WWasanta Pruttisarikorn
85% match
Loading thumbnail…

Dynamic D3 Scatterplot

The dynamic D3 scatterplot visualizes the Iris dataset, cycling through petal width, sepal width, petal length, and sepal length on the x-axis every two seconds while sepal length remains on the y-axis. It uses SVG rendering with D3 scales, axes, ordinal symbols for species, and a reusable chart function following Mike Bostock's convention. The chart updates via `setInterval`, calling the chart with new accessor functions, while axes and labels adjust to data ranges extended by ten percent.

MMatthew Bruffey
84% match
Loading thumbnail…

Dynamic D3 Scatter Plot visualization

This dynamic scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct d3 symbol shapes. The SVG visualization uses d3.csv for data loading, d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for gridlines. It implements a reusable scatterPlot function with configurable accessors, margins, and symbol size, rendering marks as SVG path elements with translations. The plot fills the browser window and includes styled tick labels.

UUzoemeka Okechukwu Innocent
84% match
Loading thumbnail…

Dynamic Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying relationships between sepal and petal measurements. Users can dynamically switch which measurement appears on each axis using dropdown menus built with a custom D3 module. The visualization uses D3's `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `transition()` animates point movement when axis selections change. Circles enter with a radius-growing animation and smoothly transition positions over one second, with the SVG rendered in React.

AAbhinay-Mannepalli
84% match
Loading thumbnail…

Dynamic Scatter Plot including Species

This interactive visualization displays the Iris flower dataset as a dynamic scatter plot, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus let viewers select which quantitative or categorical attributes to plot on the X and Y axes, with smooth animated transitions updating the points and axes. The visualization uses D3.js scales, axes, and transitions within a custom React-based scatterPlot component, while the menu system leverages D3’s dispatch for event handling. Data is loaded asynchronously via d3.csv from a remote gist.

SSubhamChhetri
84% match
Loading thumbnail…

Scatter

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length for each sample. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render the axes and circles. The SVG is dynamically sized to the window, and the plot is encapsulated in a custom `scatterPlot` function with configurable margins, radius, and accessor functions. The code also includes commented-out code for cycling through different variables, and a custom Share Tech font styles the text.

AAlpineStranger
83% match