chartshq / muze
- суббота, 13 октября 2018 г. в 00:20:25
JavaScript
Composable data visualisation library for web with a data-first approach
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.
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>
Install muze from NPM:
$ npm install --save muze
Also import the required stylesheet:
import 'muze/dist/muze.css';
// 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"
}
]
DataModel
and create a new DataModel
instance:const DataModel = muze.DataModel;
const dm = new DataModel(data, schema);
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.
You can find detailed tutorials, concepts and API references at charts.com/muze/docs.
Please raise a Github issue, or contact us at muze@charts.com.
Please contribute to our public wishlist or upvote an existing feature at Muze Public Wishlist & Roadmap
Your PRs and stars are always welcome :). Checkout the Contributing guides.
MIT