All Projects → antvis → g2-brush

antvis / g2-brush

Licence: MIT license
Select a one-, two-dimensional or irregular region using the mouse.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to g2-brush

BrushEffect
This is a simple animation effect for any android view.
Stars: ✭ 23 (-4.17%)
Mutual labels:  brush
Brush Manager
Brush Manager is an add-on for Blender that helps you to create custom brushes, store them in a file and organize the library of various categories of brushes.
Stars: ✭ 75 (+212.5%)
Mutual labels:  brush
Atlas
An extensible 3D GIS application for visualization, analysis and research.
Stars: ✭ 113 (+370.83%)
Mutual labels:  interaction
GIMLeT
GIMLeT – Gestural Interaction Machine Learning Toolkit
Stars: ✭ 33 (+37.5%)
Mutual labels:  interaction
use-pan-and-zoom
👆+🔎 React hook for panning and zooming a container
Stars: ✭ 57 (+137.5%)
Mutual labels:  interaction
vesdk-android-demo
VideoEditor SDK: A fully customizable video editor for your app.
Stars: ✭ 90 (+275%)
Mutual labels:  brush
G2
📊 A highly interactive data-driven visualization grammar for statistical charts.
Stars: ✭ 11,020 (+45816.67%)
Mutual labels:  interaction
pix
Interaction notation for UX design
Stars: ✭ 37 (+54.17%)
Mutual labels:  interaction
Dyci2Lib
"Dicy2 for Max" is a Max package implementing interactive agents using machine-learning to generate musical sequences that can be integrated into musical situations ranging from the production of structured material within a compositional process to the design of autonomous agents for improvised interaction. Check also our plugin for Ableton live !
Stars: ✭ 35 (+45.83%)
Mutual labels:  interaction
leaflet-paintpolygon
Leaflet plugin to create polygon with circle as paint
Stars: ✭ 38 (+58.33%)
Mutual labels:  brush
ReactZooApp
ReactZooApp
Stars: ✭ 33 (+37.5%)
Mutual labels:  interaction
socitrack
A wearable platform for social interaction studies
Stars: ✭ 16 (-33.33%)
Mutual labels:  interaction
g2-angular
Angular for Alipay G2
Stars: ✭ 27 (+12.5%)
Mutual labels:  g2
theme-set
💄 Customize theme for G2, G2Plot of AntV(孵化中)
Stars: ✭ 35 (+45.83%)
Mutual labels:  g2
vis-dashboard
🎨 Awesome dashboards, built with G2 and G2Plot.
Stars: ✭ 36 (+50%)
Mutual labels:  g2
BlockSniper
An advanced (brush) world editing plugin for PocketMine-MP
Stars: ✭ 77 (+220.83%)
Mutual labels:  brush
Samples-JS-PHP
JavaScript and PHP samples for Stimulsoft Reports.PHP reporting tool.
Stars: ✭ 17 (-29.17%)
Mutual labels:  interaction
exorium
esquire, a multifunctional bot to fit your needs.
Stars: ✭ 15 (-37.5%)
Mutual labels:  interaction
g2plot-vue
g2plot for vue, both 2 and 3
Stars: ✭ 106 (+341.67%)
Mutual labels:  g2
InteractiveView
Feel the fluid interactive interfaces - Apple uses for all apps like Appstore etc.
Stars: ✭ 87 (+262.5%)
Mutual labels:  interaction

g2-brush

npm package NPM downloads Percentage of issues still open

Chart's interaction enhancement tool for G2(Please use a version greater than 3.0.1).

Install

$ npm install @antv/g2-brush

or use cdn:

<script src="https://gw.alipayobjects.com/os/antv/assets/g2-brush/0.0.2/g2-brush.js"></script>

Usage

First of all, the brush instance must be created after the chart be rendered.

import Brush from '@antv/g2-brush';
// ...
chart.render();

new Brush({
  canvas: chart.get('canvas'), // must be set
  chart, // if you want to filter data by default, please set the chart
  type: 'X', // set the brush type, default value is 'XY'
});

Example

online demos: https://antvis.github.io/g2-brush/demos/#

$.getJSON('./data/top2000.json', data => {
  const ds = new DataSet();
  const dv = ds.createView('test')
    .source(data)
    .transform({
      as: [ 'count' ],
      groupBy: [ 'release' ],
      operations: [ 'count' ],
      type: 'aggregate'
    });

  const chart = new G2.Chart({
    container: 'canvas',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(dv);
  chart.scale({
    count: {
      alias: 'top2000 唱片总量'
    },
    release: {
      tickInterval: 5,
      alias: '唱片发行年份'
    }
  });
  chart.interval()
    .position('release*count')
    .color('#e50000');

  chart.render();

  new Brush({
    canvas: chart.get('canvas'),
    chart,
    type: 'X',
    onBrushstart() {
      chart.hideTooltip();
    },
    onBrushmove() {
      chart.hideTooltip();
    }
  });
  chart.on('plotdblclick', () => {
    chart.get('options').filters = {};
    chart.repaint();
  });
});

API

API DOCS

Development

$ npm install

$ npm run dev

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].