Merge branch 'release/v1.2.3'

examples/js/crosstab.js

@@ -1,111 +1,48 @@
-/* eslint-disable */
-
-(function () {
- let env = muze();
- let DataTable = muze.DataModel,
- share = muze.Operators.share,
- html = muze.Operators.html;
-
- d3.csv('../../../data/coffee.csv', (data) => {
- const jsonData = data,
- schema = [{
- name: 'Market',
- type: 'dimension'
- },
- {
- name: 'Product',
- type: 'dimension'
- },
- {
- name: 'Product Type',
- type: 'dimension'
- },
-
- {
- name: 'Revenue',
- type: 'measure'
- },
- {
- name: 'Expense',
- type: 'measure'
- },
- {
- name: 'Profit',
- type: 'measure',
- },
- {
- name: 'Order Count',
- type: 'measure'
- },
- ];
- let rootData = new DataTable(jsonData, schema);
-
-
- rootData = rootData.groupBy(['Market', 'Product Type', 'Product'], {
-
- });
-
- env = env.data(rootData).minUnitHeight(40).minUnitWidth(40);
- let mountPoint = document.getElementById('chart');
- window.canvas = env.canvas();
- let canvas2 = env.canvas();
- let canvas3 = env.canvas();
- let rows = [[ 'Market', 'Product Type', 'Product']],
- columns = [['Revenue', 'Expense', 'Profit', 'Order Count'], []];
- canvas = canvas
- .rows(rows)
- .columns(columns)
- .data(rootData)
- // .detail(['Market', 'Product Type', 'Product'])
- .minUnitHeight(10)
- .width(500)
- .height(2000)
- .config({
- border:{
- width: 2,
- // showRowBorders: false,
- // showColBorders:false,
- // showValueBorders: {
- // top: false,
- // bottom: true,
- // left: true,
- // right: false
- // }
- },
- axes:{
- x:{
- showAxisName: true,
- tickFormat : (d)=>{
- if(d<1000) return d;
- if(d>1000 && d<1000000) return `${d/1000}K`
- if(d>1000000) return `${d/1000}M`
- return d
- }
-
-
- }, y:{
- // showAxisName: true,
- // name: 'Acceleration per year',
- axisNamePadding: 12
- }
- }
- })
-
- canvas.legend({
- align:'horizontal',
- title: [''],
- item:{
- text:{
- position:'right'
- }
- },
- steps: 6
- })
-
- .title('The Muze Project', { position: "top", align: "left", })
- .subtitle('Composable visualisations with a data first approach', { position: "top", align: "left" })
- .mount(document.getElementsByTagName('body')[0]);
-
- })
-
-})()
+d3.csv('/data/coffee.csv', function (data) {
+ // load data and schema from url
+ var schema = [{
+ "name": "Market",
+ "type": "dimension"
+ }, {
+ "name": "Product",
+ "type": "dimension"
+ }, {
+ "name": "Product Type",
+ "type": "dimension"
+ }, {
+ "name": "Revenue",
+ "type": "measure"
+ }, {
+ "name": "Expense",
+ "type": "measure"
+ }, {
+ "name": "Profit",
+ "type": "measure"
+ }, {
+ "name": "Order Count",
+ "type": "measure"
+ }];
+ var env = window.muze();
+ var DataModel = window.muze.DataModel;
+ var rootData = new DataModel(data, schema);
+ // console.log('-----------------> 1 ', rootData.getData());
+ /* data and schema is global */
+ var canvas = env.canvas();
+ canvas.rows(['Market', 'Product Type']).columns([['Revenue', 'Expense'], ['Revenue', 'Expense']]).data(rootData).width(650).height(800).config({
+ showHeaders: true, /* show the headers of fields used in faceting */
+ facetConfig: { rows: { verticalAlign: 'middle' } }, /* dimensional values are placed in middle */
+ axes: {
+ y: { showAxisName: false }, /* dont show axis name as we are showing headers, its redundant information */
+ x: {
+ tickFormat: function tickFormat(d) {
+ if (d < 1000) return d;
+ if (d > 1000 && d < 1000000) return d / 1000 + "K";
+ if (d > 1000000) return d / 1000 + "M";
+ return d;
+ }
+ }
+ }
+ })
+ .title('Visual Crosstab')
+ .mount('#chart')
+});