Skip to content
This repository has been archived by the owner on May 2, 2022. It is now read-only.

Commit

Permalink
Merge branch 'release/v1.2.3'
Browse files Browse the repository at this point in the history
  • Loading branch information
rousan committed Sep 19, 2019
2 parents d8a00c6 + 9bb62ee commit 74cbf00
Show file tree
Hide file tree
Showing 11 changed files with 138 additions and 198 deletions.
2 changes: 1 addition & 1 deletion dist/muze.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/muze.js.map

Large diffs are not rendered by default.

159 changes: 48 additions & 111 deletions examples/js/crosstab.js
Original file line number Diff line number Diff line change
@@ -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')
});
Loading

0 comments on commit 74cbf00

Please sign in to comment.