N

Nikki-gea

@Nikki-gea·39 public vizzes

Loading thumbnail…

Drift Inspector

Drift Inspector visualizes event log traces to identify process deviations. It displays a scrollable list of detected drifts on the left, each showing a trace’s start and end timestamps, while the right panel reveals detailed change information, including the activity sequence and duration, upon clicking a drift. The example demonstrates JavaScript object and array manipulation by fetching trace data from a `traces.json` file using the Fetch API and rendering results with jQuery event handlers and DOM updates.

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.

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.

Loading thumbnail…

Drift Inspector

Drift Inspector visualizes process drift by listing event traces and their activity sequences, flagging those with fewer than ten activities as potential deviations. It shows trace metadata such as timestamps, durations, and activity order, and reveals the expected process rules upon selection. The interface uses jQuery for click handling and DOM updates, with a custom JavaScript fetch call to load trace data from a JSON file, displaying results across three styled panels.

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.

Loading thumbnail…

Untitled

This example shows an organizational chart displaying a company hierarchy, with nodes for employees like Mike, Jim, Alice, Bob, and Carol connected by manager relationships. It uses Google Charts’ OrgChart package, loading the visualization library from the Google CDN and drawing the chart into a div element. The data is defined via a `google.visualization.DataTable` with string columns for name, manager, and tooltip, and custom HTML formatting is enabled through the `allowHtml` option to style node labels and tooltips.

Loading thumbnail…

Drift Inspector

Drift Inspector displays a text-based report of process traces, highlighting deviations in activity sequences and timestamps. The visualization filters incoming data to show only traces with fewer than eleven activities, then formats each entry with a sequential "Drift" label and the trace's start and end times. It uses JavaScript modules to load JSON data via `getData`, transform it with `formatData`, and generate the final report with `generateReport`. The interface presents the output in a left-aligned panel, with hover effects changing the text color to blue.

Loading thumbnail…

World Contries Tree

This example visualizes the hierarchical structure of countries grouped by continent and subregion, using a horizontal tree layout from a JSON dataset. Parent nodes are labeled with larger text, and each leaf represents a country. The visualization is built with D3.js v5, using `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` for rendering SVG paths and text. Pan and zoom interactions are enabled via `d3.zoom`, with the tree rendered in an SVG container.

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.

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.

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.

Loading thumbnail…

Bowl of Fruit - General Update pattern

Five circles representing fruit shrink or resize as apples are eaten and one apple morphs into a lemon, demonstrating the D3 general update pattern. The animation uses `d3.scaleOrdinal` for color and radius scales, with D3's selection `.enter()`, `.merge()`, and `.exit()` transitions to handle data joins over a one-second duration. The JavaScript-driven example renders animated SVG circles with random IDs, updating the fruit bowl in response to timed array mutations.

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.

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.

Loading thumbnail…

Bowl of Fruit - Hover to select

Five pieces of fruit sit in a row as circles colored by type, either red apples or yellow lemons. Hovering over a fruit outlines it in black while the mouse is over it. Using d3 transitions with `attr` tweening, fruits animate in and out by scaling their radius, while updates such as removal or type change occur on a timer. The code uses `d3.select`, `scaleOrdinal`, and data joins with `.enter()`, `.merge()`, and `.exit()`.

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.

Loading thumbnail…

Customizing Axis

A horizontal bar chart displays population data for seven countries, ranked by size, with a customized axis. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars. Tick labels are formatted using `format('.3s')` to abbreviate numbers, replacing 'G' with 'B' for billions. Population axis tick lines extend across the chart, while the y-axis domain and tick lines are removed, and custom labels and a title are added.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes and CSS can combine to create a layered visual composition. The code uses raw SVG elements—circles, rectangles, lines, and a path—positioned within a `<g>` transform, with some shapes colored via inline `fill` attributes and others styled through CSS classes like `.lines`. A translated group adds a second set of shapes with custom colors and strokes, while `transform="scale(0.9)"` modifies the overall rendering. The result highlights basic vector drawing without any JavaScript libraries, relying solely on native SVG markup and external stylesheet rules.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between engine displacement and vehicle weight for a dataset of cars, with each point representing an individual car model. The chart uses D3 v5’s `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and SVG circles to render the points. Data is loaded as CSV from a remote source via `d3.csv`, with numeric fields parsed explicitly. Axes labels and a title are added using SVG text elements, while styling is applied through external CSS.

Loading thumbnail…

Process Change Visualization

This interactive application lets users explore process changes through a central visualization and two specialized inspectors. The main visualization and the activity and drift inspectors are accessed via prominent buttons on the landing page, with the overall layout styled through a fixed-position CSS. Built with D3.js (v5) and rendered as an SVG, the application's core `index.js` script manipulates the SVG canvas by setting its dimensions and appending a rounded rectangle. The interface provides navigation but does not reveal the underlying data or the specific visual encodings of the process changes themselves.

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page with a button that, when clicked, navigates to a second page displaying the text “Hello HTML.” It uses standard HTML, CSS, and JavaScript APIs, including `window.location.href` for navigation and `console.log` for browser developer tool output. The styling applies a large 13em font size and centered text alignment via CSS. It serves as a bare-bones template for showcasing basic web interactions without any external libraries or data sources.

Loading thumbnail…

Scatter Plot with menues

This interactive scatter plot displays the relationship between pairs of numeric variables from the auto-mpg dataset, with dropdown menus allowing users to select which columns are plotted on the x- and y-axes. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while the `dropdownMenu` function (built with D3’s `select` and `option` elements) handles menu interactions. Points appear with a staggered, animated transition (via `.transition().duration(1000).delay()`) as the axes update. The SVG rendering applies custom styling from the linked stylesheet, including semi-transparent red circles and large axis labels.

Loading thumbnail…

World Contries Tree

This example visualizes the hierarchical structure of countries grouped by continent and subregion, using a horizontal tree layout from a JSON dataset. Parent nodes are labeled with larger text, and each leaf represents a country. The visualization is built with D3.js v5, using `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` for rendering SVG paths and text. Pan and zoom interactions are enabled via `d3.zoom`, with the tree rendered in an SVG container.

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the viewport, its size derived from the browser’s client height and width. The piece uses D3 v5’s `select` to target the SVG element and appends a single `rect` with corner radius, creating a minimalist visual that demonstrates spatial framing without data. The rendering is pure SVG, styled by CSS to be fixed and fullscreen, leaving the canvas empty for the viewer’s interpretation.

Loading thumbnail…

Let's make an interactive map

This interactive map displays country boundaries on a natural Earth projection, with a light blue sphere and gray landmasses that darken on hover. The visualization uses D3 v5 and the topojson library to load and process world atlas data from a JSON file and a TSV file containing country names. The geoNaturalEarth1 projection and geoPath functions render the map as SVG paths, while the zoom component enables pan and zoom interactions.

Loading thumbnail…

Let's make a map with D3

This example renders a world map using D3 v5 and TopoJSON, loading country boundaries from the World Atlas TopoJSON dataset. It displays the Earth’s sphere in light blue and each country as a gray filled path with white strokes, projected using a Natural Earth projection. The code employs `d3.geoPath` with a `d3.geoNaturalEarth1` projection, and `topojson.feature` to convert TopoJSON data into GeoJSON features for SVG path generation.

Loading thumbnail…

Bowl of Fruit - Click to select

Five pieces of fruit sit in a bowl as colored circles, each clickable to select and highlight with a black stroke. As time passes, apples are removed, and one apple changes into a lemon, demonstrating data joins with enter, update, and exit selections. The visualization uses d3.scaleOrdinal for color and radius mapping, and d3 transitions animate the circle radii over one second. The code relies on d3 v5 and SVG rendering.

Loading thumbnail…

Bowl of Fruit - General Update pattern

A bowl of fruit demonstrates D3's general update pattern for enter, update, and exit selections. Five apples render as colored circles with labels inside a rounded rectangle bowl. After two seconds, an apple disappears; after three seconds, one apple changes into a lemon; after four seconds, another apple is removed. The code uses d3-selection's `selectAll`, `data`, `enter`, `merge`, and `exit` methods, along with `scaleOrdinal` for colors and radii, all rendered as SVG elements.

Loading thumbnail…

World population area chart

This visualization displays the number of sunny days per year from 1950 to 1971 as a filled area chart. The SVG rendering uses an area generator with a basis curve to create a smooth, flowing shape that emphasizes changes in annual values. The chart is built with D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` API from the d3-shape module. The data comes from a CSV file loaded via d3.csv, with the x-axis labeled “Year” and the y-axis labeled “Sunny Days,” accompanied by gridlines and a title.

Loading thumbnail…

World population area chart

This area chart visualizes world population growth from 1950 to 2015, with the x-axis representing years and the y-axis showing population in billions. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth filled path. Data is loaded asynchronously from a CSV file using `d3.csv`, with axes rendered via `axisBottom` and `axisLeft`. SVG is the rendering approach, and the visualization includes custom tick formatting that converts values like "G" to "B".

Loading thumbnail…

Temperature in San Francisco line chart

This visualization depicts a week of temperature readings in San Francisco, using a green area chart to show the trend over time. The chart is rendered as an SVG using D3 v5, with a time-scaled x-axis and a linear, niched y-axis. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` APIs to generate the plot, including custom styling for tick marks, labels, and the title.

Loading thumbnail…

Temperature in San Francisco line chart

This line chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to draw a smooth green path. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as `Date` objects and temperatures as numbers. The SVG renderer includes styled axis labels, grid lines, and a title.

Loading thumbnail…

Temperature in San Francisco scatter plot

This scatter plot visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents an individual measurement, colored green and sized at a fixed radius. Using D3 v5 with SVG rendering, the code loads CSV data from VizHub, parses timestamps and numeric temperatures, then applies `scaleTime` and `scaleLinear` for axes. Grid lines are generated via `axisBottom` and `axisLeft` with tick sizes, while custom labels and a title are added through appended text elements.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes population data for seven countries, using a categorical y-axis and a quantitative x-axis to show each nation’s total population as a large steelblue circle. The chart is rendered as an SVG using D3 v5, with scales created via `scaleLinear` and `scalePoint`, axes generated by `axisBottom` and `axisLeft`, and population tick labels formatted with `format`. The data is loaded from a CSV file, and the y-axis labels are positioned along a vertical scale.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of names and ages from a CSV file, with the x-axis mapping age and the y-axis mapping names. It uses d3.csv to load the data, d3.scaleLinear for the x scale, d3.scaleBand for the y scale, and d3.axisLeft and d3.axisBottom to render the axes. Bars are drawn as SVG rectangles with steelblue fill, and the chart is positioned inside an SVG element using margins. The code dynamically adjusts the scales based on the data’s maximum value and number of entries.

Loading thumbnail…

Let's make a face with D3

A yellow face drawn with SVG shapes animates its features. The eyes pulse by increasing and decreasing their radius, while the eyebrows shift down and back up, and the mouth curves in a smile. Built with D3 v5, the visualization uses `select`, `arc`, and chained `transition().duration()` calls to animate the circles, rectangles, and path. The SVG canvas is 960 by 500 pixels, and the face is centered using a group transform.

Loading thumbnail…

Let's make a face with D3

A yellow SVG face with black-outlined features is drawn using D3 v5. The head is a circle centered in a 960 by 500 viewport, with eyes and animated eyebrows that move up and down via chained transitions. A mouth is rendered using the `d3.arc` shape generator with specified inner and outer radii. The code imports `select` and `arc` from D3, appends elements to an SVG group, and uses `transition().duration()` to create the eyebrow motion.

Loading thumbnail…

HTML Car Report

A plain HTML and CSS report lists car models with their prices in a simple bulleted list. The first entry, “Toyota Corola,” is highlighted in blue via a CSS class, while the other two cars appear in default monospace styling. The page uses no JavaScript libraries or data files, relying solely on static markup and a stylesheet that sets the font size and family. The rendering approach is straightforward document flow, with no interactive or dynamic visualization elements present.

Loading thumbnail…

Cars report

This example displays a text-based car report generated from a hardcoded JSON dataset. It filters cars by a maximum price and lists their names, models, and prices using async data loading. The React starter code uses a Promise with `setTimeout` to simulate a two-second fetch delay, and the report is rendered directly into a `<pre>` element via `getElementById`. The `formatCars` and `generateReport` functions handle string formatting and filtering.