Skip to main content
SimilarExport ZIP
100%

Quiz 4

✓ Published0🌍 Public
JJordan Chiu
Last edited Jan 27, 2020
Created on Jan 27, 2020

This example shows a simple interactive SVG visualization of three numbers that update on click. It demonstrates D3.js DOM manipulation by rendering text labels for an array, where each click doubles the values and updates the display. Using D3 v5’s `select`, `selectAll`, `append`, and `merge` APIs, the code manages entering, updating, and exiting elements dynamically from the SVG canvas. The initial view displays the numbers 1, 2, and 3, which transform to 2, 4, and 6 upon interaction, with no additional data source beyond the hardcoded array.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Test

This example demonstrates data binding in D3 v5, where a simple list of numbers is rendered as SVG text labels. Clicking the SVG triggers an update that doubles each value, showcasing the enter, update, and exit pattern through `d3.select` and the `data()` join. The visualization uses `selectAll("text")` to bind the array to existing elements, appends new text nodes on enter, repositions them with an `attr("x")` callback, and removes extras via `exit().remove()`. The initial data `[1,2,3]` is hard-coded and rendered within an SVG of fixed dimensions.

AAri Khuyagbaatar
78% match
Loading thumbnail…

Math test

A math quiz uses D3.js v3 with an SVG force-directed graph to display answers as draggable, colored circles. The visualization presents arithmetic questions and lets users select the correct result from a node layout, with feedback and score tracking. The code applies `d3.layout.force`, SVG circles, and CSS styling for interactive elements. Language and operation settings adjust quiz content, while checkboxes enable timed quizzes and sound, though the actual sound behavior is not implemented in the shown code. The interface also displays correct/incorrect counts and a timer.

EEE2dev
74% match
Loading thumbnail…

Learn d3.js

This example shows a minimal introduction to D3.js data binding using an array of five numbers. A static SVG container is set up in the HTML, while the JavaScript selects the body, binds the dataset to paragraph elements, and appends them with the corresponding text values. The visualization demonstrates the core `data()`, `enter()`, and `append()` pattern from D3 v4, alongside the use of `select()` and `text()`. It does not include interactivity or dynamic updates, serving purely as a basic learning exercise.

IIsmael Nóbrega
74% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, showing how text elements are added, updated, and removed in response to user clicks. Clicking the SVG doubles each number in the displayed array, triggering a re-render where existing labels shift positions, new labels enter as needed, and removed labels exit. The implementation uses D3 v5’s `select`, `selectAll`, `data`, `enter`, `merge`, and `exit` methods on SVG text elements, with click handling bound directly to the `svg` element. Data is a simple hardcoded array of integers rendered as text labels.

Aacongo
72% match
Loading thumbnail…

D3 functions

This example demonstrates D3’s data-join pattern with a set of circles plotted on an SVG canvas. Buttons trigger updates: “Remove” pops a data point, while “Modify” replaces a random point with new coordinates. Using `selectAll('circle')`, `enter`, `merge`, and `exit`, it shows how to handle entering, updating, and exiting elements. The code uses D3 v5’s `scaleLinear`, `select`, and `max`, with data defined as an array of `{x, y}` objects and rendering via SVG circles.

TTimothyMiage
72% match
Loading thumbnail…

Practice

Three buttons update a row of SVG circles and labels, demonstrating data joins with enter, merge, and exit selections in D3 v6. Clicking ABC renders green circles labeled A–C, DEF renders red circles D–F plus Y, and the initial view shows blue X–Z. The `selectAll('circle')` and `selectAll('text')` bind arrays of objects specifying fill color, y-position, and text, with transitions handled manually through the button click handler and a render function.

MMinwoo Pak
72% match
Loading thumbnail…

My quiz

This example presents an interactive quiz where viewers estimate values for each question before revealing the correct answer. The visualization uses a "You Draw It" pattern: after a user draws their guess on a chart, the actual data is shown for comparison. The code relies on the D3.js v5 library and the custom `youdrawit` chart API, which handles the drawing and scoring logic. Questions are defined as data arrays or single values, with optional units, precision, and axis limits. The interface is configured for German, with buttons and score feedback, though the score display remains commented out.

EEE2dev
71% match
Loading thumbnail…

Hello VizHub

This example renders a simple red SVG canvas populated with an array of five numbers in an empty group elements layout. It demonstrates basic D3.js data binding through the `selectAll` and `enter` selection pattern, using `d3.select` to append an SVG container and append group elements. The visualization serves as a minimal starter template for D3 v5 projects, with static styling controlled by an external stylesheet and ES6 module structure.

3343251455@qq.com
71% match