Plottable (bars) - minimal working example by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Plottable</title>
  <link rel="stylesheet" href="./plottable.css" charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="./plottable.js"></script>
</head>
<body>
  <svg id="bars" height="500"></svg>

  <script>
var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, 
			{ x: 3, y: 2 }, { x: 4, y: 4 }, 
			{ x: 5, y: 3 }, { x: 6, y: 5 }];

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();

var plot = new Plottable.Plots.Bar()
  .addDataset(new Plottable.Dataset(data))
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .animated(true)
  .renderTo("svg#bars");

window.addEventListener("resize", function() {
  plot.redraw();
});
  </script>
</body>
</html>

plottable.css


.plottable-colors-0 {
  background-color: #5279c7; /* INDIGO */
}

.plottable-colors-1 {
  background-color: #fd373e; /* CORAL_RED */
}

.plottable-colors-2 {
  background-color: #63c261; /* FERN */
}

.plottable-colors-3 {
  background-color: #fad419; /* BRIGHT_SUN */
}

.plottable-colors-4 {
  background-color: #2c2b6f; /* JACARTA */
}

.plottable-colors-5 {
  background-color: #ff7939; /* BURNING_ORANGE */
}

.plottable-colors-6 {
  background-color: #db2e65; /* CERISE_RED */
}

.plottable-colors-7 {
  background-color: #99ce50; /* CONIFER */
}

.plottable-colors-8 {
  background-color: #962565; /* ROYAL_HEATH */
}

.plottable-colors-9 {
  background-color: #06cccc; /* ROBINS_EGG_BLUE */
}

svg.plottable {
  display : block; /* SVGs must be block elements for width/height calculations to work in Firefox. */
  pointer-events: visibleFill;
}

.plottable .background-fill {
  fill: none;
  pointer-events: none;
}

.plottable .bounding-box {
  /* Invisible pink bounding-box to allow for collision testing */
  fill: pink;
  visibility: hidden;
}

.plottable .label text {
  font-family: "Helvetica Neue", sans-serif;
  fill: #32313F;
}

.plottable .bar-label-text-area text {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-style: italic;
}

.plottable .label-area text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
}

.plottable .light-label text {
  fill: white;
}

.plottable .dark-label text {
  fill: #32313F;
}

.plottable .off-bar-label text {
  fill: #32313F;
}

.plottable .stacked-bar-label text {
  fill: #32313F;
  font-style: normal;
}

.plottable .stacked-bar-plot .off-bar-label {
  /* HACKHACK #2795: correct off-bar label logic to be implemented on StackedBar */
  visibility: hidden !important;
}

.plottable .axis-label text {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: normal;
  text-transform: uppercase;
}

.plottable .title-label text {
  font-size: 20px;
  font-weight: bold;
}

.plottable .axis line.baseline {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis line.tick-mark {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: normal;
}

.plottable .axis .annotation-circle {
  fill: white;
  stroke-width: 1px;
  stroke: #CCC;
}

.plottable .axis .annotation-line {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis .annotation-rect {
  stroke: #CCC;
  stroke-width: 1px;
  fill: white;
}

.plottable .bar-plot .baseline {
  stroke: #999;
}

.plottable .gridlines line {
  stroke: #3C3C3C; /* hackhack: gridlines should be solid; see #820 */
  opacity: 0.25;
  stroke-width: 1px;
}

.plottable .selection-box-layer .selection-area {
  fill: black;
  fill-opacity: 0.03;
  stroke: #CCC;
}
/* DragBoxLayer */
.plottable .drag-box-layer.x-resizable .drag-edge-lr {
  cursor: ew-resize;
}
.plottable .drag-box-layer.y-resizable .drag-edge-tb {
  cursor: ns-resize;
}

.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tl {
  cursor: nwse-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-tr {
  cursor: nesw-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-bl {
  cursor: nesw-resize;
}
.plottable .drag-box-layer.x-resizable.y-resizable .drag-corner-br {
  cursor: nwse-resize;
}

.plottable .drag-box-layer.movable .selection-area {
  cursor: move; /* IE fallback */
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
}

.plottable .drag-box-layer.movable .selection-area:active {
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/* /DragBoxLayer */

.plottable .guide-line-layer line.guide-line {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .drag-line-layer.enabled.vertical line.drag-edge {
  cursor: ew-resize;
}

.plottable .drag-line-layer.enabled.horizontal line.drag-edge {
  cursor: ns-resize;
}

.plottable .legend text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: normal;
}

.plottable .interpolated-color-legend rect.swatch-bounding-box {
  fill: none;
  stroke: #CCC;
  stroke-width: 1px;
  pointer-events: none;
}

.plottable .waterfall-plot line.connector {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .pie-plot .arc.outline {
  stroke-linejoin: round;
}