Skip to main content
SimilarExport ZIP
100%

birthday guesser

✓ Published0🌍 Public
EEE2dev
Last edited Sep 30, 2016
Created on Sep 29, 2016

This interactive visualization presents a birthday-guessing game in which a calendar highlights a subset of dates and the user answers yes/no questions. The tool displays a year grid, and each of nine cards recolors days according to a shuffled set of magic numbers; the user’s answers progressively narrow the possible dates. The code uses D3 v4 with SVG and animations, drawing calendars via `d3.timeDays`, `d3.timeFormat`, and a quantized color scale, and handles the interaction with click events that advance through the cards.

AI-generated description

Here is the puzzle, I address with this block:

Can you guess a birthday (just 1 out of 366 days, i.e. no year) under the following conditions:

  • just ask 9 yes/no questions
  • all questions must be independent, i.e. one question must not depend on an answer of a previous question
  • answering the questions should be straight forward, i.e. any 6-year old kid can answer them

Similar vizzes

Loading thumbnail…

birthday guesser (unshuffled version)

This visualization presents a birthday-guessing puzzle where nine yes/no questions aim to identify a specific day of the year. It displays multiple color-highlighted calendars, one per question, with marked dates representing the possible birthday. The user answers each question by clicking a yes/no button. The visualization uses D3.js to animate the transitions between cards, revealing the solution by progressively narrowing down the calendar. A static calendar grid and interactive answer buttons make the process clear, and the final answer is shown after all questions are answered.

663anp3ca
93% match
Loading thumbnail…

birthday guesser (unshuffled version)

The visualization presents a set of nine monthly calendars, each highlighting a subset of days, which together encode a birthday through independent yes/no questions. A user answers whether their birthday appears on each calendar, and the code uses those answers to narrow the possibilities. The visualization uses D3.js v4 to render the calendars as SVG and animates the sequence of questions. The unshuffled version displays the days in their natural calendar order, allowing the user to track the guessing process step by step.

EEE2dev
91% match
Loading thumbnail…

Number guessing

This visualization presents a classic number-guessing card trick. It displays a series of shuffled cards, each containing a subset of numbers from 1 to 60, generated by a mathematical algorithm. The user answers "Ja" (yes) or "Nein" (no) to whether their chosen number appears on a highlighted card. After all cards are shown, the program calculates and reveals the hidden number. Built with D3 v4, it uses SVG elements and `d3.transition` for smooth card movements and the final dramatic fade-in of the solution.

EEE2dev
75% match
Loading thumbnail…

number guessing (english)

The example demonstrates the classic "magic number" card trick, where a user mentally selects a number between 1 and 60 and then answers yes or no as six shuffled cards are presented one by one. Each card contains a distinct subset of numbers, and the user’s cumulative yes/no responses are used to compute the hidden number. The visualization uses D3 v4 to render SVG cards and animated transitions, scaling each card to the foreground for interaction and shrinking it after each answer. The final solution is revealed with a slow text fade-in after the last card, using D3’s transition and style methods.

EEE2dev
73% match
Loading thumbnail…

family calendar

This radial calendar maps each family member’s birthday to an angle around a circle, with age increasing toward the center. A blue sweep highlights the current year’s elapsed days. Hovering reveals name, birth date, and age via a tooltip. The visualization is built with D3 v4, rendering as SVG, with birthdays loaded from a JSON file.

663anp3ca
70% match
Loading thumbnail…

Calendar Alternate Orientation v4 update

This calendar visualization displays daily fact counts for 2016 as an exploded month grid, with each day colored on a red-to-green scale based on value intensity using a d3.scaleQuantize and a polylinear color gradient. The code uses d3.timeDays, d3.timeMonths, and d3.timeYears to structure the layout, while d3.timeFormat handles date parsing and week/month calculations. A hover tooltip appears via d3.csv-loaded data, and the animation-ready SVG layout arranges months in rows with white grid lines separating cells.

BBBischof
70% match
Loading thumbnail…

circular calendar

This circular calendar visualizes a year as a ring of colored arcs, with each month shaded by season and individual days marked as small strokes. The visualization plots specific project dates (labeled DS, N, S, and special) as points on the ring, using a custom degree conversion from day-of-year. Built with D3 v4 and SVG, the code draws concentric arc segments via `d3.arc()`, positions them with trigonometric calculations, and applies CSS classes to color months, weeks, and days.

PPatrick Wojda
68% 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
67% match