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.muzejs.org/lib/muze/core/latest/themes/muze.css" rel="stylesheet">
<script src="https://cdn.muzejs.org/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 muzejs.org/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 muzejs.org/docs.
Please raise a Github issue here.
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
FAQs
Composable visualisation library for web with a data-first approach
The npm package muze receives a total of 126 weekly downloads. As such, muze popularity was classified as not popular.
We found that muze demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.