Working stuff out - zz

100%

Working stuff out - zz

✓ Published0🌍 Public

Last edited Jan 15, 2020

Created on Jan 15, 2020

This interactive scatter plot visualizes the relationship between any two numeric variables from the auto-mpg dataset, with dropdown menus enabling users to select which columns appear on the x and y axes. The visualization uses React for menu state management and d3.v5 for SVG rendering, employing scaleLinear, axisLeft, axisBottom, and transition.attrTween for animated circle resizing. Circles are colored with a gradient based on their x-axis position using d3.rgb, and the axes include gridlines and labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Working stuff out - zz

This example presents an interactive scatter plot of the auto-mpg dataset, where users can select which numeric column to display on the x- and y-axes via dropdown menus. The visualization uses React for UI components and d3.v5 for rendering SVG circles, axes, and grid lines. Data points are colored based on their x-axis position using a custom color scale, and circles pulse with a brief transition animation when the axis selection changes. The code leverages d3’s `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `transition` APIs to update the chart smoothly.

Jjsong

95% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays the relationship between any two columns of the auto-mpg dataset, with dropdown menus to select which variables appear on each axis. The visualization uses React to manage the menu state, D3 v5 for both the SVG rendering and the scatterplot layout, and includes animated transitions where circles grow and fade into their positions whenever a new variable is selected.

RRichard Wong

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

85% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jjeelong

85% match

Loading thumbnail…

Scatter Plot with Menus X Y Only

An interactive scatter plot visualizes the Auto MPG dataset, allowing users to select which variables to plot on the X and Y axes via dropdown menus. Built with React and the Redux state management library, the visualization uses d3-component for componentized rendering. Points animate between positions when axes change, with a tooltip showing details on hover. The code leverages D3's scaleLinear and extent functions to compute scales dynamically from the selected data columns.

CCurran Kelleher

85% match

Loading thumbnail…

Menu-based automobile data summary

This interactive visualization displays a scatter plot of the classic auto-mpg dataset, with dropdown menus for selecting which numeric columns appear on the x- and y-axes. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.extent to compute domains. Selecting a new menu option triggers a re-render, where circles transition smoothly to new positions via the d3 transition method. Built with React and d3.v5, the visualization renders as SVG and includes formatted tick labels using d3.format.

BB Sundaresan

85% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays relationships between numeric attributes of the auto-mpg dataset, with dropdown menus above the chart letting users select which columns to plot on the x and y axes. As selections change, the axes and data points update with a smooth 2-second animated transition, where circles grow from the center and slide to their new positions. The visualization uses D3 v5 with reusable functions for the dropdown menu and scatter plot, employing d3.scaleLinear, d3.extent, d3.axisBottom and d3.axisLeft for scales and axes, plus SVG rendering with a transition delay based on data index for the staggered animation effect.

RRoger Yu-Hsiang Lo

84% match

Loading thumbnail…

Scatter Plot with menus.js

This interactive scatter plot from the auto-mpg dataset lets users explore relationships between numeric car attributes by switching the axes through dropdown menus. Built with D3 v5, it uses `d3.scaleLinear` and `d3.extent` for scales, with `d3.axisBottom` and `d3.axisLeft` for grid lines. A custom dropdownMenu module triggers re-rendering on selection, while transitions animate circles to their new positions using `transition.attr`. The SVG visualization includes styled labels and tick marks.

Ssunsun11166

84% match