mirror of https://github.com/vitalif/dimple
Publish Mekko Example
parent
b81051e03f
commit
b4f8e23676
|
@ -3,7 +3,7 @@
|
||||||
"id":"advanced_price_range_lollipop",
|
"id":"advanced_price_range_lollipop",
|
||||||
"title":"Price Changes",
|
"title":"Price Changes",
|
||||||
"shortTitle":"Price Changes",
|
"shortTitle":"Price Changes",
|
||||||
"desc":"This examples demonstrates multiple series, multiple axes, different aggregations and a storyboard"
|
"desc":"This examples demonstrates multiple series, multiple axes, different aggregations and a storyboard."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id":"advanced_pong",
|
"id":"advanced_pong",
|
||||||
|
@ -21,6 +21,12 @@
|
||||||
"id":"advanced_dynamic_line_color",
|
"id":"advanced_dynamic_line_color",
|
||||||
"title":"Dynamic Line Colors",
|
"title":"Dynamic Line Colors",
|
||||||
"shortTitle":"Dynamic Colors",
|
"shortTitle":"Dynamic Colors",
|
||||||
"desc":"A line chart plotting unit sales, colored by price"
|
"desc":"A line chart plotting unit sales, colored by price."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"advanced_grouped_mekko",
|
||||||
|
"title":"Grouped Mekko",
|
||||||
|
"shortTitle":"Grouped Mekko",
|
||||||
|
"desc":"A marimekko chart showing SKUs grouped by owner and brand. They have dynamic saturation and are animated by month just for good measure."
|
||||||
}
|
}
|
||||||
]
|
]
|
|
@ -4,16 +4,42 @@
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
||||||
|
// Create and position the chart
|
||||||
var myChart = new dimple.chart(svg, data);
|
var myChart = new dimple.chart(svg, data);
|
||||||
myChart.setBounds(60, 50, 510, 310)
|
myChart.setBounds(60, 50, 510, 310)
|
||||||
|
|
||||||
|
// Add a Grouped Mekko Axis. This will show Brands grouped by owners
|
||||||
|
// sized by unit sales.
|
||||||
var x = myChart.addAxis("x", ["Owner", "Brand"], "Unit Sales");
|
var x = myChart.addAxis("x", ["Owner", "Brand"], "Unit Sales");
|
||||||
x.showPercent = true;
|
x.showPercent = true;
|
||||||
|
|
||||||
|
// Add the vertical measure to also show unit sales, which is standard
|
||||||
|
// for a mekko, but not a requirement in dimple.
|
||||||
myChart.addPctAxis("y", "Unit Sales");
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
|
||||||
|
// Color by Unit Sales. By defining this without specifying the color range
|
||||||
|
// in the second parameter, dimple will assign colors as usual and adjust
|
||||||
|
// saturation based on the Unit Sales value.
|
||||||
var c = myChart.addColorAxis("Unit Sales");
|
var c = myChart.addColorAxis("Unit Sales");
|
||||||
|
|
||||||
|
// Override the minimum axis value to a lower number. By default the range of
|
||||||
|
// values is used with the minimum being 0 saturation and the maximum being 100%
|
||||||
|
// this causes the bars to be too washed out in this particular case.
|
||||||
c.overrideMin = -10000;
|
c.overrideMin = -10000;
|
||||||
|
|
||||||
|
// Draw SKU's for the series, by specifying owner second here, it ensures dimple
|
||||||
|
// will color by owner rather than SKU. This suits the grouping to give blocks of
|
||||||
|
// color for each owner faded by the SKU unit sales value
|
||||||
myChart.addSeries(["SKU", "Owner"], dimple.plot.bar);
|
myChart.addSeries(["SKU", "Owner"], dimple.plot.bar);
|
||||||
|
|
||||||
|
// Add a legend
|
||||||
myChart.addLegend(240, 10, 330, 20, "right");
|
myChart.addLegend(240, 10, 330, 20, "right");
|
||||||
|
|
||||||
|
// Animate the chart by date values
|
||||||
myChart.setStoryboard("Date");
|
myChart.setStoryboard("Date");
|
||||||
|
|
||||||
|
// Draw the chart
|
||||||
myChart.draw();
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue