Skip to content

Commit

Permalink
density plot updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewluetgers
andrewluetgers committed Dec 14, 2017
1 parent 1069f4e commit 330e591
Show file tree
Hide file tree
Showing 5 changed files with 196 additions and 100 deletions.
4 changes: 2 additions & 2 deletions evaluate/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@
}

.plot>svg {
z-index: 2;
z-index: 1;
}

.plot>canvas {
z-index: 1;
z-index: 2;
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
Expand Down
1 change: 1 addition & 0 deletions evaluate/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"d3-selection": "^1.2.0",
"d3-shape": "^1.2.0",
"express": "^4.16.2",
"lodash": "^4.17.4",
"serve-static": "^1.13.1",
"superagent": "^3.8.2"
}
Expand Down
95 changes: 59 additions & 36 deletions evaluate/src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,41 @@ let flylsh = require('../../src/index'),

let data;

let plotData = [];
for(let row=0; row<100; row++) {
let r = [];
for(let col=0; col<100; col++) {
r[col] = Math.round(Math.random() * 1e3);
function genData(x, y, max) {
let plotData = [];
for(let row=0; row<x; row++) {
let r = [];
for(let col=0; col<y; col++) {
r[col] = Math.round(Math.random() * max);
}
plotData[row] = r;
}
plotData[row] = r;
return plotData;
}

densityPlot.plot("chart10", plotData, 200, 200, "BrBG");
//densityPlot.plot("chart10", plotData, 200, 200, "piyg");

densityPlot.plot("chart10", genData(100, 100, 1e3));
densityPlot.plot("chart10", genData(10, 10, 1e3), {simple: true, width: 200, height: 200});

densityPlot.plot("chart", plotData, 200, 200, "Viridis");
densityPlot.plot("chart1", plotData, 200, 200, "Rainbow");
densityPlot.plot("chart2", plotData, 200, 200, "Warm");
densityPlot.plot("chart3", plotData, 200, 200, "Cool");
densityPlot.plot("chart4", plotData, 200, 200, "Plasma");
densityPlot.plot("chart5", plotData, 200, 200, "Magma");
densityPlot.plot("chart5", plotData, 200, 200, "Inferno");
densityPlot.plot("chart6", plotData, 200, 200);
let data11 = genData(10, 10, 1e3);
densityPlot.plot("chart11", data11, {
scale: 20,
color: "Cool",
mousemove: function(x, y) {
console.log(x, y, data11[y][x]);
}
});



//densityPlot.plot("chart", plotData, 200, 200, "Viridis");
//densityPlot.plot("chart1", plotData, 200, 200, "Rainbow");
//densityPlot.plot("chart2", plotData, 200, 200, "Warm");
//densityPlot.plot("chart3", plotData, 200, 200, "Cool");
//densityPlot.plot("chart4", plotData, 200, 200, "Plasma");
//densityPlot.plot("chart5", plotData, 200, 200, "Magma");
//densityPlot.plot("chart5", plotData, 200, 200, "Inferno");
//densityPlot.plot("chart6", plotData, 200, 200);



Expand All @@ -42,44 +56,53 @@ function test() {
console.log("data loaded, evaluating flylsh...");
let d = data.slice(0, 100);

let hashVals = flylsh.hash(d, {
samples: 12,
kCells: 1280,
// lsh mode
let vals = flylsh.hash(d, {
debug: true,
kCells: 16,
hashLength: 16,
filter: "top",
bucketWidth: .1
tagType: "all",
});

console.log("flylsh hash vals", hashVals);
//let hashVals = flylsh.hash(d, {
// samples: 12,
// kCells: 1280,
// hashLength: 16,
// filter: "top",
// bucketWidth: .1
//});

console.log("lsh vals", vals);
//console.log("flylsh hash vals", hashVals);

}

}

//test();
test();



//
//loadData('../data/glove/glove10k.txt', function(data) {
////loadData('../data/mnist/mnist10k.txt', function(data) {
//loadData('../data/mnist/mnist10k.txt', function(data) {
// let d = data.slice(0, 100);
//
// // lsh mode
// //let hashVals = flylsh.hash(d, {
// // kCells: 16,
// // hashLength: 16,
// // tagType: "all",
// //});
//
// // fly mode
// let hashVals = flylsh.hash(d, {
// samples: 12,
// kCells: 1280,
// kCells: 16,
// hashLength: 16,
// tagType: "top",
// bucketWidth: .1
// tagType: "all",
// });
//
// //console.log(hashVals[0]);
// // fly mode
// //let hashVals = flylsh.hash(d, {
// // samples: 12,
// // kCells: 1280,
// // hashLength: 16,
// // tagType: "top",
// // bucketWidth: .1
// //});
//
// console.log(hashVals);
//});
170 changes: 111 additions & 59 deletions evaluate/src/densityPlot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,44 @@ import {
} from "d3-scale";
import * as chroma from "d3-scale-chromatic"
import { axisBottom, axisLeft } from "d3-axis";
import { max } from "d3-array";
import { max, min } from "d3-array";
import { color } from "d3-color";
import { select } from "d3-selection";
import { memoize, debounce } from 'lodash'

// https://github.com/lodash/lodash/issues/2403
function activate(func, wait=0, options={}) {
let mem = _.memoize(function() {
return _.debounce(func, wait, options)
}, options.resolver);
return function(){mem.apply(this, arguments).apply(this, arguments)}
}

let scales = Object.assign({}, {interpolateViridis, interpolateRainbow,
interpolateCool, interpolateWarm, interpolateMagma, interpolatePlasma,
interpolateInferno, interpolateCubehelixDefault}, chroma);

// see https://github.com/d3/d3-scale-chromatic for scale options
function plot(id, buckets, w, h, scale) {

let intScale = scales['interpolate'+scale] || interpolateRainbow,
// see https://github.com/d3/d3-scale-chromatic and https://github.com/d3/d3-scale for scale options
function plot(id, buckets, opts) {
opts = opts || {};
let o = opts,
simple = o.simple,
noAxes = simple || o.noAxes,
noLegend = simple || o.noLegend,
mSize = simple ? 10 : 20,
intScale = scales['interpolate'+o.color] || interpolateCool,
margin = {
top: mSize,
right: noLegend ? mSize : 50,
bottom: noAxes ? 0 : 30,
left: noAxes ? 0 : 50
},
dimX = buckets[0].length,
dimY = buckets.length,
margin = {top: 20, right: 50, bottom: 30, left: 50},
width = w || 200,
height = h || 200,
yScale = o.scale || (o.width ? o.width/dimX : 1),
xScale = o.scale || (o.height ? o.height/dimY : 1),
width = o.width || dimX * xScale,
height = o.height || dimY * yScale,
totalWidth = width+margin.left+margin.right,
totalHeight = height+margin.top+margin.bottom,
x = scaleLinear().range([0, width]),
Expand All @@ -46,62 +67,75 @@ function plot(id, buckets, w, h, scale) {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Compute the scale domains.
let zMax = max(buckets, r => max(r));
let zMax = max(buckets, r => max(r)),
zMin = min(buckets, r => min(r));

z.domain([0, zMax]);
x.domain([0, buckets[0].length]);
y.domain([0, buckets.length]);

// Add a legend for the color values.
let labels = 11,
yUnit = zMax / height,
labelSpace = height / labels,
labelIncrement = 100, // will show label if val % labelIncrement == 0
segments = 100,
legendWidth = 10,
textMargin = 6,
segHeight = (height) / segments,
if (!noLegend) {
// legend
let labelIncrement = o.legendIncrement, // will show label if val % labelIncrement == 0
segments = o.legendSegments || 10,
legendWidth = 10,
textMargin = 6,
segHeight = height / segments,
legend;

legend = svg.selectAll(".legend")
.data(z.ticks(segments+1).slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (width + legendWidth) + "," + (i * segHeight) + ")"; });

legend.append("rect")
.attr("width", legendWidth)
.attr("height", segHeight)
.style("fill", z);


legend.append("text")
.filter(d => !d || !(d % labelIncrement))
.attr("x", legendWidth + textMargin)
.attr("y", 10)
.attr("dy", ".35em")
.text(String);

// Add an x-axis with label.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(axisBottom().scale(x))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.attr("text-anchor", "end")
.text("Date");
.data(z.ticks(segments).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(" + (width + legendWidth) + "," + (i * segHeight) + ")";
});

legend.append("rect")
.attr("width", legendWidth)
.attr("height", segHeight)
.style("fill", z);

console.log("zMin", zMin);

let simpleFilter = d => d === zMin || d === zMax || d === (zMax-zMin)/2,
modFilter = d => d === zMin || d === zMax || !(d % labelIncrement);

legend.append("text")
.filter(labelIncrement ? modFilter : simpleFilter)
.attr("x", legendWidth + textMargin)
.attr("y", (d) => {return d === zMin ? -2 : (d === zMax ? 3 : 1)})
.attr("dy", ".35em")
.text(String);
}

// Add a y-axis with label.
svg.append("g")
.attr("class", "y axis")
.call(axisLeft().scale(y))
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("Value");
if (!noAxes) {
// x-axis

let xTicks = o.xTicks || 2,
yTicks = o.yTicks || 2;

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(axisBottom().ticks(xTicks).scale(x))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.attr("text-anchor", "end");

// y-axis
svg.append("g")
.attr("class", "y axis")
.call(axisLeft().ticks(yTicks).scale(y))
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)");
}

// canvas plot
let c = document.createElement("canvas"),
Expand All @@ -113,6 +147,25 @@ function plot(id, buckets, w, h, scale) {
c.setAttribute("style", `width:${width}px; height:${height}px; margin-left:${margin.left+1}px; margin-top:${margin.top}px`);
div.appendChild(c);

if (o.mousemove) {

let fn = activate(o.mousemove, 100, {
'leading': true,
'trailing': false
});

c.addEventListener("mousemove", e => {
let m = getMousePos(c, e);
fn(Math.floor(m.x/xScale), Math.floor(m.y/yScale));
});
}


function getMousePos(canvas, e) {
let rect = canvas.getBoundingClientRect();
return {x: e.clientX - rect.left, y: e.clientY - rect.top};
}

let imageData = ctx.getImageData(0, 0, c.width, c.height),
rgb = imageData.data,
i = 0;
Expand All @@ -128,7 +181,6 @@ function plot(id, buckets, w, h, scale) {
});
});
ctx.putImageData(imageData, 0, 0);

}


Expand Down
Loading

0 comments on commit 330e591

Please sign in to comment.