Text alignment overview

README.md

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.

index.coffee

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'

index.css

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
svg {
  width: 100%;
  height: 100%;
  background: white;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Text alignment overview</title>
    <link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <svg></svg>
    <script src="index.js"></script>
  </body>
</html>

index.js

// 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);

thumbnail.png