Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Jan 12, 2020

Created on Jan 12, 2020

This interactive example presents a system dynamics diagram using the GoJS library, letting users add stocks, clouds, variables, and valves to model material flows. The interface offers modal creation tools: users click buttons to switch between pointer, node, and link modes for building flow and influence connections. The diagram supports saving and loading models as JSON via the `GraphLinksModel`, with custom templates built in `buildTemplates()`. Node and link styling is handled through GoJS’s `GraphObject.make`, and the `NodeLabelDraggingTool` extension enables label repositioning through mouse move tools.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

System Dynamics

This example shows an interactive system dynamics editor for creating and editing stock-and-flow diagrams. Users can switch between pointer, node, and link modes to add stocks, clouds, variables, valves, and flows, with editable labels and adjustable link curves. The implementation uses GoJS Diagram, LinkingTool, ClickCreatingTool, and the NodeLabelDraggingTool extension, all rendered on an HTML canvas with animation disabled. The interface highlights mode-specific toolbar buttons and tracks node creation counts to generate unique identifiers.

JJoker-tr

81% match

Loading thumbnail…

System Dynamics

This example presents an interactive system dynamics model of a grass-sheep ecosystem using the GoJS diagramming library alongside D3. The visualization distinguishes between stocks (grass, sheep), clouds (external sources/sinks), valves (flow regulators), and variables (weather, wolves) that influence connections. Users can modify the underlying JSON model data, which defines nodes and links—both material flows and causal influences—and redraw the diagram. The interface supports creating new nodes and links via buttons, with custom categorization for flows versus influences, while a label-dragging tool adjusts node annotations.

JJoker-tr

76% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays material quantity on the x-axis against a selectable environmental indicator (PENRT, GWP, or AP) on the y-axis, with circle size encoding petal width and color encoding data point ID. The visualization uses React with SVG rendering, leveraging d3-scale for linear and ordinal scales, d3-scale-chromatic for the color scheme, and a custom Dropdown component to switch y-axis attributes. A button toggles between two hardcoded datasets with tooltips showing exact values.

MMatarTest

74% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between variables in an auto-mpg dataset by selecting which columns appear on each axis via dropdown menus. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration().delay()` to animate circles from the plot’s center to their new positions whenever a menu selection changes. The scatterPlot module builds SVG axes with tick lines and labeled text, while the dropdownMenu module generates the HTML select elements.

Aabcz1234

74% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationships between different variables in an automobile dataset by selecting columns from two dropdown menus to assign to the x- and y-axes. Built with D3 v7, it renders the data as semi-transparent red circles that animate into position when the axes change. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to construct the axes, and a reusable dropdownMenu component handles user input.

JJuyeonee

74% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users select which variables from the auto-mpg dataset appear on the x- and y-axes. The visualization renders circles in SVG with d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, while the custom dropdownMenu component triggers re-renders via onOptionClicked. Points animate from the center outward using transition().duration(2000), and axis labels update dynamically. The menus are built with plain HTML select elements, and the data is loaded via d3.csv.

Bbencestubnya

73% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino

73% match

Loading thumbnail…

Scatter Plot with Menus

This example shows an interactive scatter plot of the auto-mpg dataset, where dropdown menus let the user select which columns to display on the x- and y-axes. As the selection changes, the plot’s axes and data points animate to their new positions with a smooth transition. The visualization is built using the D3.js library (v5), leveraging its `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with circles rendered as SVG elements. The dropdown menus are created dynamically via a custom component that generates HTML `<select>` elements, and the plot updates instantly upon user input.

Iianleekq

73% match