Main visualization

100%

Main visualization

✓ Published1🌍 Public

Last edited Sep 19, 2020

Created on Aug 31, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Main visualization

This visualization displays trace data from a manufacturing process as a time-series chart. Black horizontal bars represent individual trace durations, while colored background rectangles indicate the trace’s activity sequence length, using red for longer sequences and blue for shorter ones. Clicking a bar reveals a popup with trace details. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG elements from a CSV file.

NNikki-gea

90% match

Loading thumbnail…

World population area chart

The visualization displays 51 logged user traces as vertical bars, where each bar’s height encodes the trace duration in minutes and its horizontal position corresponds to the trace’s start time. Colored background rectangles group traces by their activity sequence, distinguishing conforming from non-conforming patterns. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and coloring, while SVG `rect` elements handle rendering. Clicking a bar reveals a popup detailing the trace number, start and end times, and total duration.

NNikki-gea

81% match

Loading thumbnail…

World population area chart

This visualization displays 51 process execution traces as horizontal bars, with each bar representing a trace's duration in minutes along a time-based x-axis and a linear y-scale for duration. The chart uses blue and red background rectangles to highlight differing trace classifications. Clicking a bar reveals a popup showing trace number, start/end times, and duration. The code uses D3 v5 with `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG rectangles loaded from a CSV dataset.

NNikki-gea

78% 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

78% match

Loading thumbnail…

World population area chart

This visualization displays time-based trace data as a smooth line chart, plotting trace numbers against their start times on a date axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to create the curved path. Data is loaded from a CSV file, parsed into JavaScript Date objects, and rendered inside a margin-based coordinate system. Grid lines, axis labels, and a title complete the chart, which highlights the chronological distribution of trace events.

NNikki-gea

77% match

Loading thumbnail…

World population area chart

This chart shows the durations of five trace events as a horizontal bar chart, with the length of each bar representing the time elapsed between the start and end of each trace. The y-axis lists trace numbers, while the x-axis displays duration in minutes. Built with D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom` and `axisLeft` for the axes. The data is loaded from a CSV file and rendered as SVG rectangles, with styling applied via an external stylesheet.

NNikki-gea

77% match

Loading thumbnail…

World population area chart

This area chart displays the duration of five trace events from a CSV dataset, with trace numbers on the x-axis and duration in minutes on the y-axis. The visualization uses D3 v5 with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering steel-blue rectangles via SVG. Data is parsed from `data.csv` with timestamps converted to `Date` objects, and the chart includes grid lines, axis labels, and a title, with the y-axis formatted using D3’s `format` function.

NNikki-gea

73% match