An experiment on visualizing a comparison of a pivot sequence with successive modifications of it.
All the sequences are partitioned into sections, which are colored progressively in the pivot.
In the modified sequences, the sections of the original sequence are changed in length, moved to different positions or removed entirely. New sections also appear (depicted in gray).
The use of color alone to convey this kind of information could be not enough, but has the advantage of requiring few marks to be represented, and could thus prove to be useful in an overview.
// Generated by CoffeeScript 1.10.0
(function() {
var BAR_HEIGHT, color, documents, documents_data, height, sections, svg, vis, width;
documents_data = [
{
sections: [
{
id: 0,
length: 3
}, {
id: 1,
length: 2
}, {
id: 2,
length: 2
}, {
id: 3,
length: 1
}, {
id: 4,
length: 4
}, {
id: 5,
length: 3
}, {
id: 6,
length: 4
}, {
id: 7,
length: 2
}, {
id: 8,
length: 3
}, {
id: 9,
length: 3
}, {
id: 10,
length: 2
}, {
id: 11,
length: 1
}, {
id: 12,
length: 2
}, {
id: 13,
length: 2
}, {
id: 14,
length: 1
}, {
id: 15,
length: 3
}, {
id: 16,
length: 3
}, {
id: 17,
length: 4
}, {
id: 18,
length: 3
}, {
id: 19,
length: 1
}
]
}, {
sections: [
{
id: 0,
length: 3
}, {
id: 1,
length: 2
}, {
id: 2,
length: 2
}, {
id: -1,
length: 2
}, {
id: 3,
length: 1
}, {
id: 4,
length: 4
}, {
id: 5,
length: 3
}, {
id: 6,
length: 4
}, {
id: 7,
length: 2
}, {
id: 8,
length: 3
}, {
id: 9,
length: 3
}, {
id: 10,
length: 2
}, {
id: 11,
length: 1
}, {
id: 12,
length: 2
}, {
id: 13,
length: 2
}, {
id: 14,
length: 1
}, {
id: 15,
length: 3
}, {
id: 16,
length: 2
}, {
id: 17,
length: 4
}, {
id: 18,
length: 3
}, {
id: 19,
length: 1
}
]
}, {
sections: [
{
id: 0,
length: 3
}, {
id: 1,
length: 2
}, {
id: 2,
length: 2
}, {
id: -1,
length: 2
}, {
id: 3,
length: 1
}, {
id: 4,
length: 4
}, {
id: 15,
length: 3
}, {
id: 16,
length: 2
}, {
id: 17,
length: 4
}, {
id: 18,
length: 3
}, {
id: 19,
length: 1
}, {
id: 5,
length: 3
}, {
id: 6,
length: 3
}, {
id: 7,
length: 2
}, {
id: 8,
length: 3
}, {
id: 9,
length: 3
}, {
id: 10,
length: 2
}, {
id: 11,
length: 1
}, {
id: 12,
length: 2
}, {
id: 13,
length: 2
}, {
id: 14,
length: 2
}
]
}, {
sections: [
{
id: 0,
length: 3
}, {
id: 1,
length: 1
}, {
id: 2,
length: 1
}, {
id: -1,
length: 2
}, {
id: 3,
length: 2
}, {
id: 4,
length: 4
}, {
id: 15,
length: 3
}, {
id: 16,
length: 2
}, {
id: 17,
length: 3
}, {
id: 18,
length: 3
}, {
id: 19,
length: 1
}, {
id: 5,
length: 3
}, {
id: 11,
length: 1
}, {
id: 12,
length: 2
}, {
id: 13,
length: 1
}, {
id: 6,
length: 3
}, {
id: 7,
length: 2
}, {
id: 8,
length: 3
}, {
id: 9,
length: 2
}, {
id: 10,
length: 2
}, {
id: 14,
length: 2
}
]
}, {
sections: [
{
id: 0,
length: 3
}, {
id: 1,
length: 2
}, {
id: 2,
length: 2
}, {
id: -1,
length: 2
}, {
id: 3,
length: 1
}, {
id: 4,
length: 4
}, {
id: 15,
length: 3
}, {
id: 16,
length: 2
}, {
id: 17,
length: 4
}, {
id: 18,
length: 3
}, {
id: 19,
length: 1
}, {
id: -1,
length: 2
}, {
id: 5,
length: 3
}, {
id: 11,
length: 1
}, {
id: 12,
length: 2
}, {
id: 13,
length: 4
}, {
id: 6,
length: 3
}, {
id: 7,
length: 2
}, {
id: 8,
length: 3
}, {
id: -1,
length: 1
}, {
id: 9,
length: 3
}, {
id: -1,
length: 1
}, {
id: 10,
length: 2
}, {
id: 14,
length: 2
}
]
}, {
sections: [
{
id: -1,
length: 1
}, {
id: 0,
length: 3
}, {
id: 1,
length: 2
}, {
id: 2,
length: 2
}, {
id: -1,
length: 2
}, {
id: -1,
length: 1
}, {
id: 11,
length: 1
}, {
id: 12,
length: 2
}, {
id: 13,
length: 4
}, {
id: 6,
length: 3
}, {
id: 7,
length: 2
}, {
id: 8,
length: 3
}, {
id: -1,
length: 1
}, {
id: 9,
length: 3
}, {
id: -1,
length: 1
}, {
id: 3,
length: 1
}, {
id: 4,
length: 4
}, {
id: 15,
length: 3
}, {
id: 16,
length: 2
}, {
id: 17,
length: 4
}, {
id: -1,
length: 2
}, {
id: 18,
length: 3
}, {
id: 19,
length: 1
}, {
id: -1,
length: 2
}, {
id: 5,
length: 3
}, {
id: 10,
length: 2
}, {
id: 14,
length: 2
}
]
}
];
documents_data.forEach(function(doc) {
var offset;
offset = 0;
return doc.sections.forEach(function(sec) {
sec.offset = offset;
return offset += sec.length;
});
});
BAR_HEIGHT = 30;
color = d3.scale.linear().domain([0, 20]).range([d3.hcl(-20, 50, 10), d3.hcl(100, 60, 93)]).interpolate(d3.interpolateHcl);
svg = d3.select('svg');
width = svg.node().getBoundingClientRect().width;
height = svg.node().getBoundingClientRect().height;
vis = svg.append('g').attr({
transform: "translate(60, 120)"
});
documents = vis.selectAll('.document').data(documents_data);
documents.enter().append('g').attr({
"class": 'document',
transform: function(d, i) {
return "translate(0, " + (i * BAR_HEIGHT * 1.3) + ")";
}
});
sections = documents.selectAll('.section').data(function(d) {
return d.sections;
});
sections.enter().append('rect').attr({
"class": 'section',
height: BAR_HEIGHT
});
sections.attr({
x: function(d) {
return d.offset * 10;
},
width: function(d) {
return d.length * 10;
},
fill: function(d) {
if (d.id !== -1) {
return color(d.id);
} else {
return 'gray';
}
}
});
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text alignment overview</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg></svg>
<script src="index.js"></script>
</body>
</html>documents_data = [{
sections: [
{id: 0, length: 3},
{id: 1, length: 2},
{id: 2, length: 2},
{id: 3, length: 1},
{id: 4, length: 4},
{id: 5, length: 3},
{id: 6, length: 4},
{id: 7, length: 2},
{id: 8, length: 3},
{id: 9, length: 3},
{id: 10, length: 2},
{id: 11, length: 1},
{id: 12, length: 2},
{id: 13, length: 2},
{id: 14, length: 1},
{id: 15, length: 3},
{id: 16, length: 3},
{id: 17, length: 4},
{id: 18, length: 3},
{id: 19, length: 1}
]
},{
sections: [
{id: 0, length: 3},
{id: 1, length: 2},
{id: 2, length: 2},
{id: -1, length: 2},
{id: 3, length: 1},
{id: 4, length: 4},
{id: 5, length: 3},
{id: 6, length: 4},
{id: 7, length: 2},
{id: 8, length: 3},
{id: 9, length: 3},
{id: 10, length: 2},
{id: 11, length: 1},
{id: 12, length: 2},
{id: 13, length: 2},
{id: 14, length: 1},
{id: 15, length: 3},
{id: 16, length: 2},
{id: 17, length: 4},
{id: 18, length: 3},
{id: 19, length: 1}
]
},{
sections: [
{id: 0, length: 3},
{id: 1, length: 2},
{id: 2, length: 2},
{id: -1, length: 2},
{id: 3, length: 1},
{id: 4, length: 4},
{id: 15, length: 3},
{id: 16, length: 2},
{id: 17, length: 4},
{id: 18, length: 3},
{id: 19, length: 1},
{id: 5, length: 3},
{id: 6, length: 3},
{id: 7, length: 2},
{id: 8, length: 3},
{id: 9, length: 3},
{id: 10, length: 2},
{id: 11, length: 1},
{id: 12, length: 2},
{id: 13, length: 2},
{id: 14, length: 2}
]
},{
sections: [
{id: 0, length: 3},
{id: 1, length: 1},
{id: 2, length: 1},
{id: -1, length: 2},
{id: 3, length: 2},
{id: 4, length: 4},
{id: 15, length: 3},
{id: 16, length: 2},
{id: 17, length: 3},
{id: 18, length: 3},
{id: 19, length: 1},
{id: 5, length: 3},
{id: 11, length: 1},
{id: 12, length: 2},
{id: 13, length: 1},
{id: 6, length: 3},
{id: 7, length: 2},
{id: 8, length: 3},
{id: 9, length: 2},
{id: 10, length: 2},
{id: 14, length: 2}
]
},{
sections: [
{id: 0, length: 3},
{id: 1, length: 2},
{id: 2, length: 2},
{id: -1, length: 2},
{id: 3, length: 1},
{id: 4, length: 4},
{id: 15, length: 3},
{id: 16, length: 2},
{id: 17, length: 4},
{id: 18, length: 3},
{id: 19, length: 1},
{id: -1, length: 2},
{id: 5, length: 3},
{id: 11, length: 1},
{id: 12, length: 2},
{id: 13, length: 4},
{id: 6, length: 3},
{id: 7, length: 2},
{id: 8, length: 3},
{id: -1, length: 1},
{id: 9, length: 3},
{id: -1, length: 1},
{id: 10, length: 2},
{id: 14, length: 2}
]
},{
sections: [
{id: -1, length: 1},
{id: 0, length: 3},
{id: 1, length: 2},
{id: 2, length: 2},
{id: -1, length: 2},
{id: -1, length: 1},
{id: 11, length: 1},
{id: 12, length: 2},
{id: 13, length: 4},
{id: 6, length: 3},
{id: 7, length: 2},
{id: 8, length: 3},
{id: -1, length: 1},
{id: 9, length: 3},
{id: -1, length: 1},
{id: 3, length: 1},
{id: 4, length: 4},
{id: 15, length: 3},
{id: 16, length: 2},
{id: 17, length: 4},
{id: -1, length: 2},
{id: 18, length: 3},
{id: 19, length: 1},
{id: -1, length: 2},
{id: 5, length: 3},
{id: 10, length: 2},
{id: 14, length: 2}
]
}
]
documents_data.forEach (doc) ->
offset = 0
doc.sections.forEach (sec) ->
sec.offset = offset
offset += sec.length
BAR_HEIGHT = 30
color = d3.scale.linear()
.domain([0,20])
.range([d3.hcl(-20,50,10),d3.hcl(100,60,93)])
.interpolate(d3.interpolateHcl)
svg = d3.select 'svg'
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height
vis = svg.append 'g'
.attr
transform: "translate(60, 120)"
documents = vis.selectAll '.document'
.data documents_data
documents.enter().append 'g'
.attr
class: 'document'
transform: (d,i) -> "translate(0, #{i*BAR_HEIGHT*1.3})"
sections = documents.selectAll '.section'
.data (d) -> d.sections
sections.enter().append 'rect'
.attr
class: 'section'
height: BAR_HEIGHT
sections
.attr
x: (d) -> d.offset*10
width: (d) -> d.length*10
fill: (d) -> if d.id isnt -1 then color(d.id) else 'gray'html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
background: white;
}