\n \n \n \n\n[](https://www.npmjs.com/package/muze)\n[](https://www.npmjs.com/package/muze)\n[](https://github.com/chartshq/muze/graphs/contributors)\n[](https://github.com/chartshq/muze/blob/master/LICENSE)\n\n## What is Muze?\n\nMuze 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. \n\nMuze uses an in-browser [DataModel](https://github.com/chartshq/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.\n\n## Features\n\n* 🚀 Build complex and interactive visualizations by using **composable** layer constructs.\n* 🔨 Use rich **data operators** to transform, visualize and interact with data.\n* 👯 Define custom interactions by configuring **physical behavioural model** and **side effect**.\n* ✂️ Use **css** to change look and feel of the charts.\n* ☀️ Have a **single source of truth** for all your visualization and interaction controlled from data.\n* 🔩 Integrate easily with your existing application by **dispatching actions** on demand.\n\n## Installation\n\n### CDN\n\nInsert the muze build and the required CSS into the ``:\n\n```html\n\n\n```\n\n### NPM\n\nInstall muze from NPM:\n\n```bash\n$ npm install --save muze\n```\n\nAlso import the required stylesheet:\n\n```javascript\nimport 'muze/dist/muze.css';\n```\n\n## Getting started\n\n1. Prepare the data and the corresponding schema using [DataModel](https://github.com/chartshq/datamodel):\n\n```javascript\n// Prepare the schema for data\nconst schema = [\n {\n name: 'Name',\n type: 'dimension'\n },\n {\n name: 'Maker',\n type: 'dimension'\n },\n {\n name: 'Horsepower',\n type: 'measure',\n defAggFn: 'avg'\n },\n {\n name: 'Origin',\n type: 'dimension'\n }\n]\n\n// Prepare the data\nconst data = [\n {\n \"Name\": \"chevrolet chevelle malibu\",\n \"Maker\": \"chevrolet\",\n \"Horsepower\": 130,\n \"Origin\": \"USA\"\n },\n {\n \"Name\": \"buick skylark 320\",\n \"Maker\": \"buick\",\n \"Horsepower\": 165,\n \"Origin\": \"USA\"\n },\n {\n \"Name\": \"datsun pl510\",\n \"Maker\": \"datsun\",\n \"Horsepower\": 88,\n \"Origin\": \"Japan\"\n }\n]\n```\n\n2. Pass the data and schema to `DataModel` and create a new `DataModel` instance:\n\n```javascript\nconst DataModel = muze.DataModel;\nconst dm = new DataModel(data, schema);\n```\n\n3. Pass the `DataModel` instance to `muze` and create your first chart:\n\n```javascript\nimport muze from 'muze';\nimport 'muze/dist/muze.css';\n\n// Create a global environment to share common configs across charts\nconst env = muze();\n// Create a new canvas instance from the global environment\nconst canvas = env.canvas();\ncanvas\n .data(dm) \n .rows([\"Horsepower\"]) // Fields drawn on Y axis\n .columns([\"Origin\"]) // Fields drawn on X axis\n .mount(\"#chart\"); // Specify an element to mount on using a CSS selector\n```\n\nSee [muzejs.org/docs](https://muzejs.org/docs/v1.3.1) for more documentation!\n\nYou also can checkout our Yeoman Generator [generator-muze](https://github.com/chartshq/generator-muze) to try out the **muze** through a boilerplate app.\n\n## Documentation\n\nYou can find detailed tutorials, concepts and API references at [muzejs.org/docs](https://muzejs.org/docs/v1.3.1).\n\n## Support\n\nPlease raise a Github issue [here](https://github.com/chartshq/muze/issues/new).\n\n## Roadmap\n\nPlease contribute to our public wishlist or upvote an existing feature at [Muze Public Wishlist & Roadmap](https://feedback.muzejs.org)\n\n## Contributing\n\nYour PRs and stars are always welcome :). Checkout the [Contributing](https://github.com/chartshq/muze/blob/master/CONTRIBUTING.md) guides.\n\n## License\n\nMIT","readmeFilename":"README.md","homepage":"https://muzejs.org","keywords":["muze","svg","vector","graphics","data-visualization","visualization","renderer","fusioncharts","relational","algebra","relation"],"repository":{"type":"git","url":"git+https://github.com/chartshq/muze.git"},"contributors":[{"name":"Akash Goswami","email":"akashgoswami90s@gmail.com"},{"name":"Ranajit Banerjee","email":"ranajit.113124@gmail.com","url":"https://github.com/ranajitbanerjee"},{"name":"Mridul Meharia","email":"mehariamridul@gmail.com","url":"https://github.com/mridulmeh"},{"name":"Subhash Haldar"},{"name":"Sandeep Acharya"},{"name":"Rousan Ali","email":"hello@rousan.io","url":"https://rousan.io"},{"name":"Ujjal Kumar Dutta","email":"duttaujjal143@gmail.com"},{"name":"Adarsh Lilha","email":"adarshlilha@gmail.com","url":"https://adarshlilha.com"},{"name":"Swati Mukherjee","email":"swati@charts.com"}],"author":{"name":"Muzejs.org","url":"https://muzejs.org/"},"bugs":{"url":"https://github.com/chartshq/muze/issues"}}
![\"muzejs\"](\"https://github.com/chartshq/muze/raw/master/logo.png\" "\\"muzejs\\""){kind=logo}
\n \n