antvis / data-set

state driven all in one data process for data visualization.
MIT License
248 stars 46 forks source link

How to use it in Node.js? #12

Closed NoraGithub closed 6 years ago

NoraGithub commented 6 years ago

In my opinion , data-set is used as a kind of transformation. Or, exactly, transformation is a very important part of data-set.

However, I don't think the transformation should be done in frontend of browser. Would you please give a way to do it in Node.js , which plays as a middle proxy server in my project.

Should I operate by just taking node as browser to get it done? Like :

  1. get data into dataview
  2. transform
  3. export dataview.rows

It's confusing reading the docs while it's not specific to node.

Looking forward to your answer.

leungwensen commented 6 years ago

Yes! You can use most of the transforms in NodeJS just like using it in browsers, for example:

const DataSet = require('@antv/data-set');

const dv = new DataSet.View().source(`year,population
2002,1284530000
2003,1292270000
2004,1299880000
2005,1307560000
2006,1314480000
2007,1321290000
2008,1328020000
2009,1334500000
2010,1340910000
2011,1347350000
2012,1354040000
2013,1360720000
2014,1367820000
2015,1374620000`, {
  type: 'csv'
});

dv
  .transform({
    type: 'map',
    callback(row) {
      row.population = parseInt(row.population, 10);
      return row;
    }
  })
  .transform({
    type: 'aggregate',
    fields: ['population'],
    operations: ['sum'],
    as: ['totalPopulation'],
    // groupBy: []     // grouping
  });

console.log(dv.rows[0].totalPopulation); // 18627990000

Yet, tag-cloud is specifically relying on canvas in browsers, it cannot be executed directly in NodeJS. But there is still a workaround: execute it in electron!

dxq613 commented 6 years ago

In versions prior to G2 3.0, data processing was provided as a statistical function, and integrated graphics grammar. But not easy to understand, nor flexible use of data processing, such as nodejs side for processing.

// in g2 2.x

chart.line().position(Stat.summary.max('time*value')).color('type')

// In g2 3.0

const dv = new DataSet.view().source(data)
     .transform({
         type: 'aggregate',
         filelds: ['value'],
         operations: ['sum'],
         groupBy: ['type']
      });

chart.line().position('time*value').color('type');
NoraGithub commented 6 years ago

Thanks for following up .