Ellie's 423 project

100%

Ellie's 423 project

✓ Published0🌍 Public

Last edited May 28, 2020

Created on May 21, 2020

Forked from Untitled

This interactive mushroom identification tool lets users select cap size and color through two searchable dropdown menus. Built with HTML, CSS, and vanilla JavaScript, it uses DOM manipulation to toggle dropdown visibility and filter options via the `filterFunction` method, which compares input text against menu items. The page displays a mushroom logo and header while presenting categorical choices rather than rendering data, with styling defined in an external stylesheet using monospace font and green button accents.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

dropdownmenu rearchitect TEST (FINAL!!!)

This interactive scatter plot visualizes the Iris flower dataset, with dropdown menus that let users select which measurement (sepal length, sepal width, petal length, or petal width) appears on the x- and y-axes. The chart uses d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render axes and colored circles representing three iris species. A custom dropdownMenu module built with d3 data joins updates the plot whenever a selection changes.

Wweird_danger

58% match

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example demonstrates two hover-activated dropdown menus built with a clean CSS-only reveal mechanism, listing static options. While the menus themselves have no linked data, the code includes a D3.js v6 event handler that logs clicked items and a separate, commented-out selection script using `d3.select` to track multi-select options with custom styling. The primary interactive behavior shown is the click logging, while the dropdown functionality relies on CSS `:hover` states. The page uses plain HTML, CSS, and the D3 library for event handling, and serves as a minimal template for adding dropdown interactions.

Cc_peimann@coloradocollege.edu

58% match

Loading thumbnail…

Fork of HTML Starter

This interactive scatter plot displays the Iris dataset, allowing viewers to select which of the four flower measurements appear on the x- and y-axes via dropdown menus. The implementation uses D3 v5 with custom reusable functions for the scatter plot, dropdown menu, and color legend. Circles represent individual flowers, colored by species, and animate into position over two seconds when rendered. Axes include gridlines, and the color legend uses D3's ordinal scale with the category10 color scheme.

Rruubi0807@gmail.com

58% match

Loading thumbnail…

Attempt menus and colour

This interactive scatter plot explores the Iris dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via React dropdown menus. Hovering over the color legend for species fades unrelated points and highlights the selected group. Built with React and D3 v6, the visualization uses `scaleLinear`, `scaleOrdinal`, `csv`, `extent`, and `format` to render SVG circles and axes, with brush-free interactivity driven by React state hooks.

HHollyClarke19

57% match

Loading thumbnail…

JS For Beginners

A basic HTML form demonstrates food categorization with a dropdown menu of South Indian dishes and a quantity input, styled with a green theme and a submit button. The page loads d3.v4 from a CDN, but the JavaScript logic in `index.js` only adds an event listener that prevents form submission without rendering any visualization. The `food.csv` file contains static data with food names, categories, color tags, and age tags, though this data is not actively used by the current code. The example appears to be an incomplete starter project for future interactive data visualization work.

Kkavi-kumaran

57% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic interactive SVG fruit bowl in a web page. It uses D3.js to add a hover interaction: when the user mouses over the orange circle, D3 appends a text label saying “Orange” to the SVG; on mouse-out, the label is removed. The visualization is built with static SVG elements—a purple translucent background circle, an orange, a yellow, and a green circle—stylized via CSS and rendered using D3’s selection and event handling methods (`.on`, `.append`, `.remove`). The code uses HTML, CSS, and D3 v5 loaded from a CDN.

Ddanielstaal

57% match

Loading thumbnail…

HTML Starter

This example presents an interactive fruit bowl visualization rendered as SVG. It displays a light blue bowl containing an apple, an orange, and four grapes, with each fruit labeled on mouseover using d3.select and append operations. The code uses d3.v5 to bind mouseover and mouseout events, adding text elements dynamically to show fruit names. Styling is handled through external CSS, setting the page font color to orange.

MMenno1989

57% match

Loading thumbnail…

Untitled

This example presents an interactive scatterplot of the classic Iris dataset, allowing users to compare any two of the four measured flower features by selecting the x- and y-axes from dropdown menus. It uses D3 v5 to render an SVG with semi-transparent circles for each flower, color-coded by species (setosa, versicolor, virginica) and accompanied by a legend. The code demonstrates reusable D3 components, such as a drop-down menu factory and dynamically rendered axes, with all elements re-rendered when a new variable is chosen.

Mmmry310531

56% match