Gist 79280caf928b23ee59ac2acd56d84be6

100%

Gist 79280caf928b23ee59ac2acd56d84be6

✓ Published0🌍 Public

Last edited Mar 23, 2020

Created on Mar 23, 2020

This example converts a conference schedule exported from Excel into a localized timetable by manipulating the displayed time values. It shows how the original EDT-based event times are recalculated to reflect the viewer’s timezone, using the browser’s `Date` object and `getTimezoneOffset()` to compute the offset. The script targets specific spreadsheet cells via `document.querySelector` and replaces the “EDT” label with “CET,” while adjusting each event’s hour and minute through string parsing. No external visualization libraries are used; the approach relies purely on vanilla JavaScript DOM manipulation.

AI-generated description

Similar vizzes

Loading thumbnail…

All the parts we use to convert dates on the page to local times

This example shows a set of JavaScript functions that convert date and time displays on a webpage into a user’s local timezone, and also classifies the age of each timestamp relative to the current moment. The code uses the jQuery library to select and modify DOM elements, calling methods like `$.parseUTCDate` and `$.edate.timeAgoInWords` to handle date parsing and formatting. It assigns CSS classes such as `age-new` or `age-fresh` based on the computed time difference, and updates the text content of each timestamp span accordingly. The data source is the timestamp text within the page’s HTML elements, processed entirely client-side.

CCaged

68% match

Loading thumbnail…

fresh block

This example demonstrates how to parse a date string containing a timezone offset and extract its local time components using D3’s time parsing utilities. It converts an ISO-like timestamp with a UTC offset into a JavaScript Date object via `d3.timeParse`, then reassembles the hours and minutes into a new string with a different format. The code uses `d3.timeParse` twice, first with a format that includes the offset and second without it, but does not render any visualization.

MMathReynaud

58% match

Loading thumbnail…

Schedule for Cultural Heritage at Scale

This schedule visualization uses a force-directed graph to map the two-day conference program, with nodes representing time slots, events, and locations. The code employs `d3.forceSimulation` to position linked nodes, while `d3.select` and `transition.attrTween` animate hover effects. Event nodes display titles as text, and color-coded clusters distinguish Thursday from Friday. The data comes from a Markdown table in `schedule.md`, parsed via JavaScript’s `fetch` and a custom regex parser. Location labels appear as fixed nodes, and tooltips use `d3.pointer` to show full session details on interaction.

CCliffordAnderson

57% match

Loading thumbnail…

Gist 1c6b00cb58b56b12c6eadc7b9c04038d

This example generates histogram data from email event timestamps, showing the relative frequency of events across the 24 hours of the day with values normalized so the busiest hour equals 1. The histogram filters out events tied to recipient email addresses longer than 40 characters, requires at least five valid events, and initializes all 24 hour buckets to zero. The code uses plain JavaScript object properties for the hourly counts and the `toFixed` method to round non-integer normalized values to two decimal places.

KKiwilicious

57% match

Loading thumbnail…

drag 'n drop test

This example presents a weekly timetable where a single course block labeled "Theo" can be dragged across a grid of five days (lundi through vendredi) and half-hour time slots. The visualization uses D3.js version 3 and underscore.js to render an SVG chart with separate axes for days and hours, along with a tooltip that appears on mouse movement. The code sets up drag behavior via `d3.behavior.drag` and scales time values using `d3.time.scale`, while the course data is stored as a simple JavaScript array with start and end times per day.

MMilowB

56% match

Loading thumbnail…

Gist 5001434

This example shows a debugging scenario for event sourcing, where two events with identical timestamps are replayed and returned in unpredictable order. The code displays two event objects—`UserCreatedEvent` and `UserCredentialsCreatedEvent`—with their UUIDs and aggregate root IDs, using JavaScript object literals. It illustrates the problem of sorting by `DateTime.Utc.Now` when fast-sequenced commands produce equal dates, leading to logical ordering failures. The example renders the raw event data and aggregates as plain text, relying on standard JavaScript syntax rather than any visualization library, focusing on the conceptual issue of timestamp collisions in EventStore queries.

RRestuta

56% match

Loading thumbnail…

Gist 42c5413995001df2d448d010b837dc33

This example visualizes daily user activity by counting how many user records reference each date. It shows a timeline of update frequencies derived from a hardcoded JavaScript object mapping user IDs to date-keyed booleans. The code builds a string of user IDs and their associated dates, then uses `String.split(date)` on that concatenated string to count occurrences of each date in the `updates` object. It relies on the Moment.js library to generate the last ten dates via `moment().subtract()` and formats them as `DD-MM-YYYY`. The rendering itself is absent—the example focuses solely on data aggregation logic, with no charting or DOM output.

AA6Brgeuka

56% match

Loading thumbnail…

Solution to the problem of merging overlapping calendar appointments.

This example demonstrates an algorithm that merges overlapping calendar appointments into non-overlapping time blocks, showing how a list of meetings with start and end times can be reduced to a concise schedule. The code implements a pure JavaScript function that sorts the input array, iterates through each meeting, and conditionally combines it with the previous entry when their time ranges intersect. It uses standard array methods like `sort` and `reduce`, along with helper functions for checking overlaps and updating the merged list, with the final result logged via `console.log`. The data consists of hardcoded meeting objects with numeric `startTime` and `endTime` properties.

PPeleke

55% match