Skip to main content
100%

Disney World Waiting Time

✓ Published0🌍 Public
Eevadai55
Last edited May 4, 2022
Created on May 2, 2022
Forked from HTML Starter

This visualization shows average wait times for three Magic Kingdom rides—Pirates of the Caribbean, Seven Dwarf Mine Train, and Splash Mountain—across days of the month, with bars colored dark blue for weekends and a dashed grey line marking the overall average. Users select a ride via radio buttons, triggering a 2-second transition that updates bar heights and the average line. Built with D3 v7 and React, it loads CSV data from a GitHub repository, uses `d3.scaleBand` and `d3.scaleLinear` for axes, and includes a mouseover tooltip that displays date, temperature, and weekday. Rendering uses SVG with animated transitions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

When Same-Day FP+ Runs Out by Crowd Level at MK

This visualization shows how the availability of Disney World’s FastPass+ reservations for Magic Kingdom attractions changes with crowd level. A horizontal timeline displays each attraction, with bars indicating the hours when FastPass+ slots are still available. An animated toggle automatically cycles through low, medium, and high crowd levels every two seconds, updating the bar positions to reflect when availability runs out at each crowd level. Users can also manually select a crowd level by clicking the toggle. The chart uses SVG and transitions, with a legend and gridlines to support reading the data.

TTommyCoin80
66% match
Loading thumbnail…

D3 Visualization

This interactive visualization shows the on-time arrival rate for 17 different air carriers across each day of July 2022. A dropdown menu lets the user select an airline, which triggers an animated transition of the line chart to display that carrier’s daily performance, with the line’s color changing to match the selected carrier. The visualization is built with D3 v7, using `d3.csv` to load the trend data, `d3.scaleLinear` for the axes, `d3.line` for the path, and SVG animations via `.transition().duration(1000)` to smoothly redraw the line. The chart includes labeled axes for the day of the month and the on-time rate, and the interface is a simple HTML page with a D3-generated selection menu.

FFAN-666666
62% match
Loading thumbnail…

analysis of ages of visitors

This bar chart visualizes the age distribution of Disneyland visitors in Shanghai in 2016, with percentages for four age brackets from under 25 to over 46. The chart renders as horizontal bars with animated width transitions, using D3 v4's scaleLinear and scaleBand for positioning. Each bar shows its percentage label alongside, and the visualization draws from a Statista-inspired dataset. The SVG is built entirely with D3 selections and transitions, with a purple bar color and white text labels for the age groups.

RRainismZ
60% match
Loading thumbnail…

Average Delay Time and Delay Reason for various carriers

This visualization displays average departure delay times for various airline carriers, broken down by delay reason categories. Each carrier is represented as a grouped bar, with bar segments colored according to the type of delay, and a tooltip revealing the specific delay reason and average delay minutes on hover. Built with D3 v5 and rendered as SVG, the chart uses `d3.nest()` and `d3.mean()` to aggregate flight data from a GitHub-hosted CSV, with `scaleBand` and `scaleLinear` positioning the bars and an ordinal color scale mapping delay reasons.

JJosvin John
60% match
Loading thumbnail…

2018: Reactietijden horizontal bars

This visualization shows the 2018 response times for different priority categories using animated horizontal bars. The data is loaded from a local JSON file and rendered using D3.js v3 with SVG. Each bar is a bullet chart representing response times for critical, high, medium, low, and total categories. The code uses D3’s bullet chart plugin, which includes ranges, markers, and measures, and features a transition effect when the "Update" button is clicked, randomizing the displayed values with `d3.transition` and a linear scale.

MMisunoKitara
59% match
Loading thumbnail…

Average Delay Time and Delay Reason for various carriers

This visualization shows the average departure delay time and delay reason for various airline carriers, using color to encode the delay reason (Carrier, Late Aircraft, National Air System, Security, or Weather). A tooltip reveals the delay reason and average delay time on hover, and a multiple-select menu allows filtering. The chart is rendered as a stacked bar chart using D3 v5, with scales from `d3.scaleBand` and `d3.scaleLinear`, axes from `d3.axisLeft` and `d3.axisBottom`, and a custom `colorLegend` module. Data comes from a Flight Delay Analysis Dataset.

JJosvin John
59% match
Loading thumbnail…

Hawaii travel time data visualization

This interactive time-series visualization explores Hawaii tourism data from January 2018 to March 2022, sourced from the Hawaii tourism authority. Users select from twelve indicators—including visitor numbers, average party size, and accommodation preferences—via radio buttons, which re-render a React component that updates a D3 v5 SVG chart. The visualization combines scatterplot-style marks (SVG circles with tooltips) and a smooth line path using `d3.line()` with curve bundling, scaled by `scaleTime` and `scaleLinear`. The interface reveals how different metrics responded to the pandemic over varying durations, highlighting correlations between visitor volume, trip purpose, and lodging choices.

Yyigechen17
59% match
Loading thumbnail…

IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot displays the number of wait-time days from when a defensive asylum case entered the system to its exit, plotted against the entry date, with decision codes encoded by color. A dropdown menu filters the data by year, and hovering over the color legend fades unselected decision codes while tooltips show exact wait times. Built with React and D3 (v5), the visualization uses SVG elements, a time-scale x-axis that switches from year to month/day formatting depending on the selected range, and filters the dataset to show a "no data" message when a year has no entries. The dataset is loaded from a CSV URL.

GGeri D.
58% match