you-draw-it test

100%

you-draw-it test

✓ Published0🌍 Public

Last edited Sep 9, 2018

Created on Aug 20, 2018

This example demonstrates a “you-draw-it” interactive chart where viewers predict a data trend before revealing the actual values. It shows two sequential questions: the first presents a time series of annual values from 2015 to 2020, and the second asks for a single numeric estimate (17.1). The visualization uses the D3 v5 library alongside the `youdrawit` plugin, which handles the drawing and comparison interactions. The chart is initialized via a chained `.chart()` method with questions passed as data, and the plugin renders the drawing canvas and manages user input. No explicit data source is shown beyond the embedded sample values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

My quiz

This example shows an interactive quiz where users draw their own guesses for a set of questions, with each question presenting a small dataset of yearly values. The visualization uses a line-chart style prompt, asking viewers to drag a line from a starting point to estimate the data trend, and then reveals the actual result. Built with D3.js v5 and the youdrawit library, the code configures chart options, question data, and custom text labels through the `youdrawit.chart()` API. The rendering approach relies on D3’s selection and data-joining methods to handle the interactive drawing and result display.

EEE2dev

85% match

Loading thumbnail…

My quiz

This interactive quiz uses D3.js v5 to guide a user through a sequence of questions, where the first question displays a small line chart of annual values (2017–2020) and the second presents a single numeric answer. The visualization is built with the custom `youdrawit` library, which loads chart templates and styling from external CSS and JavaScript files. The code constructs question objects with headings and data, pushes them into an array, and then applies a chart instance to a div in the body. It shows how a lightweight, data-driven quiz can be assembled programmatically, relying on D3’s data binding and the library’s rendering methods.

EEE2dev

82% match

Loading thumbnail…

My quiz

This example demonstrates an interactive quiz where users draw their guesses onto a chart and compare them against reference values. It presents two questions: one about the percentage of left-handed people and another about the number of Winter Olympics volunteers over time. The visualization uses the D3.js v5 library and the custom `youdrawit` chart module, which relies on D3’s data-binding and event-handling APIs to let users drag lines or bars. Reference values are overlaid as dashed lines or ticks, sourced from the provided dataset. The implementation includes styling from a linked CSS file and configurable text for instructions and results.

EEE2dev

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

80% match

Loading thumbnail…

My quiz

This interactive quiz presents a series of five questions where users draw their guesses on a chart before comparing them to the revealed answer. The visualization shows both the user’s drawn line and the correct response, with data ranging from chicken flight duration to Winter Olympics volunteer counts. The code uses the `youdrawit` chart API, built on `d3.v5`, and loads question data from a gist. Each question’s answer is shown as a point or line, and the final question includes a multi-year series, rendered with axis limits and precision settings.

EEE2dev

79% match

Loading thumbnail…

My quiz

This example presents an interactive quiz where users draw their guesses for two questions: the percentage of left-handed people and the number of Winter Olympics volunteers. It shows reference values for comparison, with the bar chart using styled red ticks and a line chart featuring individual reference lines. Built with D3.js v5 and the you-draw-it library, it uses the `youdrawit.chart()` API to manage questions, reference values, and user-drawn interactions. The visualization is driven by data from a gist, with styled reference values via CSS classes like `question-referenceValues` and `referenceLine.line-myLine`.

EEE2dev

79% match

Loading thumbnail…

My quiz

This interactive quiz lets viewers guess answers to whimsical questions, such as a chicken’s longest flight or the share of left-handed people, by drawing their predictions on a chart. It uses the you-draw-it pattern, where each question’s subheading prompts a guess, and the actual answer is revealed as a reference line. The code relies on the D3 v5 library and the `youdrawit.chart()` API, with global settings for French defaults and score suppression. Data are hardcoded per question, including multi-point series for Winter Olympics volunteers, and axes are configured via `yAxisMax` and `precision`.

EEE2dev

77% match

Loading thumbnail…

My quiz

This example presents a quiz about the data journalism blog *datasketches*, where readers guess numeric answers to questions about the blog’s content. The visualization uses a “You Draw It” interaction: users drag a line or bar on a chart to input their estimate, then submit to reveal the correct value and receive personalized feedback. The implementation relies on the D3.js v5 library and the custom `youdrawit.min.js` plugin, with embedded HTML and CSS for layout and styling. Questions, answer ranges, and score-dependent feedback are defined in a JavaScript configuration array, while the data source is the quiz’s static, hardcoded questions.

EEE2dev

77% match