Awesome Open Source
Awesome Open Source

Data Explorer

written in typescript styled with prettier tested with jest Commitizen friendly yarn codecov

The Data Explorer is an open source point-and-click interface for querying and visualizing your event data. It's maintained by the team at Keen IO.


npm install keen-explorer --save


yarn add keen-explorer

Visualizations Theme

The Data Explorer theme could be overridden during initialization of application instance.

const explorer = new KeenExplorer({
  container: '#root',
  modalContainer: '#modal-root',
  dataviz: {
    theme: {
      colors: ['red', 'blue', 'yellow']


The Data Explorer components configuration could be specified during creation of application instance.

Set default timezone for queries

Specify default timezone used for new created queries. Provided argument must be compatible with IANA Time Zone Database standard.

const explorer = new KeenExplorer({
  defaultTimezoneForQuery: 'Africa/Nairobi',
Disable timezone selection

Disables possibility to change timezone from user interface.

const explorer = new KeenExplorer({
  disableTimezoneSelection: true,


The default translations files for application are hosted on jsdelivr CDN. You can easily replace the translations by overriding the loadPath for files.

const explorer = new KeenExplorer({
  container: '#root',
  modalContainer: '#modal-root',
  translations: {
    backend: {
      loadPath: '[email protected]$VERSION/dist/locales/{{lng}}/{{ns}}.json'

Confirm extraction limit

The default threshold for rendering confirmation modal is 100 properties in event collection schema used for extraction. You can easily change it by providing additional argument to constructor.

const explorer = new KeenExplorer({
  confirmExtractionLimit: 50 

PubSub interface

The Data Explorer could be controlled dynamically by using global instance. By default after component is mounted in browser environment the pubsub instance should be accessible in global object.

Pubsub Events

Event Meta Description
@explorer/new-query n/a Changes view to editor mode with default query settings
@explorer/change-view { view: ViewMode } Changes Explorer view mode


Creating new query
Change view
type ViewMode = 'browser' | 'editor';

window.KeenPubSub.publish('@explorer/change-view', { view: 'browser' });

npm scripts

List of useful commands that could be used by developers. Execution in the command-line interface should be prefixed with yarn package manager.

Command Description
lint run linter against current application codebase.
test run unit tests.
e2e run cypress e2e tests.
e2e:open opens cypress e2e user interface.
build builds application distribution.
prettier run code formatter process against current codebase.


This project uses Conventional Commits to enforce common commit standards.

Command Description
npx git-cz run commit command line interface.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,605
Data Visualization (4,275
Chart (2,233
Analytics (2,172
Analysis (2,037
Dataviz (552
Related Projects