SessionTimeLog

100%

SessionTimeLog

✓ Published0🌍 Public

Last edited Apr 16, 2018

Created on Apr 16, 2018

SessionTimeLog visualizes user session start and end times across multiple dates as horizontal bars on a 24-hour linear time scale, with user IDs ordered along the y-axis. Each bar encodes a session duration, colored by user ID, and hovering highlights the bar in blue while a tooltip appears. The visualization includes an interactive slider to step through dates, updating the chart to show sessions for the selected day. A legend and gridlines aid in comparing session times, and the animation effect comes from the slider transitions between dates.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/fall16mis/'>fall16mis</a>'s block: <a href='http://bl.ocks.org/fall16mis/87a39bc00b1b356f78dfd0954f345444'>SessionTimeLog</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Day / Hour Heatmap

This heatmap visualizes the frequency of user sessions by day of week (rows) and hour of day (columns), with color intensity representing the recorded value. Built with D3 v3 and rendered as SVG, the chart includes an animated transition that smoothly swaps between two datasets (data.tsv and data2.tsv) when triggered. The color scale maps low to high values to a sequential palette, and hover tooltips reveal exact values. The example is inspired by Trulia Trends, uses concurrent user session data from a development environment, and is MIT licensed.

663anp3ca

70% match

Loading thumbnail…

Worktime

This stacked bar chart visualizes worktime patterns by day, using a CSV file of start and end timestamps. Each bar represents a day, and segments within the bar show the duration of activities (e.g., “slq,” “edm”) between 7:30 AM and 7:30 PM. The chart uses D3 v4 with SVG, employing d3-dsv to parse data, d3-scale for positioning and color encoding, d3-axis for the time-based y-axis, and d3-shape for stacking. Hovering over a segment highlights it and displays a tooltip.

BBrunoDumas

69% match

Loading thumbnail…

Main visualization

This visualization shows trace logs from a system, plotting each trace's duration on the y-axis against its start time on the x-axis. It uses a time-based x-scale and a linear y-scale to position black bars representing individual traces, which are overlaid on colored background rectangles that cluster traces based on the length of their activity sequences. Clicking a bar triggers a popup displaying the trace's number, start and end times, and duration. The implementation uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `csv`, and `select`, rendering directly to SVG.

NNikki-gea

67% match

Loading thumbnail…

Vega-Lite API Template

This example shows a timeline of page visits, with a line mark for each session plotted against timestamps on the x-axis and page names on the y-axis, colored by session ID. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads data from a CSV file via d3.csv. It renders as an SVG that fits the window, using custom axis and label styling from a config object, with Vega Tooltip enabled for interactivity.

CCurran Kelleher

67% match

Loading thumbnail…

Time series

This example visualizes time-series data as rectangles plotted on a time-based scatterplot, showing how tracked values change across registration and validity periods. The visualization maps the start and end of each validity period to the y-axis and the registration timestamps to the x-axis, with open-ended intervals extended by seven days for display. The code uses D3 v7 APIs including `scaleTime`, `axisLeft`, and `axisBottom` to construct the plot, and it processes data from a static JavaScript array, rendering output as SVG in a full-screen view.

BBart van Pelt

66% match

Loading thumbnail…

World population area chart

This interactive area chart displays the duration and timing of 51 user traces, with each rectangle representing a single session’s start time along the x-axis and its length in minutes along the y-axis. Clicking a rectangle opens a popup showing trace number, start/end times, and duration. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and SVG elements, with background rectangles color-coding activity regions. Data is loaded from a local CSV file, and hover effects highlight individual traces.

NNikki-gea

66% match

Loading thumbnail…

Main visualization

This visualization displays traces over time as a vertical timeline, with each trace’s duration represented by a black horizontal bar positioned by start time. Background rectangles color-code traces by sequence length, while clicking a bar opens a popup showing trace details. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles, with axes and popup interactivity driven by `axisBottom`, `axisLeft`, and DOM event handlers. Data comes from a CSV file containing trace numbers, start/end times, and activity sequences.

NNikki-gea

65% match

Loading thumbnail…

Interactive Barchart

This interactive bar chart displays the volume of user behavior activity across 24 hours for a selected date. A dropdown menu allows the user to choose from unique dates in the dataset, triggering a smooth transition animation as bars grow to their new heights. The chart is rendered as SVG using D3 version 7, with bars that respond to mouse hover by dimming others and showing a tooltip with the hour and activity count. The code leverages D3's `transition` API, `join` for updating marks, and custom `menu` and `interactiveBar` modules, pulling data from a CSV file hosted on GitHub.

CChenYb9807

65% match