muze скачать - загрузка исходного кода muze

muze

Данные веб-сайта

v2.0.0

Скачать

Что такое Муз?

Muze - это библиотека бесплатной визуализации данных для создания исследовательских визуализаций данных (например, Tableau) в браузере, используя Webassembly. Он использует многоуровневую грамматику графики (GOG) для создания композиционной и интерактивной визуализации данных для Интернета. Он идеально подходит для использования в мониторингах и приложениях для визуальной аналитики для создания высокопрофессиональных, интерактивных, многомерных и композиционных визуализаций.

Он использует подход первого данных для определения конструкций и слоев диаграммы, автоматически генерирует межбэкционную интерактивность и позволяет переполнять любое поведение или взаимодействие на графике.

Muze использует Datamodel в браузере для хранения и преобразования данных, а также управлять поведением каждого компонента в визуализации, что позволяет создать сложные и перекрестные диаграммы.

Функции

? Создайте сложные и интерактивные визуализации с помощью композиционных конструкций слоя.
? Используйте богатые операторы данных для преобразования, визуализации и взаимодействия с данными.
? Определите пользовательские взаимодействия путем настройки физической поведенческой модели и побочного эффекта .
✂ Используйте CSS , чтобы изменить внешний вид графиков.
☀ есть один источник истины для всей вашей визуализации и взаимодействия, контролируемых данными.
? Легко интегрируйтесь с существующим приложением, отправляя действия по требованию.
Использует Webassembly для обработки огромных наборов данных и для лучшей производительности .

Установка

CDN

Вставьте сборку MUZE и необходимый CSS в <head> :

 < link href =" https://cdn.jsdelivr.net/npm/@chartshq/[email protected]/dist/muze.css " rel =" stylesheet " >
< script src =" https://cdn.jsdelivr.net/npm/@chartshq/[email protected]/dist/muze.js " type =" text/javascript " > </ script >

Npm

Установите MUZE из NPM:

$ npm install @chartshq/muze

Затем вам нужно добавить плагин WebPack Copy-webpack-Plugin, чтобы скопировать некоторые необходимые файлы MUZE в вашу выходную папку dist или build .

npm install [email protected] --save-dev

А затем в вашем объекте конфигурации WebPack вам нужно добавить copy-webpack-plugin в список плагинов, например, так:

 const path = require ( "path" ) ;
const CopyWebpackPlugin = require ( 'copy-webpack-plugin' ) ;

module . exports = {
  plugins : [
    new CopyWebpackPlugin ( [
      {
        // Provide your node_modules path where @chartshq/muze
        // package is installed.
        from : path . resolve ( "<your_node_modules_path>" , "@chartshq/muze/dist" ) ,
        to : '.'
      } ,
    ] ) ,
  ]
}

Вы также можете проверить наш Muze-App-Template, чтобы быстро попробовать Muze через приложение для шаблона.

Начиная

После того, как установка будет сделана, пожалуйста, выполните следующие действия:

Подготовьте данные и соответствующую схему:

 // 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"
  }
]

Импортируйте MUZE следующим образом:

Если вы используете пакет NPM, импортируйте пакет и его файл CSS.

 import muze from '@chartshq/muze' ;
import "@chartshq/muze/dist/muze.css" ;

Если вы используете CDN, используйте его следующим образом:

 const muze = window . muze ;

Создайте DataModel и базовую диаграмму:

 // As the muze and DataModel are asynchronous, so we need to
// use async-await syntax.
async function myAsyncFn ( ) {
  // Load the DataModel module.
  const DataModel = await muze . DataModel . onReady ( ) ;
  
  // Converts the raw data into a format
  // which DataModel can consume.
  const formattedData = await DataModel . loadData ( data , schema ) ;

  // Create a new DataModel instance with
  // the formatted data.
  let dm = new DataModel ( formattedData ) ;
  
  // Create a global environment to share common configs across charts.
  const env = await muze ( ) ;
 
  // Create a new canvas instance from the global
  // environment to render chart on.
  const canvas = env . canvas ( ) ;

  canvas
  . data ( dm ) // Set data to the chart.
  . 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.
}

myAsyncFn ( )
  . catch ( console . error . bind ( console ) ) ;

Документация

Вы можете найти подробные учебные пособия, концепции и ссылки API в нашей документации.

Что изменилось?

Muze 2.0.0 теперь работает от Webassembly, принося огромное улучшение производительности по сравнению с предыдущими версиями. Версия JavaScript устарела, и в этой версии не произойдет никакая активная разработка, но мы исправим критические ошибки как и при повышении в GitHub.

Эта версия Muze приносит силу Webassembly для легкого обращения с большими наборами данных, а также без трения взаимодействия и рендеринга. Кроме того, часть загрузки данных в версии Webassembly является асинхронной, в отличие от синхронной в версии JavaScript. Кроме того, версия WebAssembly бесплатна, но доступна только в виде составленного двоичного файла, тогда как версия JavaScript бесплатная и с открытым исходным кодом (MIT).

Вы можете посетить устаревшую версию Javascript здесь https://github.com/chartshq/muze-deprecated

Мигрирование из предыдущих версий Muze

Теперь Муз стал асинхронным, а не синхронно в предыдущей версии JavaScript.

Измененные API

Создание Env

Муз устарела от версии:

 const env = muze ( ) ;
const canvas = env . canvas ( ) ;

Последняя версия:

 ( async function ( ) {
  const env = await muze ( ) ;
  const canvas = env . canvas ( ) ;
} ) ( ) ;

Dispatchbehaviour

Муз устарела от версии:

 canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
  criteria : {
    Maker : [ 'ford' ]
  }
} ) ;

Последняя версия:

В текущей версии идентификаторы должны быть переданы в объекте Dimensions или объекте диапазона, если это мера или временное поле.

 // Dispatch highlight behaviour on data plots having maker as ford
canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
  criteria : {
    dimensions : {
      Maker : [ 'ford' ]
    }
  }
} ) ;

// Dispatch highlight behaviour on data plots having Acceleration
// between 20 and 50.
canvas . firebolt ( ) . dispatchBehaviour ( 'highlight' , {
  criteria : {
    range : {
      Acceleration : [ 20 , 50 ]
    }
  }
} ) ;