Skip to content

Instantly share code, notes, and snippets.

@m4dc4p

m4dc4p/textPadding.html

Created April 4, 2016 21:39
Show Gist options
  • Save m4dc4p/6836b8211fead03495c540adca6c6d38 to your computer and use it in GitHub Desktop.
Save m4dc4p/6836b8211fead03495c540adca6c6d38 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
textPadding.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="plottable/plottable.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type="text/css">
svg {
border: 1px solid rgba(0, 0, 0, 0.15);
width: 100%;
height: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<script type="text/javascript" src="plottable/plottable.js"></script>
<script type="text/javascript">
function mkPlot(orientation, textAlign, angle, tickTextPadding) {
var data = [
{ "start": 1, "end": 4, "task": "Planning" },
{ "start": 4, "end": 5, "task": "Development" },
{ "start": 5, "end": 7, "task": "QE" }
],
layouts = {
left: function () {
return [[catAxis, plot]];
},
right: function () {
return [[plot, catAxis]];
},
top: function () {
return [[catAxis],
[plot]];
},
bottom: function () {
return [[plot],
[catAxis]];
}
},
colorScale = new Plottable.Scales.Color(),
numScale = new Plottable.Scales.Linear(),
catScale = new Plottable.Scales.Category(),
plot = new Plottable.Plots.Rectangle()
.attr("fill", function(d) { return d.task; }, colorScale)
.addDataset(new Plottable.Dataset(data)),
catAxis = new Plottable.Axes.Category(catScale, orientation),
chart = new Plottable.Components.Table(layouts[orientation]());
if(textAlign)
catAxis.tickTextAlignment(textAlign);
if(tickTextPadding)
catAxis.tickTextPadding(tickTextPadding);
if(angle)
catAxis.tickLabelAngle(angle);
switch(orientation) {
case "left":
case "right":
plot.x(function(d) { return new Date(d.start); }, numScale)
.x2(function(d) { return new Date(d.end); }, numScale)
.y(function(d) { return d.task; }, catScale);
break;
case "top":
case "bottom":
plot.y(function(d) { return new Date(d.start); }, numScale)
.y2(function(d) { return new Date(d.end); }, numScale)
.x(function(d) { return d.task; }, catScale);
break;
}
return chart;
}
function init() {
mkPlot("left", null, null, 10).renderTo("#left-default-padded svg");
mkPlot("left").renderTo("#left-default svg");
mkPlot("top", null, null, 10).renderTo("#top-default-padded svg");
mkPlot("top").renderTo("#top-default svg");
mkPlot("right", null, null, 10).renderTo("#right-default-padded svg");
mkPlot("right").renderTo("#right-default svg");
mkPlot("bottom", null, null, 10).renderTo("#bottom-default-padded svg");
mkPlot("bottom").renderTo("#bottom-default svg");
mkPlot("left", "left", null, 10).renderTo("#left-left-padded svg");
mkPlot("left", "left").renderTo("#left-left svg");
mkPlot("top", "left", null, 10).renderTo("#top-left-padded svg");
mkPlot("top", "left").renderTo("#top-left svg");
mkPlot("right", "left", null, 10).renderTo("#right-left-padded svg");
mkPlot("right", "left").renderTo("#right-left svg");
mkPlot("bottom", "left", null, 10).renderTo("#bottom-left-padded svg");
mkPlot("bottom", "left").renderTo("#bottom-left svg");
mkPlot("left", "right", null, 10).renderTo("#left-right-padded svg");
mkPlot("left", "right").renderTo("#left-right svg");
mkPlot("top", "right", null, 10).renderTo("#top-right-padded svg");
mkPlot("top", "right").renderTo("#top-right svg");
mkPlot("right", "right", null, 10).renderTo("#right-right-padded svg");
mkPlot("right", "right").renderTo("#right-right svg");
mkPlot("bottom", "right", null, 10).renderTo("#bottom-right-padded svg");
mkPlot("bottom", "right").renderTo("#bottom-right svg");
mkPlot("left", "center", null, 10).renderTo("#left-center-padded svg");
mkPlot("left", "center").renderTo("#left-center svg");
mkPlot("top", "center", null, 10).renderTo("#top-center-padded svg");
mkPlot("top", "center").renderTo("#top-center svg");
mkPlot("right", "center", null, 10).renderTo("#right-center-padded svg");
mkPlot("right", "center").renderTo("#right-center svg");
mkPlot("bottom", "center", null, 10).renderTo("#bottom-center-padded svg");
mkPlot("bottom", "center").renderTo("#bottom-center svg");
// rotated labels
mkPlot("left", null, 90, 10).renderTo("#left-default-90-padded svg");
mkPlot("left", null, 90).renderTo("#left-default-90 svg");
mkPlot("top", null, 90, 10).renderTo("#top-default-90-padded svg");
mkPlot("top", null, 90).renderTo("#top-default-90 svg");
mkPlot("right", null, 90, 10).renderTo("#right-default-90-padded svg");
mkPlot("right", null, 90).renderTo("#right-default-90 svg");
mkPlot("bottom", null, 90, 10).renderTo("#bottom-default-90-padded svg");
mkPlot("bottom", null, 90).renderTo("#bottom-default-90 svg");
mkPlot("left", "left", 90, 10).renderTo("#left-left-90-padded svg");
mkPlot("left", "left", 90).renderTo("#left-left-90 svg");
mkPlot("top", "left", 90, 10).renderTo("#top-left-90-padded svg");
mkPlot("top", "left", 90).renderTo("#top-left-90 svg");
mkPlot("right", "left", 90, 10).renderTo("#right-left-90-padded svg");
mkPlot("right", "left", 90).renderTo("#right-left-90 svg");
mkPlot("bottom", "left", 90, 10).renderTo("#bottom-left-90-padded svg");
mkPlot("bottom", "left", 90).renderTo("#bottom-left-90 svg");
mkPlot("left", "right", 90, 10).renderTo("#left-right-90-padded svg");
mkPlot("left", "right", 90).renderTo("#left-right-90 svg");
mkPlot("top", "right", 90, 10).renderTo("#top-right-90-padded svg");
mkPlot("top", "right", 90).renderTo("#top-right-90 svg");
mkPlot("right", "right", 90, 10).renderTo("#right-right-90-padded svg");
mkPlot("right", "right", 90).renderTo("#right-right-90 svg");
mkPlot("bottom", "right", 90, 10).renderTo("#bottom-right-90-padded svg");
mkPlot("bottom", "right", 90).renderTo("#bottom-right-90 svg");
mkPlot("left", "center", 90, 10).renderTo("#left-center-90-padded svg");
mkPlot("left", "center", 90).renderTo("#left-center-90 svg");
mkPlot("top", "center", 90, 10).renderTo("#top-center-90-padded svg");
mkPlot("top", "center", 90).renderTo("#top-center-90 svg");
mkPlot("right", "center", 90, 10).renderTo("#right-center-90-padded svg");
mkPlot("right", "center", 90).renderTo("#right-center-90 svg");
mkPlot("bottom", "center", 90, 10).renderTo("#bottom-center-90-padded svg");
mkPlot("bottom", "center", 90).renderTo("#bottom-center-90 svg");
mkPlot("left", null, -90, 10).renderTo("#left-default--90-padded svg");
mkPlot("left", null, -90).renderTo("#left-default--90 svg");
mkPlot("top", null, -90, 10).renderTo("#top-default--90-padded svg");
mkPlot("top", null, -90).renderTo("#top-default--90 svg");
mkPlot("right", null, -90, 10).renderTo("#right-default--90-padded svg");
mkPlot("right", null, -90).renderTo("#right-default--90 svg");
mkPlot("bottom", null, -90, 10).renderTo("#bottom-default--90-padded svg");
mkPlot("bottom", null, -90).renderTo("#bottom-default--90 svg");
mkPlot("left", "left", -90, 10).renderTo("#left-left--90-padded svg");
mkPlot("left", "left", -90).renderTo("#left-left--90 svg");
mkPlot("top", "left", -90, 10).renderTo("#top-left--90-padded svg");
mkPlot("top", "left", -90).renderTo("#top-left--90 svg");
mkPlot("right", "left", -90, 10).renderTo("#right-left--90-padded svg");
mkPlot("right", "left", -90).renderTo("#right-left--90 svg");
mkPlot("bottom", "left", -90, 10).renderTo("#bottom-left--90-padded svg");
mkPlot("bottom", "left", -90).renderTo("#bottom-left--90 svg");
mkPlot("left", "right", -90, 10).renderTo("#left-right--90-padded svg");
mkPlot("left", "right", -90).renderTo("#left-right--90 svg");
mkPlot("top", "right", -90, 10).renderTo("#top-right--90-padded svg");
mkPlot("top", "right", -90).renderTo("#top-right--90 svg");
mkPlot("right", "right", -90, 10).renderTo("#right-right--90-padded svg");
mkPlot("right", "right", -90).renderTo("#right-right--90 svg");
mkPlot("bottom", "right", -90, 10).renderTo("#bottom-right--90-padded svg");
mkPlot("bottom", "right", -90).renderTo("#bottom-right--90 svg");
mkPlot("left", "center", -90, 10).renderTo("#left-center--90-padded svg");
mkPlot("left", "center", -90).renderTo("#left-center--90 svg");
mkPlot("top", "center", -90, 10).renderTo("#top-center--90-padded svg");
mkPlot("top", "center", -90).renderTo("#top-center--90 svg");
mkPlot("right", "center", -90, 10).renderTo("#right-center--90-padded svg");
mkPlot("right", "center", -90).renderTo("#right-center--90 svg");
mkPlot("bottom", "center", -90, 10).renderTo("#bottom-center--90-padded svg");
mkPlot("bottom", "center", -90).renderTo("#bottom-center--90 svg");
}
$(init);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 text-center">
Left
<div class="row">
<div class="col-md-6 text-center">w/ Padding</div>
<div class="col-md-6 text-center">w/o Padding</div>
</div>
</div>
<div class="col-md-3 text-center">
Top
<div class="row">
<div class="col-md-6 text-center">w/ Padding</div>
<div class="col-md-6 text-center">w/o Padding</div>
</div>
</div>
<div class="col-md-3 text-center">
Right
<div class="row">
<div class="col-md-6 text-center">w/ Padding</div>
<div class="col-md-6 text-center">w/o Padding</div>
</div>
</div>
<div class="col-md-3 text-center">
Bottom
<div class="row">
<div class="col-md-6 text-center">w/ Padding</div>
<div class="col-md-6 text-center">w/o Padding</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-default-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-default">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-default-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-default">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-default-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-default">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-default-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-default">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Default Alignment
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-left-padded">
<svg ></svg>
</div>
<div class="col-md-6" id="left-left">
<svg ></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-left-padded">
<svg ></svg>
</div>
<div class="col-md-6" id="top-left">
<svg ></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-left-padded">
<svg ></svg>
</div>
<div class="col-md-6" id="right-left">
<svg ></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-left-padded">
<svg ></svg>
</div>
<div class="col-md-6" id="bottom-left">
<svg ></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Left Alignment
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-right-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-right">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-right-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-right">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-right-padded">
<svg ></svg>
</div>
<div class="col-md-6" id="right-right">
<svg ></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-right-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-right">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Right Alignment
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-center-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-center">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-center-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-center">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-center-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-center">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-center-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-center">
<svg></svg>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Center Alignment
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-default-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-default-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-default-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-default-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-default-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-default-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-default-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-default-90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Default Alignment, Rotated 90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-left-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-left-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-left-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-left-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-left-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-left-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-left-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-left-90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Left Alignment, Rotated 90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-right-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-right-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-right-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-right-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-right-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-right-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-right-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-right-90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Right Alignment, Rotated 90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-center-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-center-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-center-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-center-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-center-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-center-90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-center-90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-center-90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Center Alignment, Rotated 90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-default--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-default--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-default--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-default--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-default--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-default--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-default--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-default--90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Default Alignment, Rotated -90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-left--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-left--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-left--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-left--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-left--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-left--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-left--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-left--90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Left Alignment, Rotated -90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-right--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-right--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-right--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-right--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-right--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-right--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-right--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-right--90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Right Alignment, Rotated -90 °
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="left-center--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="left-center--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="top-center--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="top-center--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="right-center--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="right-center--90">
<svg></svg>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6" id="bottom-center--90-padded">
<svg></svg>
</div>
<div class="col-md-6" id="bottom-center--90">
<svg></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
Center Alignment, Rotated -90 °
</div>
</div>
</div>
</body>
</html>
@m4dc4p
Copy link
Author

m4dc4p commented Apr 4, 2016

Demonstrates use of "tickTextAlignment" and "tickTextPadding" attributes on Category axes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment