npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@data-ui/event-flow

v0.0.84

Published

A visualization to explore sequences of events

Downloads

68,196

Readme

Event-flow

demo at williaster.github.io/data-ui

Overview

This visualization is inspired by a 2011 LifeFlow paper from Ben Shneiderman's group. It is meant to facilitate finding aggregate patterns in event sequences. It takes multiple user (or generically entity) event sequences as input and aggregates similar sequences together using the following visual paradigm:

Features

The visualization has a variety of features to facilitate exploratory analysis:

  • Event alignment

    Users can align event sequences by an arbitrary event index and event type (e.g., the 2nd click event). This operation can actually filter out event sequences, e.g., if you align by th 3rd event and a sequence only has 2 events or if you align by the first event type "x" and a specific sequence has no events of that type. Filtered nodes are shown visually with a pattern line root node, and in the legend.

  • Event type filtering

    Users can filter to / filter out specific types of events by clicking on the legend in the right panel. This operation still aligns the fully unfiltered sequences, but then hides relevant event types from view. The number of hidden events is shown in the right panel.

  • Raw sequence view

    By clicking on any node or edge in the aggregate view, the aggregate panel will filter to the selected subtree and users can view the raw sequences captured by that selection in the bottom panel. You can hide the panel to explore the aggregate view, or clear the selection to return to the unfiltered view.

  • Event type breakdown

    A breakdown of event type counts is displayed as a pie chart in the right pane. This breakdown also displays the number of filtered or hidden events depending on the vis state.

  • X-axis -- elapsed time vs sequence

    By default, aggregate nodes are positioned according to the mean elapsed time from the previous node. It can be hard to differentiate closely-spaced events, so the vis also supports positioning nodes by sequence number (1st, 2nd, 3rd, etc) with equal spacing between events.

  • Node sorting (vertical)

    By default nodes are ordered top -> bottom based on high -> low event count, meaning that the most common nodes appear at the top. Users can also order by short -> long elapsed time to the next event.

  • Trimming

    To improve visualization / web app performance and to reduce visual noise, nodes which represent less than a minimum number of events can be hidden. Again, all events are considered for sequence alignment, but 'leaf' nodes are hidden from view.

  • Zooming

    X- and Y-axis zoom + Panning is supported with common mouse movements.