muze 다운로드 - muze 소스 코드 다운로드

muze

웹사이트 데이터

v2.0.0

다운로드

Muze는 무엇입니까?

Muze는 WebAssembly를 사용하여 브라우저에서 탐색 적 데이터 시각화 (Tableau)를 생성하기위한 무료 데이터 시각화 라이브러리 입니다. GOG (Grammar of Graphics)를 사용하여 웹 용 합성 및 대화식 데이터 시각화를 만듭니다. 시각적 분석 대시 보드 및 애플리케이션에 사용하여 고도로 성능이 뛰어나고 대화식, 다차원 및 복합 가능한 시각화를 만들 수 있습니다.

데이터 우선 접근 방식을 사용하여 차트의 구성 및 계층을 정의하고 교차 차트 상호 작용을 자동으로 생성하며 차트에서 모든 동작이나 상호 작용을 과도하게 승차 할 수 있습니다.

Muze는 브라우저 내 데이터 모드를 사용하여 데이터를 저장하고 변환하고 시각화에서 모든 구성 요소의 동작을 제어하여 복잡하고 교차 연결된 차트를 만들 수 있습니다.

특징

? 종합 가능한 레이어 구조물을 사용하여 복잡하고 대화식 시각화를 구축하십시오.
? 풍부한 데이터 운영자를 사용하여 데이터와 변환, 시각화 및 상호 작용하십시오.
? 물리적 행동 모델 및 부작용을 구성하여 사용자 정의 상호 작용을 정의하십시오.
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

NPM에서 Muze 설치 :

$ npm install @chartshq/muze

그런 다음 필요한 Muze 파일을 출력 dist 또는 build 폴더에 복사하려면 WebPack 플러그인 Copy-Webpack-Plugin을 추가해야합니다.

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를 체크 아웃하여 Boilerplate 앱을 통해 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 ;

데이터 모드와 기본 차트를 작성하십시오.

 // 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 버전은 무료이며 Open-Source (MIT)입니다.

https://github.com/chartshq/muze-deprecated에서 더 이상 사용되지 않은 JavaScript 버전을 방문 할 수 있습니다

이전 버전의 Muze에서 마이그레이션됩니다

이제 Muze는 이전 JavaScript 버전에서 동기식이 아닌 비동기식이되었습니다.

변경된 API

env 생성

Muze 더 이상 사용되지 않는 버전 :

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

최신 버전 :

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

Dispatchbehaviour

Muze 더 이상 사용되지 않는 버전 :

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

최신 버전 :

현재 버전에서 식별자는 측정 또는 시간 필드 인 경우 크기 객체 또는 범위 객체로 전달되어야합니다.

 // 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 ]
    }
  }
} ) ;