Skip to main content
100%

Web game loading study

✓ Published0🌍 Public
Aadamscott
Last edited Aug 29, 2024
Created on Aug 29, 2024

This visualization tracks how long it takes a web page to load each of its resources, plotting connection phases like DNS lookup, SSL negotiation, and response time along a horizontal timeline. A brushable time-series chart shows aggregated load durations, while a linked table sorts individual requests by phase. The example uses `d3.brushX` for interactive selection and custom `d3.axisBottom` scales, with data parsed from a HAR file containing simulated network timings.

AI-generated description

Similar vizzes

Loading thumbnail…

Trend Chart (Area + Line)

This trend chart visualizes loading times across releases of a hypothetical web application, combining a line chart with an area chart. The median daily loading time is drawn as a bold black line, while percentile ranges (5%-95% and 25%-75%) are shown as shaded outer and inner areas in blue tones. Release markers are represented as orange (client) and green (server) lollipops along the x-axis. Built with D3 v3 using SVG and animation, the chart uses a basis interpolation for smooth curves and includes axis gridlines, a clipped plotting area, and a y-axis labeled "Reflection Time."

DDinoJay
67% match
Loading thumbnail…

Trend Chart (Area + Line)

This trend chart illustrates loading times across releases of a hypothetical web application, combining a line chart and area chart to display the daily median loading time as a black line and percentile ranges as surrounding shaded areas. The "lollipop" markers indicate application releases, with animated transitions. Built with D3.js v3, the visualization uses `d3.svg.area` and `d3.svg.line` to construct the paths, rendering to SVG with clipping and a legend.

OOrhanYaz
64% match
Loading thumbnail…

Gist 837424

This visualization shows the response time of a single HTTP POST request sent via `curl` to a test endpoint. A time series line chart plots the server’s response latency in milliseconds, with the x-axis representing sequential request attempts and the y-axis showing duration. The code uses `d3.json` to fetch the endpoint, then builds the chart with `d3.scaleTime`, `d3.axisBottom`, and `d3.line`. The data comes from the server’s JSON response, which contains timestamped latency values. The rendering relies on standard SVG elements generated through D3’s selection and join methods, with a hover tooltip provided by `d3.tip`.

Aabernier
64% match
Loading thumbnail…

Internet Line chart

This chart shows the average time spent surfing the internet for different ages, using a line graph with individual data points marked by circles. It plots age on the x-axis against average hours on the y-axis. The visualization is built with D3 v7, using `d3.csv` to load data from a remote file, `d3.group` and `d3.mean` to aggregate the data by age, and `d3.line`, `scaleLinear`, and `axisBottom`/`axisLeft` to render the line, scales, and axes as SVG elements.

BBhanuGadde@my.unt.edu
61% match
Loading thumbnail…

A matrix of grouped bar charts

This matrix of grouped bar charts displays upload and download speeds across two experimental variables, with each cell representing a unique combination of part size and HTTP thread count. The rows and columns conclude with aggregate charts summarizing data for each variable, while individual bars compare UP and DOWN throughput within each test. The visualization is rendered as SVG using D3 v3, employing ordinal scales for bar positioning, linear scales for axes, and d3-tip for tooltips. The underlying JSON data is loaded via `d3.json` and processed into a structured matrix.

BBBischof
61% match
Loading thumbnail…

Brush & Zoom : ITS Learning Behavior

This interactive line chart visualizes student learning behavior from an intelligent tutoring system, plotting five metrics—MCAS scores, correctness, average time, attempts, and hints—against count bins of student activity. Built with D3 v4, it renders five color-coded SVG lines with a focus+context design: a main chart supports brush-and-zoom navigation, while a smaller reference chart below shows the full dataset. Users can scroll within the main graph to zoom, and a reference line tracks the visible region. The chart animates transitions during brushing and zooming, with hover tooltips for data inspection.

ZZoeLeBlanc
61% match
Loading thumbnail…

Seismograph - almost

Four high-speed network lines—Partner, PCL, GOLAN, and DriveU—animate as a scrolling seismograph of throughput values in Mbps, moving leftward over a two-minute window. Built with d3.v6, the SVG paths use `line()` generators, a time-scaled x-axis, and a linear y-axis capped at 16, while a `transition` with `easeLinear` translates the clipped chart continuously. Data are parsed from the CSV and colored via an ordinal scale with `schemeCategory10`.

PPiotr Paszek
61% match
Loading thumbnail…

A matrix of grouped bar charts

This matrix of grouped bar charts visualizes network throughput data, organized by two variables (part size and HTTP threads), with each cell showing upload and download speeds for multiple tests. The matrix layout allows quick comparison across these parameters, while aggregate charts summarizing rows and columns appear along the edges. The visualization is built using D3 v4, rendering SVG graphics, and uses scales for positioning, axes for reference, and a tooltip library for interactivity.

BBBischof
61% match