diff --git a/src/components/graph/drawGraphRegl.js b/src/components/graph/drawGraphRegl.js deleted file mode 100644 index 8b137891..00000000 --- a/src/components/graph/drawGraphRegl.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/graph/drawPointsRegl.js b/src/components/graph/drawPointsRegl.js index f9dacee5..50a1e826 100644 --- a/src/components/graph/drawPointsRegl.js +++ b/src/components/graph/drawPointsRegl.js @@ -6,11 +6,12 @@ export default function (regl) { precision mediump float; attribute vec2 position; attribute vec3 color; + attribute float size; uniform float distance; uniform mat4 projection, view; varying vec3 fragColor; void main() { - gl_PointSize = 10.0 / pow(distance, 2.5); + gl_PointSize = 7.0 / pow(distance, 2.5) + size; gl_Position = projection * view * vec4(position.x, -position.y, 0, 1); fragColor = color; }`, @@ -27,7 +28,8 @@ export default function (regl) { attributes: { position: regl.prop('position'), - color: regl.prop('color') + color: regl.prop('color'), + size: regl.prop('size') }, uniforms: { diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js index 658f937a..b78b2599 100644 --- a/src/components/graph/graph.js +++ b/src/components/graph/graph.js @@ -6,7 +6,6 @@ import {setupGraphElements, drawGraphUsingRenderQueue} from "./drawGraph"; import SectionHeader from "../framework/sectionHeader"; import { connect } from "react-redux"; import actions from "../../actions"; -import drawScatterplotRegl from "./drawGraphRegl"; import mat4 from 'gl-mat4'; import fit from 'canvas-fit'; @@ -15,24 +14,13 @@ import _regl from 'regl' import _drawPoints from './drawPointsRegl' // import data generators -const generatePoints = function (count) { - return Array(count).fill().map(function () { - return [ - Math.random() - 0.5, - Math.random() - 0.5 - ] - }) -} +import { + generateSizes, + generateColors, + generatePoints, + scaleRGB, +} from "./util"; -const generateColors = function (count) { - return Array(count).fill().map(function () { - return [ - Math.random(), - Math.random(), - Math.random() - ] - }) -} // set constants const count = 1993 @@ -83,6 +71,7 @@ class Graph extends React.Component { // preallocate buffers const pointBuffer = regl.buffer(generatePoints(count)) const colorBuffer = regl.buffer(generateColors(count)) + const sizeBuffer = regl.buffer(generateSizes(count)) regl.frame(({viewportWidth, viewportHeight}) => { @@ -93,6 +82,7 @@ class Graph extends React.Component { }) drawPoints({ + size: sizeBuffer, distance: camera.distance, color: colorBuffer, position: pointBuffer, @@ -108,6 +98,7 @@ class Graph extends React.Component { regl, pointBuffer, colorBuffer, + sizeBuffer, }) } @@ -141,25 +132,22 @@ class Graph extends React.Component { const positions = []; const colors = []; + const sizes = []; + const s = d3.scaleLinear() + .domain([0,1]) + .range([-.95, .95]) /* padding */ + + /* + Construct Vectors + */ _.each(nextProps.currentCellSelection, (cell, i) => { if (nextProps.graphMap[cell["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the cell array, check in reducer */ positions.push([ - nextProps.graphMap[cell["CellName"]][0], - nextProps.graphMap[cell["CellName"]][1] + s(nextProps.graphMap[cell["CellName"]][0]), + s(nextProps.graphMap[cell["CellName"]][1]) ]) - const scaleRGB = (input) => { - const outputMax = 1; - const outputMin = 0; - - const inputMax = 255; - const inputMin = 0; - - const percent = (input - inputMin) / (inputMax - inputMin); - return percent * (outputMax - outputMin) + outputMin; - } - let c = cell["__color__"]; if (c[0] !== "#") { @@ -178,11 +166,14 @@ class Graph extends React.Component { ]); } + sizes.push(cell["__selected__"] ? 4 : 1) + } }) this.state.pointBuffer(positions) this.state.colorBuffer(colors) + this.state.sizeBuffer(sizes) } } handleBrushSelectAction() { @@ -271,7 +262,7 @@ class Graph extends React.Component { >