87

GitHub - chartshq/muze: Composable data visualisation library for web with a dat...

 5 years ago
source link: https://github.com/chartshq/muze
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md



muzejs




NPM version NPM total downloads Contributors License

What is Muze?

Muze is a data visualization library which uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web. It uses a data-first approach to define the constructs and layers of the chart, automatically generates cross-chart interactivity, and allows you to over-ride any behavior or interaction on the chart.

Muze uses an in-browser DataModel to store and transform data, and control the behaviour of every component in the visualization, thereby enabling creating of complex and cross-connected charts.

Features

  • ? Build complex and interactive visualizations by using composable layer constructs.
  • ? Use rich data operators to transform, visualize and interact with data.
  • ? Define custom interactions by configuring physical behavioural model and side effect.
  • ✂️ Use css to change look and feel of the charts.
  • ☀️ Have a single source of truth for all your visualization and interaction controlled from data.
  • ? Integrate easily with your existing application by dispatching actions on demand.

Installation

CDN

Insert the muze build and the required CSS into the <head>:

<link href="https://cdn.charts.com/lib/muze/core/latest/themes/muze.css" rel="stylesheet">
<script src="https://cdn.charts.com/lib/muze/core/latest/muze.js" type="text/javascript"></script>

NPM

Install muze from NPM:

$ npm install --save muze

Also import the required stylesheet:

import 'muze/dist/muze.css';

Getting started

  1. Prepare the data and the corresponding schema using DataModel:
// Prepare the schema for data
const schema = [
  {
    name: 'Name',
    type: 'dimension'
  },
  {
    name: 'Maker',
    type: 'dimension'
  },
  {
    name: 'Horsepower',
    type: 'measure',
    defAggFn: 'avg'
  },
  {
    name: 'Origin',
    type: 'dimension'
  }
]

// Prepare the data
const data = [
   {
    "Name": "chevrolet chevelle malibu",
    "Maker": "chevrolet",
    "Horsepower": 130,
    "Origin": "USA"
  },
  {
    "Name": "buick skylark 320",
    "Maker": "buick",
    "Horsepower": 165,
    "Origin": "USA"
  },
  {
    "Name": "datsun pl510",
    "Maker": "datsun",
    "Horsepower": 88,
    "Origin": "Japan"
  }
]
  1. Pass the data and schema to DataModel and create a new DataModel instance:
const DataModel = muze.DataModel;
const dm = new DataModel(data, schema);
  1. Pass the DataModel instance to muze and create your first chart:
import muze from 'muze';
import 'muze/dist/muze.css';

// Create a global environment to share common configs across charts
const env = muze();
// Create a new canvas instance from the global environment
const canvas = env.canvas();
canvas
  .data(dm) 
  .rows(["Horsepower"]) // Fields drawn on Y axis
  .columns(["Origin"]) // Fields drawn on X axis
  .mount("#chart"); // Specify an element to mount on using a CSS selector

See charts.com/muze/docs for more documentation!

You also can checkout our Yeoman Generator generator-muze to try out the muze through a boilerplate app.

Documentation

You can find detailed tutorials, concepts and API references at charts.com/muze/docs.

Support

Please raise a Github issue, or contact us at [email protected].

Roadmap

Please contribute to our public wishlist or upvote an existing feature at Muze Public Wishlist & Roadmap

Contributing

Your PRs and stars are always welcome :). Checkout the Contributing guides.

License

MIT


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK