Dinner App

100%

✓ Published4🌍 Public

Last edited Jul 8, 2020

Created on Jul 5, 2020

Two interactive panels let a user select ingredients to filter a list of dinner recipes. Clicking an ingredient toggles it between required, excluded, and neutral; the recipe list updates instantly to show only meals matching those constraints. The interface uses D3 v5 with SVG rendering, building ingredient buttons and recipe rows as groups of text and rectangles. Filtering logic in `filterRecipes.js` compares ingredient arrays, while `renderIngrs.js` and `renderRecps.js` manage the visual updates. All recipe data comes from an embedded JSON array in `recipes.js`.

AI-generated description

Creating a meal selection widget.

MIT Licensed

Similar vizzes

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

66% match

Loading thumbnail…

Menus

This example demonstrates a simple interactive menu system built with React and D3 v6, allowing users to select between two animal options—goldfish and cat. The interface displays a large label and dropdown select element, where changing the selection updates the component state and logs the chosen value to the console. The app uses React’s `useState` hook to manage the selected value and passes it to a reusable `Dropdown` component, which renders the native HTML `<select>` and `<option>` elements. The styling uses CSS to increase the font size of the label and select for better visibility.

CCarlos Caballero

66% match

Loading thumbnail…

Menus with React & D3

This example shows a simple HTML dropdown menu for selecting a car model, built with React and D3. It renders a static select element with four car options (Volvo, Saab, Mercedes, Audi) using React’s `ReactDOM.render`. The code imports the `arc` function from d3, though it uses no D3 drawing or data-binding APIs in the visible logic. The example demonstrates minimal integration of React components with D3’s function imports, providing a basic interactive form control without additional visualization.

NNika

65% match

Loading thumbnail…

Menus with react

This example shows how to create an interactive menu in React using controlled components. The app renders a dropdown of pet options, and the selected value is managed by React’s `useState` hook, logging each choice to the console. The reusable `Dropdown` component receives `options`, `id`, `selectedValue`, and an `onSelectedValueChange` callback, using the native HTML `select` element. The code relies on React 18 and ReactDOM for rendering, while D3 v7 is loaded but not explicitly used in the visible logic.

Jjackcaldwellnichols

65% match

Loading thumbnail…

click to select d3

Click-to-select interactions drive a dynamic fruit bowl visualization built with D3 v6 and SVG. Fruit circles render from local data using d3.scaleOrdinal for color and radius, with transitions animating entries, exits, and type changes over time. Clicking a fruit toggles a black stroke via a callback, while d3.select and data joins manage updates. The example loads D3 from UNPKG and demonstrates modular ES6 imports for reusable chart components.

RRITUZZ

65% match

Loading thumbnail…

Menu with D3

This example demonstrates how to add an interactive dropdown menu to a D3 visualization, showing the selected car brand as a text message. It uses D3’s data-join pattern to bind menu options to a `select` element, updating the displayed text when the selection changes. Bootstrap’s `form-select` class styles the dropdown, while D3’s `on('change')` listener updates the application state via the `setState` function. The code highlights a clean separation between UI rendering and state management, making it a practical template for incorporating menus into larger D3 projects.

CCurran Kelleher

65% match

Loading thumbnail…

dv.30 - menus w/ react

A pet-selection interface shows a dropdown menu listing six animals—dog, cat, hamster, parrot, spider, and goldfish—with the parrot preselected. A React state variable stores the current choice, and selecting a new value logs it to the console. The custom `Dropdown` component uses React’s `useState`, `onChange`, and `defaultValue` attributes, while D3 v5 and ReactDOM 16.9 are loaded via unpkg, with the menu styled through global CSS.

Zzach b.

64% match

Loading thumbnail…

Aggregated, Interactive Common Cocktail Ingredient Pairings

This visualization displays the top 20 most frequently used ingredients in cocktails, aggregated from a modified Hotaling & Co. dataset. A bar chart shows ingredient counts, while a dropdown menu filters results by base alcohol such as Gin or Rum. The React app uses d3.csv to load data, d3.nest and d3.rollup for aggregation, and d3.scaleBand and d3.scaleLinear for axes. User selections trigger filtering and re-rendering of the SVG marks.

Ssophburke

64% match