Skip to content

Instantly share code, notes, and snippets.

@rstarkov

rstarkov/plottable.html

Last active October 27, 2018 00:49
Show Gist options
  • Save rstarkov/0e3620a947479a013cffff109548f203 to your computer and use it in GitHub Desktop.
Save rstarkov/0e3620a947479a013cffff109548f203 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
plottable.html
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/3.4.1/plottable.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/3.8.3/plottable.min.js"></script>
</head>
<body style='background-color:#000'>
<div id="plt" style="width: 100%; height: 100%"></div>
<script>
var data = [
{
"r": 15, // <---- change to 5
"y": 30,
"g": 30,
},
{
"r": 30,
"y": 20,
"g": 10,
},
{
"r": 30,
"y": 20,
"g": 20,
},
{
"r": 30,
"y": 30,
"g": 30,
}
];
var yScale = new Plottable.Scales.Linear().domainMin(10).domainMax(100);
let xScale = new Plottable.Scales.Linear().domainMin(-1).domainMax(data.length);
let colorScale = new Plottable.Scales.Color()
.domain(["green", "yellow", "red"])
.range(['#08b025', '#ffff00', '#ff0000']);
var plot = new Plottable.Plots.StackedBar()
.addDataset(new Plottable.Dataset(data, { type: "r", color: "red" }))
.addDataset(new Plottable.Dataset(data, { type: "y", color: "yellow" }))
.addDataset(new Plottable.Dataset(data, { type: "g", color: "green" }))
.x((pt, i, ds) => { return i; }, xScale)
.y((pt, i, ds) => { return pt[ds.metadata().type]; }, yScale)
.attr('fill', (pt, i, ds) => { return ds.metadata().color; }, colorScale)
.renderTo(d3.select(document.getElementById('plt')));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment