Merge pull request #53 from palantir/demo-day

Demo day
palantir · Feb 4, 2014 · 86dfac7 · 86dfac7
2 parents 1526e6a + 7baf7a7
commit 86dfac7
Show file tree

Hide file tree

Showing 13 changed files with 384 additions and 14 deletions.
diff --git a/examples/demo-day-crazy.css b/examples/demo-day-crazy.css
@@ -0,0 +1,34 @@
+.demo-table-title text {
+  text-decoration: line-through;
+  fill: yellow;
+  font-family: Times;
+}
+
+.scatterplot-title text {
+  font-size: 24pt;
+  fill: magenta;
+  font-family: monospace;
+}
+
+.histogram-title text {
+  font-size: 24pt;
+  fill: cyan;
+  font-family: cursive;
+}
+
+rect {
+  fill: green;
+}
+
+circle {
+  fill: orange;
+}
+
+.selected-point {
+  fill: black;
+}
+
+.drag-box {
+  fill: red;
+  opacity: 0.5;
+}
diff --git a/examples/demo-day-crazy.html b/examples/demo-day-crazy.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<head>
+  <link href="../style.css" type="text/css" rel="stylesheet" />
+  <link href="demo-day-crazy.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<br><hr><br>
+<svg id="table" width="800px" height="600px"></svg>
+<br><hr><br>
+
+
+<script type="text/javascript"> window.demoName = "demo-day"; //HACK HACK </script>
+<script src="../Lib/chai/chai.js"></script>
+<script src="../Lib/lodash.js"></script>
+<script src="../Lib/d3.ascii.js"></script>
+<script src="../plottable.js"></script>
+<script src="examples.js"></script>
+
+</body>
diff --git a/examples/demo-day.css b/examples/demo-day.css
@@ -0,0 +1,14 @@
+.demo-table-title text {
+  text-decoration: underline;
+}
+
+.scatterplot-title text {
+  font-size: 24pt;
+}
+
+.histogram-title text {
+  font-size: 24pt;
+
+.axis-label text {
+  font-size: 12pt;
+}
diff --git a/examples/demo-day.html b/examples/demo-day.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<head>
+  <link href="../style.css" type="text/css" rel="stylesheet" />
+  <link href="demo-day.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<br><hr><br>
+<svg id="table" width="800px" height="600px"></svg>
+<br><hr><br>
+
+
+<script type="text/javascript"> window.demoName = "demo-day"; //HACK HACK </script>
+<script src="../Lib/chai/chai.js"></script>
+<script src="../Lib/lodash.js"></script>
+<script src="../Lib/d3.ascii.js"></script>
+<script src="../plottable.js"></script>
+<script src="examples.js"></script>
+
+</body>
diff --git a/examples/demo.ts b/examples/demo.ts
@@ -168,10 +168,11 @@ var yAxis = new YAxis(yScale, "left");
 
 var bucketData = makeRandomBucketData(10, 10, 80);
 
+var replacementData = makeRandomBucketData(5, 20, 80);
+
 var BarRenderArea = new BarRenderer(bucketData, xScale, yScale);
 var basicTable = new Table([[yAxis, BarRenderArea], [null, xAxis]])
 basicTable.anchor(svg6);
 basicTable.computeLayout();
 basicTable.render();
-
 } // hackhack
diff --git a/examples/demo1.html b/examples/demo1.html
@@ -4,6 +4,11 @@
   <link href="../style.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
+
+<h1> Bar Renderer </h1>
+<svg id="svg6"></svg><br><hr><br>
+
+
 <h1> Basic TSC </h1>
 <svg id="svg1"></svg><br><hr><br>
 <h1> Chartbag of timeseriescharts </h1>
@@ -14,8 +19,6 @@ <h1> TSC with subplots, varying # of axes, and sparkline </h1>
 <svg id="svg4"></svg><br><hr><br>
 <svg id="svg5"></svg><br><hr><br>
 
-<h1> Bar Renderer </h1>
-<svg id="svg6"></svg><br><hr><br>
 
 <script src="../Lib/d3.ascii.js"></script>
 <script src="../Lib/lodash.js"></script>

diff --git a/examples/demoDay.ts b/examples/demoDay.ts
@@ -0,0 +1,140 @@
+///<reference path="../lib/d3.d.ts" />
+
+///<reference path="../src/table.ts" />
+///<reference path="../src/renderer.ts" />
+///<reference path="../src/interaction.ts" />
+///<reference path="../src/labelComponent.ts" />
+///<reference path="../src/axis.ts" />
+///<reference path="../src/scale.ts" />
+///<reference path="exampleUtil.ts" />
+
+if ((<any> window).demoName === "demo-day") {
+var N_BINS = 25;
+function makeScatterPlotWithSparkline(data) {
+  var s: any = {};
+  s.xScale = new LinearScale();
+  s.yScale = new LinearScale();
+  s.leftAxis = new YAxis(s.yScale, "left");
+  var leftAxisTable = new Table([[new AxisLabel("y", "vertical-left"), s.leftAxis]]);
+  leftAxisTable.colWeight(0);
+  s.xAxis = new XAxis(s.xScale, "bottom");
+  var xAxisTable = new Table([[s.xAxis], [new AxisLabel("x")]]);
+  xAxisTable.rowWeight(0);
+
+  s.renderer = new CircleRenderer(data, s.xScale, s.yScale, null, null, 1.5);
+  s.xSpark = new LinearScale();
+  s.ySpark = new LinearScale();
+  s.sparkline = new CircleRenderer(data, s.xSpark, s.ySpark, null, null, 0.5);
+  s.sparkline.rowWeight(0.25);
+  var r1 = [leftAxisTable, s.renderer];
+  var r2 = [null, xAxisTable];
+  var r3 = [null, s.sparkline];
+  s.table = new Table([r1,r2,r3]);
+  return s;
+}
+
+function makeHistograms(data: any[]) {
+  var h: any = {};
+  var xExtent = d3.extent(data, (d) => d.x);
+  h.xScale1 = new LinearScale().domain(xExtent);
+  h.yScale1 = new LinearScale();
+  h.bin1 = makeBinFunction((d) => d.x, xExtent, N_BINS);
+  var data1 = h.bin1(data);
+  var ds1 = {data: data1, seriesName: "xVals"}
+  h.renderer1 = new BarRenderer(ds1, h.xScale1, h.yScale1);
+  h.xAxis1 = new XAxis(h.xScale1, "bottom");
+  h.yAxis1 = new YAxis(h.yScale1, "right");
+  var labelX1Table = new Table([[h.xAxis1], [new AxisLabel("X values")]]);
+  labelX1Table.rowWeight(0);
+  var labelY1Table = new Table([[h.yAxis1, new AxisLabel("Counts", "vertical-right")]]);
+  labelY1Table.colWeight(0);
+  var table1 = new Table([[h.renderer1, labelY1Table], [labelX1Table, null]]);
+
+  var yExtent = d3.extent(data, (d) => d.y);
+  h.xScale2 = new LinearScale().domain(yExtent);
+  h.yScale2 = new LinearScale();
+  h.bin2 = makeBinFunction((d) => d.y, yExtent, N_BINS);
+  var data2 = h.bin2(data);
+  var ds2 = {data: data2, seriesName: "yVals"}
+  h.renderer2 = new BarRenderer(ds2, h.xScale2, h.yScale2);
+  h.xAxis2 = new XAxis(h.xScale2, "bottom");
+  h.yAxis2 = new YAxis(h.yScale2, "right");
+  var labelX2Table = new Table([[h.xAxis2], [new AxisLabel("Y values")]]);
+  labelX2Table.rowWeight(0);
+  var labelY2Table = new Table([[h.yAxis2, new AxisLabel("Counts", "vertical-right")]]);
+  labelY2Table.colWeight(0);
+  var table2 = new Table([[h.renderer2, labelY2Table], [labelX2Table, null]]);
+
+  h.table = new Table([[table1], [table2]]);
+  h.table.rowPadding = 5;
+  h.table.colPadding = 5;
+  return h;
+}
+
+function makeScatterHisto(data) {
+  var s = makeScatterPlotWithSparkline(data);
+  var h = makeHistograms(data.data);
+  var r = [s.table, h.table];
+  var titleRow = [ new TitleLabel("Random Data").classed("scatterplot-title", true),
+                    new TitleLabel("Histograms").classed("histogram-title", true) ];
+  var chartTable = new Table([titleRow, r]);
+  chartTable.colPadding = 10;
+  var table = new Table([[new TitleLabel("Glorious Demo Day Demo of Glory").classed("demo-table-title", true)], [chartTable]]);
+
+  return {table: table, s: s, h: h};
+}
+
+function coordinator(chart: any, dataset: IDataset) {
+  var scatterplot = chart.s;
+  var histogram = chart.h;
+  chart.c = {};
+
+  var lastSelection = null;
+  var selectionCallback = (selection: D3.Selection) => {
+    if (lastSelection != null) lastSelection.classed("selected-point", false);
+    selection.classed("selected-point", true);
+    lastSelection = selection;
+  }
+
+  var data = dataset.data;
+  // var lastSelectedData = null;
+  var dataCallback = (selectedIndices: number[]) => {
+    var selectedData = grabIndices(data, selectedIndices);
+    // selectedData.forEach((d) => d.selected = true);
+    // if (lastSelectedData != null) lastSelectedData.forEach((d) => d.selected = false);
+    // lastSelectedData = selectedData;
+    var xBins = histogram.bin1(selectedData);
+    var yBins = histogram.bin2(selectedData);
+    chart.c.xBins = xBins;
+    chart.c.yBins = yBins;
+    histogram.renderer1.data({seriesName: "xBins", data: xBins})
+    histogram.renderer2.data({seriesName: "yBins", data: yBins})
+    histogram.renderer1.render();
+    histogram.renderer2.render();
+  };
+  var areaInteraction = new AreaInteraction(scatterplot.renderer, null, selectionCallback, dataCallback);
+  var zoomCallback = (indices) => {areaInteraction.clearBox(); dataCallback(indices)};
+  chart.c.zoom = new BrushZoomInteraction(scatterplot.sparkline, scatterplot.xScale, scatterplot.yScale, zoomCallback);
+}
+
+function grabIndices(itemsToGrab: any[], indices: number[]) {
+  return indices.map((i) => itemsToGrab[i]);
+}
+var clump1 = makeNormallyDistributedData(300, -10, 5, 7, 1);
+var clump2 = makeNormallyDistributedData(300, 2, 0.5, 3, 3);
+var clump3 = makeNormallyDistributedData(30, 5, 10, -3, 9);
+var clump4 = makeNormallyDistributedData(200, -25, 1, 20, 5);
+
+var clumpData = clump1.concat(clump2, clump3, clump4);
+var dataset = {seriesName: "clumpedData", data: clumpData};
+
+var chartSH = makeScatterHisto(dataset);
+
+coordinator(chartSH, dataset);
+
+var svg = d3.select("#table");
+chartSH.table.anchor(svg);
+chartSH.table.computeLayout();
+chartSH.table.render();
+
+}
diff --git a/examples/exampleUtil.ts b/examples/exampleUtil.ts
@@ -9,6 +9,50 @@ function makeRandomData(numPoints, scaleFactor=1): IDataset {
   return {"data": data, "seriesName": "random-data"};
 }
 
+function makeNormallyDistributedData(n=100, xMean?, xStdDev?, yMean?, yStdDev?) {
+  var results = [];
+  var x = d3.random.normal(xMean, xStdDev);
+  var y = d3.random.normal(yMean, yStdDev);
+  for (var i=0; i<n; i++) {
+    var r = {x: x(), y: y()};
+    results.push(r);
+  }
+  return results;
+}
+function makeBinFunction(accessor, range, nBins) {
+  return (d) => binByVal(d, accessor, range, nBins);
+}
+
+function binByVal(data: any[], accessor: IAccessor, range=[0,100], nBins=10) {
+  if (accessor == null) {accessor = (d) => d.x};
+  var min = range[0];
+  var max = range[1];
+  var spread = max-min;
+  var binBeginnings = _.range(nBins).map((n) => min + n * spread / nBins);
+  var binEndings = _.range(nBins)   .map((n) => min + (n+1) * spread / nBins);
+  var counts = new Array(nBins);
+  _.range(nBins).forEach((b, i) => counts[i] = 0);
+  data.forEach((d) => {
+    var v = accessor(d);
+    var found = false;
+    for (var i=0; i<nBins; i++) {
+      if (v <= binEndings[i]) {
+        counts[i]++;
+        found = true;
+        break;
+      }
+    }
+    if (!found) {counts[counts.length-1]++};
+  });
+  var bins = counts.map((count, i) => {
+    var bin: any = {};
+    bin.x = binBeginnings[i];
+    bin.x2 = binEndings[i];
+    bin.y = count;
+    return bin;
+  })
+  return bins;
+}
 function makeRandomBucketData(numBuckets: number, bucketWidth: number, maxValue = 10): IDataset {
   var data = [];
   for (var i=0; i < numBuckets; i++) {

diff --git a/examples/tsc-demo.html b/examples/tsc-demo.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<head>
+  <link href="../style.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<h1> Basic TSC </h1>
+<svg id="table" width="800px" height="600px"></svg><br><hr><br>
+
+
+<script type="text/javascript"> window.demoName = "tsc-demo"; //HACK HACK </script>
+<script src="../Lib/chai/chai.js"></script>
+<script src="../Lib/lodash.js"></script>
+<script src="../Lib/d3.ascii.js"></script>
+<script src="../plottable.js"></script>
+<script src="examples.js"></script>
+
+</body>
diff --git a/examples/tscDemo.ts b/examples/tscDemo.ts
@@ -0,0 +1,32 @@
+///<reference path="../lib/d3.d.ts" />
+
+///<reference path="../src/table.ts" />
+///<reference path="../src/renderer.ts" />
+///<reference path="../src/interaction.ts" />
+///<reference path="../src/labelComponent.ts" />
+///<reference path="../src/axis.ts" />
+///<reference path="../src/scale.ts" />
+///<reference path="exampleUtil.ts" />
+
+if ((<any> window).demoName === "tsc-demo") {
+
+var yScale = new LinearScale();
+var xScale = new LinearScale();
+var left = new YAxis(yScale, "left");
+var data = makeRandomData(1000, 200);
+var renderer = new LineRenderer(data, xScale, yScale);
+var bottomAxis = new XAxis(xScale, "bottom");
+
+var chart = new Table([[left, renderer]
+                      ,[null, bottomAxis]]);
+
+var outerTable = new Table([ [new TitleLabel("A Chart")],
+                             [chart] ])
+outerTable.xMargin = 10;
+outerTable.yMargin = 10;
+
+var svg = d3.select("#table");
+outerTable.anchor(svg);
+outerTable.computeLayout();
+outerTable.render();
+}
diff --git a/index.html b/index.html
@@ -11,5 +11,8 @@
 <h1><a href="tests.html">Tests</a></h1>
 <h1><a href="examples/demo1.html">The old demo</a></h1>
 <h1><a href="examples/sparkline-demo.html">Sparkline demo</a></h1>
+<h1><a href="examples/demo-day.html">Demo Day</a></h1>
+<h1><a href="examples/demo-day-crazy.html">Demo Day With Crazy CSS</a></h1>
+<h1><a href="examples/tsc-demo.html">TSC Demo</a></h1> <a href="examples/tscDemo.ts">(the code)</a>
 
 </body>