Our Blog

A Marimekko Chart, inspired by KnowledgeOps Software Solution. Thanks to Mr. Milan Garg for the suggestion. Jason Davies has published an even-simpler interactive implementation using the “slice-dice” treemap layout algorithm!

use this code ……..

Mekko Json Data…

// use d3js links
//d3js.org/d3.v3.min.js

// CSS
body {
font: 10px sans-serif;
}

rect {
stroke: #000;
}

svg {
shape-rendering: crispEdges;
}

// Data Types
data : [

{
category : “Bangladesh”,
xPercent : .15,
total : 110,
y-data : [

{
category : “Govt.”,
yPercent : .36
},

{
category : “DC”,
yPercent : .44
},
{
category : “DIS”,
yPercent : .20
},

]
},

{
category : “East”,
xPercent : .45,
total : 170,
y-data : [

{
category : “Govt”,
yPercent : .2
},

{
category : “DC”,
yPercent : .5
},
{
category : “DIS”,
yPercent : .3
},

]
},

{
category : “North”,
xPercent : .4,
total : 230,
y-data : [

{
category : “Govt”,
yPercent : 0
},

{
category : “DC”,
yPercent : .7
},
{
category : “DIS”,
yPercent : .3
},

]
}

]

// Scripts
var remove = d3.select(“body”).select(“svg”).remove();
// var responseData = data;
var myData = JSON.parse(data);

var data = myData.segData;

var width = 1100;
height = 600,
padding = 100;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);

var y = d3.scale.linear()
.range([height, 0]);

var formatDecimal = d3.format(“.2f”);

height = height + 2 * (formatDecimal(myData.overShootFromZero * 100));

var svgContainer = d3.select(“#segmentation-Chart”).append(“svg”)
.attr(“x”, 0)
.attr(“y”, 0)
.attr(“width”, width)
.attr(“height”, height);

width = width – 2;
//we need to
height = height – 100;
var yCompressionFactor = (height – 100) / height;
var xCompressionFactor = (width – 100) / width;

var x_offset = 80;

for (var xcount = 0 ; xcount < data.length – 1; xcount++) {
var catgeoryData = data[xcount];
var y_offset = height;

var x_width = catgeoryData.xPercent * width;

var y_data = catgeoryData.y_data;

var previousElementNegative = false;
for (var ycount = 0; ycount < y_data.length; ycount++) {

var elemHeight = y_data[ycount].yPercent * height * yCompressionFactor;
var elemHeightDisplay = elemHeight;

var tip = d3.tip()
.attr(‘class’, ‘d3-tip’)
.offset([-10, 0])
.html(“” + y_data[ycount].category + “: ” + formatDecimal(y_data[ycount].value) + “Cr” +”
);

if (previousElementNegative == true && elemHeight >= 0)
{
//reset the offset to the zero base line
y_offset = height;
previousElementNegative = false;
}

yHeigth = 0;
if (elemHeight < 0) { previousElementNegative = true; elemHeight = 0; } var rectangle = svgContainer.append(“rect”) // .append(“g”) .attr(“class”, “categaoryData”) .attr(“x”, x_offset) .attr(“y”, y_offset – elemHeight) .attr(“width”, x_width * xCompressionFactor) .attr(“height”, Math.abs(y_data[ycount].yPercent * height * yCompressionFactor)) .attr(“fill”, y_data[ycount].color) .on(‘mouseover’, tip.show) .on(‘mouseout’, tip.hide); // show y-axis sub-category if (xcount == 0) { //populate the names in the y axis svgContainer.append(“text”).text(y_data[ycount].category) .attr(“class”, “label2”) .attr(“text-anchor”, “middle”) .call(wrap1, 60); } rectangle.call(tip); svgContainer.append(“text”) .text(formatDecimal(y_data[ycount].yPercentDisplay * 100) + “%”) .attr(“class”, “yData”) .attr(“x”, x_offset + (x_width * xCompressionFactor / 2) – 20) .attr(“y”, y_offset – (elemHeightDisplay / 2) + 4); y_offset = y_offset – elemHeightDisplay; } // show total for top in Marimekko Chart var totalsvg = svgContainer .append(“text”) .text(catgeoryData.total ) // total .attr(“text-anchor”, “middle”) .call(wrapTotal, 60) .attr(“fill”, “blue”) .attr(“stroke”, “black”) .attr(“stroke-width”, “.2px”) .attr(“class”, “label2”); // x-axis show category for Marimekko Chart xaxis = svgContainer .append(“text”) .text(catgeoryData.category) // month .attr(“text-anchor”, “middle”) .attr(“class”, “label2”) .call(wrap, 70); x_offset = x_offset + x_width * xCompressionFactor; // wrap text function wrap(text, width) { text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr(“y”), dy = parseFloat(text.attr(“dy”)), tspan = text.text(null).append(“tspan”).attr(“x”, x_offset + ((x_width * xCompressionFactor) / 2) – 10).attr(“y”, 380 + (2.6 * (formatDecimal(myData.overShootFromZero * 100)))).attr(“dy”, 13 + “em”).attr(“class”, “tspanLabels”).style(“background-color”, “pink”).attr(“dx”, 1 + “em”); while (word = words.pop()) { line.push(word); tspan.text(line.join(” “)); if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(” “));
line = [word];
tspan = text.append(“tspan”).attr(“x”, x_offset + ((x_width * xCompressionFactor) / 2) – 10).attr(“y”, 380 + (2.6 * (formatDecimal(myData.overShootFromZero * 100)))).attr(“dy”, ++lineNumber * lineHeight + 13 + “em”).attr(“dx”, 1 + “em”).attr(“class”, “tspanLabels”).text(word);
}
}
});
}
// wrap text
function wrap1(text, width) {
text.each(function () {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1, // ems
y = text.attr(“y”),
dy = parseFloat(text.attr(“dy”)),
tspan = text.text(null).append(“tspan”).attr(“x”, 0).attr(“y”, y_offset – elemHeight / 2).attr(“dy”, 0 + “em”).attr(“class”, “tspanLabels”).style(“background-color”, “pink”).attr(“dx”, 3 + “em”);
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(” “));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(” “));
line = [word];
tspan = text.append(“tspan”).attr(“x”, 0).attr(“y”, y_offset – elemHeight / 2).attr(“dy”, ++lineNumber * lineHeight + 0 + “em”).attr(“dx”, 3 + “em”).attr(“class”, “tspanLabels”).text(word);
}
}
});
}
// wrap text
function wrapTotal(text, width) {
text.each(function () {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr(“y”),
dy = parseFloat(text.attr(“dy”)),
tspan = text.text(null).append(“tspan”).attr(“x”, x_offset + ((x_width * xCompressionFactor) / 2) – 10).attr(“y”, 60 – (.5 * (formatDecimal(myData.overShootFromZero * 100)))).attr(“dy”, 1 + “em”).attr(“class”, “tspanLabels”).attr(“dx”, 1 + “em”);
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(” “));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(” “));
line = [word];
tspan = text.append(“tspan”).attr(“x”, x_offset + ((x_width * xCompressionFactor) / 2) – 10).attr(“y”, 60 – (.5 * (formatDecimal(myData.overShootFromZero * 100)))).attr(“dy”, ++lineNumber * lineHeight + 1 + “em”).attr(“dx”, 1 + “em”).attr(“class”, “tspanLabels”).text(word);
}
}
});
}

}