Gist 567de3d395c93485d790f9d3a2c1977f

100%

Gist 567de3d395c93485d790f9d3a2c1977f

✓ Published0🌍 Public

Last edited Jul 8, 2016

Created on Jul 8, 2016

This visualization calculates the total watch time for all Laracast video lessons by parsing the duration text from the page. Using jQuery to select each `.Lesson-List__length` element, it splits the minutes and seconds from each duration string and accumulates them, converting excess seconds into minutes and minutes into hours. The script then formats the final sum into a zero-padded HH:MM:SS string and displays a message stating how many hours it will take to complete the series. The data comes directly from the Laracast website's lesson list, with no external server interaction.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 23c3fa2ac8adc645fc6c6d7a2d761a88

The visualization tracks daily exercise duration across May 2017, showing a repeating pattern where every fourth day records zero minutes. It uses a line chart built with D3.js, plotting dates on the x-axis and minutes on the y-axis via `d3.scaleTime` and `d3.scaleLinear`. The code reads the CSV data from the gist and draws circles and connecting lines, with resting days highlighted by points at zero. The chart emphasizes the regularity of rest intervals amid fluctuating workout times, sourced directly from the uploaded CSV file.

FFrank515

57% match

Loading thumbnail…

Gist 0741f09ac75691d8827393a472500145

This example visualizes daily active user counts by processing a hardcoded dataset of user IDs and their activity dates. It first concatenates all user activity date strings into a single delimiter-separated string, then uses an array of dates generated with Moment.js to count occurrences of each date in that combined string via string splitting and array length arithmetic. The result is a plain object mapping each date to its activity count, computed synchronously within a `console.time` block to measure performance. The visualization relies on native JavaScript array methods and Moment.js date formatting, with no external charting or rendering library involved.

AA6Brgeuka

57% match

Loading thumbnail…

subhash-linechart

This line chart visualizes weekly YouTube channel analytics, specifically tracking watch time in hours across 52 weeks. The chart uses D3 v7 scaleLinear, line, axisBottom, and axisLeft APIs to render the time-series data. Raw CSV data is fetched from a GitHub gist, parsed, and normalized before being bound to a steelblue line path. The SVG output includes labeled axes for weeks and watch time, with the x-axis formatted to display week numbers.

SSubhash

56% match

Loading thumbnail…

Gist ee5686347047ba8685a25aaa85169791

This visualization tracks the cumulative frequency of a list of integer adjustments, showing the running total as it evolves through the sequence. It uses D3.js to render a line chart on an SVG canvas, with the x-axis representing the step number and the y-axis the accumulated sum. The data comes from a plain-text file of frequency changes, reminiscent of the Advent of Code challenge. The implementation likely employs `d3.scaleLinear` and `d3.line` to map the data points and draw the path, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

BBBischof

56% match

Loading thumbnail…

Gist 76524cc382ca870dfbf872fd3c003d68

This visualization displays the time elapsed since a WordPress post was published, formatted as a human-readable string in Russian. It calculates the difference between the post’s publication timestamp and the current server time, then outputs the result using the `human_time_diff` function. The rendering relies on standard PHP and WordPress APIs within a template context, with no interactive or graphical elements beyond the textual output. The example demonstrates a simple server-side approach to relative time formatting, directly embedding the result into the page’s markup.

KKopylovVitalik

56% match

Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes

55% match

Loading thumbnail…

Gist ab5ccee1fb22209a4bcd0bd65dd71ca1

The visualization tracks a 31-day running plan by comparing planned distances with actual run times. It shows how each day’s planned mileage relates to the time spent running, with zero-mile rest days clearly marked. The code uses `d3.scaleLinear` for axes, `d3.line` for the distance and time paths, and `d3.axisBottom` for the day labels. Data comes from two CSV-like sources embedded in the gist, and the chart renders as an SVG with a smooth line for distance and a separate line for time, making the daily variation and rest-day pattern immediately visible.

FFrank515

54% match

Loading thumbnail…

The Arwen Report

This bar chart displays the hours played for video games in January, sorted from longest to shortest duration. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map game names and durations to SVG rectangles, with `AxisBottom` and `AxisLeft` rendering ticks. Data comes from a CSV file loaded via `d3.csv`, and tooltips show formatted duration values.

AArwen Sadler

54% match