Skip to content

Instantly share code, notes, and snippets.

@vinnitu

vinnitu/d3fc-webgl.js

Created October 15, 2019 16:50
Show Gist options
  • Save vinnitu/4c9bba6d8651d8593b1ec22729887a4e to your computer and use it in GitHub Desktop.
Save vinnitu/4c9bba6d8651d8593b1ec22729887a4e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3fc-webgl.js
(function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports,require('d3-selection'),require('@d3fc/d3fc-chart'),require('@d3fc/d3fc-rebind'),require('d3-scale'),require('d3-color'),require('d3-shape'),require('d3-array'),require('@d3fc/d3fc-series')):typeof define==='function'&&define.amd?define(['exports','d3-selection','@d3fc/d3fc-chart','@d3fc/d3fc-rebind','d3-scale','d3-color','d3-shape','d3-array','@d3fc/d3fc-series'],f):(g=g||self,f(g.fcWebgl={},g.d3,g.fc,g.fc,g.d3,g.d3,g.d3,g.d3,g.fc));}(this,function(exports, d3Selection, d3fcChart, d3fcRebind, d3Scale, d3Color, d3Shape, d3Array, d3fcSeries){'use strict';var cartesian = (function (xScale, yScale) {
var base = d3fcChart.chartCartesian(xScale, yScale);
var chart = function chart(selection) {
var result = base(selection);
selection.select('d3fc-canvas.plot-area').on('draw', function (d, i, nodes) {
var canvas = d3Selection.select(nodes[i]).select('canvas').node();
var series = base.canvasPlotArea();
series.context(canvas.getContext('webgl')).xScale(xScale).yScale(yScale);
series(d);
});
return result;
};
d3fcRebind.rebindAll(chart, base);
return chart;
});// Initialize a shader program, so WebGL knows how to draw our data
var initShaders = (function (gl, vsSource, fsSource) {
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); // Create the shader program
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); // If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}); // creates a shader of the given type, uploads the source and compiles it.
function loadShader(gl, type, source) {
var shader = gl.createShader(type); // Send the source to the shader object
gl.shaderSource(shader, source); // Compile the shader program
gl.compileShader(shader); // See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}var buffer = (function (gl) {
var glBuffer = gl.createBuffer();
var buffer = function buffer(array) {
// Select this buffer as the one to apply buffer operations to.
gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer); // Only create a copy if it's not already a Float32Array
var srcArray = array.constructor === Float32Array ? array : new Float32Array(array);
gl.bufferData(gl.ARRAY_BUFFER, srcArray, gl.STATIC_DRAW);
return glBuffer;
};
buffer.addr = function () {
return glBuffer;
};
return buffer;
});var baseShader = (function (gl, vsSource, fsSource) {
var numComponents = 2;
var positionBuffer = buffer(gl);
var lastColor = [-1, -1, -1, -1];
var shaderProgram = initShaders(gl, vsSource, fsSource);
var vertexLocation = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
var offsetLocation = gl.getUniformLocation(shaderProgram, 'uOffset');
var scaleLocation = gl.getUniformLocation(shaderProgram, 'uScale');
var seriesColorLocation = gl.getUniformLocation(shaderProgram, 'uSeriesColor');
var draw = function draw(positions, color) {
var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : gl.TRIANGLES;
var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var count = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
var fColor = color || [0.0, 0.0, 0.0, 0.0];
if (fColor.some(function (c, i) {
return c !== lastColor[i];
})) {
setColor(fColor);
}
positionBuffer(positions);
var vertexCount = count !== -1 ? count : positions.length / numComponents - offset;
gl.drawArrays(mode, offset, vertexCount);
};
draw.activate = function () {
setupProgram();
lastColor = [-1, -1, -1, -1];
};
draw.setModelView = function (_ref) {
var offset = _ref.offset,
scale = _ref.scale;
gl.uniform2fv(offsetLocation, offset);
gl.uniform2fv(scaleLocation, scale);
};
draw.shaderProgram = function () {
return shaderProgram;
};
draw.numComponents = function () {
if (!arguments.length) {
return numComponents;
}
numComponents = arguments.length <= 0 ? undefined : arguments[0];
return draw;
};
function setupProgram() {
// Tell WebGL to use our program when drawing
gl.useProgram(shaderProgram); // Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute.
{
var type = gl.FLOAT; // the data in the buffer is 32bit floats
var normalize = false; // don't normalize
var stride = 0; // how many bytes to get from one set of values to the next
// 0 = use type and numComponents above
var offset = 0; // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer.addr());
gl.vertexAttribPointer(vertexLocation, numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray(vertexLocation);
}
}
function setColor(color) {
gl.uniform4fv(seriesColorLocation, color);
}
return draw;
});// Vertex shader program
var vsSource = "\n attribute vec4 aVertexPosition;\n\n uniform vec2 uOffset;\n uniform vec2 uScale;\n\n void main() {\n vec2 vertex = vec2(aVertexPosition[0], aVertexPosition[1]);\n vec2 clipSpace = 2.0 * (vertex - uOffset) / uScale - 1.0;\n gl_Position = vec4(clipSpace, 0.0, 1.0);\n }\n";
var fsSource = "\n precision mediump float;\n uniform vec4 uSeriesColor;\n\n void main() {\n gl_FragColor = uSeriesColor;\n }\n"; // Available modes:
// gl.TRIANGLES
// gl.TRIANGLE_STRIP
// gl.TRIANGLE_FAN
// gl.LINES
// gl.LINES_STRIP
var raw = (function (gl) {
var base = baseShader(gl, vsSource, fsSource);
var draw = function draw(positions, color) {
var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : gl.TRIANGLES;
var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var count = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
base(positions, color, mode, offset, count);
};
d3fcRebind.rebindAll(draw, base);
return draw;
});var pointsBase = (function (gl, vsSource, fsSource) {
var base = baseShader(gl, vsSource, fsSource).numComponents(3);
var lastWidth = -1;
var lastStrokeColor = [-1, -1, -1, -1];
var edgeColorLocation = gl.getUniformLocation(base.shaderProgram(), 'uEdgeColor');
var lineWidthLocation = gl.getUniformLocation(base.shaderProgram(), 'uLineWidth');
var draw = function draw(positions, color) {
var lineWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var strokeColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var fColor = color || [0.0, 0.0, 0.0, 0.0];
var sColor = strokeColor || fColor;
if (lineWidth !== lastWidth || sColor.some(function (c, i) {
return c !== lastStrokeColor[i];
})) {
setColor(lineWidth, sColor);
lastWidth = lineWidth;
lastStrokeColor = sColor;
}
base(positions, color, gl.POINTS);
};
draw.activate = function () {
base.activate();
lastStrokeColor = [-1, -1, -1, -1];
};
function setColor(lineWidth, strokeColor) {
gl.uniform4fv(edgeColorLocation, strokeColor);
gl.uniform1f(lineWidthLocation, lineWidth);
}
d3fcRebind.rebindAll(draw, base, d3fcRebind.exclude('activate'));
return draw;
});// Vertex shader program
var vsSource$1 = "\nprecision lowp float;\nattribute vec4 aVertexPosition;\n\nuniform vec2 uOffset;\nuniform vec2 uScale;\nuniform float uLineWidth;\n\nvarying float vSize;\n\nvoid main() {\n vec2 vertex = vec2(aVertexPosition[0], aVertexPosition[1]);\n vec2 clipSpace = 2.0 * (vertex - uOffset) / uScale - 1.0;\n\n vSize = sqrt(aVertexPosition[2]) + uLineWidth / 2.0;\n gl_PointSize = vSize + 1.0;\n gl_Position = vec4(clipSpace, 0.0, 1.0);\n}";
var fsSource$1 = "\nprecision lowp float;\n\nuniform float uLineWidth;\nuniform vec4 uEdgeColor;\nuniform vec4 uSeriesColor;\n\nvarying float vSize;\n\nvoid main() {\n float dist = length(2.0 * gl_PointCoord - 1.0) * vSize;\n float inner = vSize - 2.0 * uLineWidth - 1.0;\n\n if (dist > vSize + 1.0) {\n discard;\n } else if (uEdgeColor[3] < 0.1) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n } else if (dist < inner) {\n gl_FragColor = uSeriesColor;\n } else {\n float rAlias = clamp((dist - vSize) / 2.0 + 0.5, 0.0, 1.0);\n vec4 transparent = vec4(0.0);\n vec4 edgeColor = rAlias * transparent + (1.0 - rAlias) * uEdgeColor;\n\n float rEdge = clamp(dist - inner, 0.0, 1.0);\n gl_FragColor = rEdge * edgeColor + (1.0 - rEdge) * uSeriesColor;\n }\n}";
var circles = (function (gl) {
var base = pointsBase(gl, vsSource$1, fsSource$1);
var draw = function draw(positions, color) {
var lineWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var strokeColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
base(positions, color, lineWidth, strokeColor);
};
d3fcRebind.rebindAll(draw, base);
return draw;
});// Vertex shader program
var vsSource$2 = "\nprecision lowp float;\nattribute vec4 aVertexPosition;\n\nuniform vec2 uOffset;\nuniform vec2 uScale;\nuniform float uLineWidth;\n\nvarying float vSize;\n\nvoid main() {\n vec2 vertex = vec2(aVertexPosition[0], aVertexPosition[1]);\n vec2 clipSpace = 2.0 * (vertex - uOffset) / uScale - 1.0;\n\n vSize = sqrt(aVertexPosition[2]) * 2.0 + uLineWidth / 2.0;\n gl_PointSize = vSize + 1.0;\n gl_Position = vec4(clipSpace, 0.0, 1.0);\n}";
var fsSource$2 = "\nprecision lowp float;\n\nuniform float uLineWidth;\nuniform vec4 uEdgeColor;\nuniform vec4 uSeriesColor;\nuniform sampler2D uSampler;\n\nvarying float vSize;\n\nbool edge(vec2 coord) {\n float w = uLineWidth / vSize;\n vec4 tex1 = texture2D(uSampler, coord + vec2(0, w), -0.5);\n vec4 tex2 = texture2D(uSampler, coord + vec2(0, -w), -0.5);\n vec4 tex3 = texture2D(uSampler, coord + vec2(w, 0), -0.5);\n vec4 tex4 = texture2D(uSampler, coord + vec2(-w, 0), -0.5);\n\n return (tex1[3] + tex2[3] + tex3[3] + tex4[3]) < 3.8;\n}\n\nvoid main() {\n vec4 edgeTex = texture2D(uSampler, gl_PointCoord, -0.5);\n\n if (uEdgeColor[3] < 0.1) {\n gl_FragColor = edgeTex;\n } else if (uLineWidth < 0.1) {\n gl_FragColor = uSeriesColor * edgeTex[3];\n } else {\n if (edge(gl_PointCoord)) {\n gl_FragColor = uEdgeColor * edgeTex[3];\n } else if (uSeriesColor[3] < 0.1) {\n gl_FragColor = edgeTex;\n } else {\n gl_FragColor = uSeriesColor;\n }\n }\n}";
var pointTextures = (function (gl) {
var base = pointsBase(gl, vsSource$2, fsSource$2);
var texture = gl.createTexture();
var samplerLocation = gl.getUniformLocation(base.shaderProgram(), 'uSampler');
var draw = function draw(positions, image, color) {
var lineWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var strokeColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
setupTexture(image);
base(positions, color, lineWidth, strokeColor);
};
function setupTexture(image) {
// Tell WebGL we want to affect texture unit 0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); // WebGL1 has different requirements for power of 2 images
// vs non power of 2 images so check if the image is a
// power of 2 in both dimensions.
if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
// Yes, it's a power of 2. Generate mips.
gl.generateMipmap(gl.TEXTURE_2D);
} else {
// No, it's not a power of 2. Turn off mips and set
// wrapping to clamp to edge
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
} // Tell the shader we bound the texture to texture unit 0
gl.uniform1i(samplerLocation, 0);
}
d3fcRebind.rebindAll(draw, base);
return draw;
});
function isPowerOf2(value) {
return (value & value - 1) === 0;
}var drawFunctions = {
raw: raw,
circles: circles,
pointTextures: pointTextures
};
var PRIVATE = '__d3fcAPI';
var helper = (function (gl) {
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
if (gl[PRIVATE]) return gl[PRIVATE];
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
var drawModules = {};
var modelView = null; // Helper API functions
var api = {};
var activated;
Object.keys(drawFunctions).forEach(function (key) {
api[key] = function () {
if (!drawModules[key]) {
// Lazy-load the shaders when used
drawModules[key] = drawFunctions[key](gl);
} // Activate the shader if not already activate
if (activated !== key) drawModules[key].activate();
activated = key;
drawModules[key].setModelView(modelView);
return drawModules[key].apply(drawModules, arguments);
};
});
api.applyScales = function (xScale, yScale) {
var x = convertScale(xScale, gl.canvas.width, false);
var y = convertScale(yScale, gl.canvas.height, true);
modelView = {
offset: [x.offset, y.offset],
scale: [x.scaleFactor, y.scaleFactor]
};
return {
pixel: {
x: x.pixelSize,
y: y.pixelSize
},
xScale: x.scale,
yScale: y.scale
};
};
var isLinear = function isLinear(scale) {
if (scale.domain && scale.range && scale.clamp && !scale.exponent && !scale.base) {
return !scale.clamp();
}
return false;
};
var convertScale = function convertScale(scale, screenSize) {
var invert = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var range = scale.range();
var domain = scale.domain();
var invertConst = invert ? -1 : 1; // screen: (0 -> screenSize), scale: (range[0] -> range[1])
if (isLinear(scale)) {
var asDate = domain[0] instanceof Date;
var numDomain = asDate ? domain.map(function (d) {
return d.valueOf();
}) : domain;
var scaleFn = asDate ? function (d) {
return d.valueOf();
} : function (d) {
return d;
}; // Calculate the screen-space domain for the projection
var domainSize = (numDomain[1] - numDomain[0]) * screenSize / (range[1] - range[0]); // numDomain[0] = screenDomainStart + range[0] * domainSize / screenSize;
var screenDomainStart = numDomain[0] - domainSize * range[0] / screenSize;
var screenDomain = [screenDomainStart, screenDomainStart + domainSize];
return {
pixelSize: Math.abs((screenDomain[1] - screenDomain[0]) / screenSize),
offset: screenDomain[invert ? 1 : 0],
scaleFactor: invertConst * (screenDomain[1] - screenDomain[0]),
scale: scaleFn
};
} else {
var screenRange = range.map(function (r) {
return 2 * r / screenSize - 1;
});
var factor = (screenRange[1] - screenRange[0]) / (range[1] - range[0]);
var _scaleFn = function _scaleFn(d) {
return (scale(d) - range[0]) * factor + screenRange[0];
};
return {
pixelSize: Math.abs(2 / screenSize),
offset: invert ? 1 : -1,
scaleFactor: invertConst * 2,
scale: _scaleFn
};
}
};
gl[PRIVATE] = api;
return api;
});var functor = (function (d) {
return typeof d === 'function' ? d : function () {
return d;
};
});// Checks that passes properties are 'defined', meaning that calling them with (d, i) returns non null values
function defined() {
var outerArguments = arguments;
return function (d, i) {
for (var c = 0, j = outerArguments.length; c < j; c++) {
if (outerArguments[c](d, i) == null) {
return false;
}
}
return true;
};
}// determines the offset required along the cross scale based
// on the series alignment
var alignOffset = (function (align, width) {
switch (align) {
case 'left':
return width / 2;
case 'right':
return -width / 2;
default:
return 0;
}
});var createBase = (function (initialValues) {
var env = Object.assign({}, initialValues);
var base = function base() {};
Object.keys(env).forEach(function (key) {
base[key] = function () {
if (!arguments.length) {
return env[key];
}
env[key] = arguments.length <= 0 ? undefined : arguments[0];
return base;
};
});
return base;
});var xyBase = (function () {
var baseValue = function baseValue() {
return 0;
};
var crossValue = function crossValue(d) {
return d.x;
};
var mainValue = function mainValue(d) {
return d.y;
};
var align = 'center';
var bandwidth = function bandwidth() {
return 5;
};
var orient = 'vertical';
var base = createBase({
decorate: function decorate() {},
defined: function defined$1(d, i) {
return defined(baseValue, crossValue, mainValue)(d, i);
},
xScale: d3Scale.scaleIdentity(),
yScale: d3Scale.scaleIdentity()
});
base.values = function (d, i) {
var width = bandwidth(d, i);
var offset = alignOffset(align, width);
var xScale = base.xScale();
var yScale = base.yScale();
if (orient === 'vertical') {
var y = yScale(mainValue(d, i), i);
var y0 = yScale(baseValue(d, i), i);
var x = xScale(crossValue(d, i), i) + offset;
return {
d: d,
x: x,
y: y,
y0: y0,
width: width,
height: y - y0,
origin: [x, y],
baseOrigin: [x, y0],
transposedX: x,
transposedY: y
};
} else {
var _y = xScale(mainValue(d, i), i);
var _y2 = xScale(baseValue(d, i), i);
var _x = yScale(crossValue(d, i), i) + offset;
return {
d: d,
x: _x,
y: _y,
y0: _y2,
width: width,
height: _y - _y2,
origin: [_y, _x],
baseOrigin: [_y2, _x],
transposedX: _y,
transposedY: _x
};
}
};
base.baseValue = function () {
if (!arguments.length) {
return baseValue;
}
baseValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
return base;
};
base.crossValue = function () {
if (!arguments.length) {
return crossValue;
}
crossValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
return base;
};
base.mainValue = function () {
if (!arguments.length) {
return mainValue;
}
mainValue = functor(arguments.length <= 0 ? undefined : arguments[0]);
return base;
};
base.bandwidth = function () {
if (!arguments.length) {
return bandwidth;
}
bandwidth = functor(arguments.length <= 0 ? undefined : arguments[0]);
return base;
};
base.align = function () {
if (!arguments.length) {
return align;
}
align = arguments.length <= 0 ? undefined : arguments[0];
return base;
};
base.orient = function () {
if (!arguments.length) {
return orient;
}
orient = arguments.length <= 0 ? undefined : arguments[0];
return base;
};
return base;
});var glBase = (function () {
var base = xyBase();
var context = null;
var cacheEnabled = false;
var glAPI = null;
var cached = null;
var glBase = function glBase(data, helperAPI) {
glAPI = helperAPI || helper(context);
};
glBase.context = function () {
if (!arguments.length) {
return context;
}
context = arguments.length <= 0 ? undefined : arguments[0];
return glBase;
};
glBase.cacheEnabled = function () {
if (!arguments.length) {
return cacheEnabled;
}
cacheEnabled = arguments.length <= 0 ? undefined : arguments[0];
cached = null;
return glBase;
};
glBase.cached = function () {
if (!arguments.length) {
return cached;
}
cached = cacheEnabled ? arguments.length <= 0 ? undefined : arguments[0] : null;
return glBase;
};
glBase.glAPI = function () {
return glAPI;
};
d3fcRebind.rebindAll(glBase, base);
return glBase;
});var red = '#c60';
var green = '#6c0';
var black = '#000';
var gray = '#ddd';
var darkGray = '#999';
var colors = {
red: red,
green: green,
black: black,
gray: gray,
darkGray: darkGray
};var toGl = function toGl(v) {
return v / 255;
};
var glColor = (function (value) {
if (!value) return null;
var c = d3Color.color(value);
return [toGl(c.r), toGl(c.g), toGl(c.b), Math.sqrt(c.opacity)];
});var bar = (function () {
var base = glBase();
var bar = function bar(data, helperAPI) {
base(data, helperAPI);
var context = base.context();
var glAPI = base.glAPI();
var scales = glAPI.applyScales(base.xScale(), base.yScale());
context.fillStyle = colors.darkGray;
context.strokeStyle = 'transparent';
base.decorate()(context, data, 0);
var fillColor = glColor(context.fillStyle);
var withLines = context.strokeStyle !== 'transparent';
var filteredData = data.filter(base.defined());
var projected = getProjectedData(filteredData, withLines, scales);
glAPI.raw(projected.triangles, fillColor, context.TRIANGLES);
if (projected.lines) {
var strokeColor = withLines ? glColor(context.strokeStyle) : null;
glAPI.raw(projected.lines, strokeColor, context.LINES);
}
};
var getProjectedData = function getProjectedData(data, withLines, scales) {
var pixel = scales.pixel;
var cachedProjected = base.cached();
if (cachedProjected && cachedProjected.pixel.x === pixel.x && (!withLines || cachedProjected.lines)) {
return cachedProjected;
}
var crossFn = base.crossValue();
var mainFn = base.mainValue();
var baseFn = base.baseValue();
var vertical = base.orient() === 'vertical'; // 2 triangles per bar, with 3 x/y vertices per triangle
var triangles = new Float32Array(data.length * 12);
var triangleIndex = 0;
var insertTriangle = function insertTriangle(x1, y1, x2, y2, x3, y3) {
triangles[triangleIndex++] = x1;
triangles[triangleIndex++] = y1;
triangles[triangleIndex++] = x2;
triangles[triangleIndex++] = y2;
triangles[triangleIndex++] = x3;
triangles[triangleIndex++] = y3;
}; // 3 lines per bar, with 2 x/y vertices per line
var lines = withLines ? new Float32Array(data.length * 12) : null;
var lineIndex = 0;
var insertLine = function insertLine(x1, y1, x2, y2) {
lines[lineIndex++] = x1;
lines[lineIndex++] = y1;
lines[lineIndex++] = x2;
lines[lineIndex++] = y2;
};
var insertBar = function insertBar(x1, y1, x2, y2, x3, y3, x4, y4) {
insertTriangle(x1, y1, x2, y2, x3, y3);
insertTriangle(x3, y3, x4, y4, x1, y1);
if (withLines) {
insertLine(x1, y1, x2, y2);
insertLine(x2, y2, x3, y3);
insertLine(x3, y3, x4, y4);
}
};
data.forEach(function (d, i) {
var width = bar.bandwidth()(d, i);
var offset = alignOffset(bar.align(), width) - width / 2;
if (vertical) {
var y = scales.yScale(mainFn(d, i), i);
var y0 = scales.yScale(baseFn(d, i), i);
var xl = scales.xScale(crossFn(d, i), i) + offset * pixel.x;
var xr = xl + width * pixel.x;
insertBar(xl, y0, xl, y, xr, y, xr, y0);
} else {
var x = scales.xScale(mainFn(d, i), i);
var x0 = scales.xScale(baseFn(d, i), i);
var yu = scales.yScale(crossFn(d, i), i) + offset * pixel.y;
var yd = yu + width * pixel.y;
insertBar(x0, yu, x, yu, x, yd, x0, yd);
}
});
var projectedData = {
triangles: triangles,
lines: lines,
pixel: pixel
};
base.cached(projectedData);
return projectedData;
};
d3fcRebind.rebindAll(bar, base, d3fcRebind.exclude('glAPI', 'cached'));
return bar;
});var line = (function () {
var base = glBase();
var line = function line(data, helperAPI) {
base(data, helperAPI);
var context = base.context();
var glAPI = base.glAPI();
var scales = glAPI.applyScales(base.xScale(), base.yScale());
context.strokeStyle = colors.black;
context.lineWidth = 1;
base.decorate()(context, data, 0); // Get triangle strip representing the projected data
var lineWidth = parseInt(context.lineWidth);
var strokeColor = glColor(context.strokeStyle);
var projected = data.constructor === Float32Array ? rawFloat32Data(data) : getProjectedData(data, scales);
if (lineWidth < 1.1) {
// Draw straight to WebGL as line strips
projected.batches.forEach(function (batch) {
glAPI.raw(projected.points, strokeColor, context.LINE_STRIP, batch.offset, batch.count);
});
} else {
// Convert to a triangle strip
projected.batches.forEach(function (batch) {
var projectedTriangles = getProjectedTriangles(projected.points, batch.offset, batch.count, scales, lineWidth);
glAPI.raw(projectedTriangles, strokeColor, context.TRIANGLE_STRIP);
});
}
};
var rawFloat32Data = function rawFloat32Data(data) {
return {
points: data,
batches: [{
offset: 0,
count: data.length / 2
}]
};
};
var getBatches = function getBatches(data) {
if (data.constructor === Float32Array) {
return [{
offset: 0,
count: data.length / 2
}];
} // Check the `defined` function for missing entries, and
// break the line into segments for drawing
var batches = [];
var offset = 0;
var pushBatch = function pushBatch(index) {
if (index > offset) {
batches.push({
offset: offset,
count: index - offset
});
}
offset = index + 1;
};
data.forEach(function (d, i) {
if (!line.defined()(d, i)) {
pushBatch(i);
}
});
pushBatch(data.length);
return batches;
};
var getProjectedData = function getProjectedData(data, scales) {
var cachedProjected = base.cached();
if (cachedProjected) {
return cachedProjected;
}
var crossFn = base.crossValue();
var mainFn = base.mainValue();
var vertical = base.orient() === 'vertical';
var points = new Float32Array(data.length * 2);
var index = 0;
if (vertical) {
data.forEach(function (d, i) {
points[index++] = scales.xScale(crossFn(d, i), i);
points[index++] = scales.yScale(mainFn(d, i), i);
});
} else {
data.forEach(function (d, i) {
points[index++] = scales.xScale(mainFn(d, i), i);
points[index++] = scales.yScale(crossFn(d, i), i);
});
}
var batches = getBatches(data);
var projected = {
points: points,
batches: batches
};
base.cached(projected);
return projected;
};
var getProjectedTriangles = function getProjectedTriangles(points, offset, count, scales, lineWidth) {
// Two vertices for each data point
var pixel = scales.pixel;
var result = new Float32Array(count * 4); // Split points based on normals
var target = 0;
var factor = 0.5 * lineWidth;
var start = offset * 2;
var end = start + count * 2;
for (var index = start; index < end; index += 2) {
var normal = getNormal(points, start, end, index, pixel);
var normalPixels = [normal[0] * pixel.x * factor, normal[1] * pixel.y * factor]; // Apply to the pair of points
result[target++] = points[index] + normalPixels[0];
result[target++] = points[index + 1] + normalPixels[1];
result[target++] = points[index] - normalPixels[0];
result[target++] = points[index + 1] - normalPixels[1];
}
return result;
};
var normaliseVector = function normaliseVector(vector) {
var length = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
return [vector[0] / length, vector[1] / length];
};
var lineNormal = function lineNormal(p1, p2) {
return normaliseVector([p2[1] - p1[1], -(p2[0] - p1[0])]);
};
var getNormal = function getNormal(points, start, end, index, pixel) {
var lastPoint = index > start && [points[index - 2] / pixel.x, points[index - 1] / pixel.y];
var thisPoint = [points[index] / pixel.x, points[index + 1] / pixel.y];
var nextPoint = index < end - 2 && [points[index + 2] / pixel.x, points[index + 3] / pixel.y];
if (!lastPoint) {
// Beginning of line
return lineNormal(thisPoint, nextPoint);
} else if (!nextPoint) {
// End of line
return lineNormal(lastPoint, thisPoint);
} // Calculate the miter join
var l1 = normaliseVector([thisPoint[0] - lastPoint[0], thisPoint[1] - lastPoint[1]]);
var l2 = normaliseVector([nextPoint[0] - thisPoint[0], nextPoint[1] - thisPoint[1]]);
var tangent = normaliseVector([l1[0] + l2[0], l1[1] + l2[1]]);
var miter = [-tangent[1], tangent[0]]; // Get length using dot product of the miter with one of the normals
var normal1 = lineNormal(lastPoint, thisPoint);
var length = 1 / (miter[0] * normal1[0] + miter[1] * normal1[1]);
return [miter[0] * length, miter[1] * length];
};
d3fcRebind.rebindAll(line, base, d3fcRebind.exclude('glAPI', 'cached', 'baseValue', 'bandwidth', 'align'));
return line;
});var area = (function () {
var base = glBase();
var area = function area(data, helperAPI) {
base(data, helperAPI);
var context = base.context();
var glAPI = base.glAPI();
var scales = glAPI.applyScales(base.xScale(), base.yScale());
context.fillStyle = colors.gray;
context.strokeStyle = 'transparent';
base.decorate()(context, data, 0);
var fillColor = glColor(context.fillStyle);
var withLines = context.strokeStyle !== 'transparent';
var projected = getProjectedData(data, withLines, scales);
projected.batches.area.forEach(function (batch) {
glAPI.raw(projected.triangles, fillColor, context.TRIANGLE_STRIP, batch.offset, batch.count);
});
if (projected.lines) {
var strokeColor = withLines ? glColor(context.strokeStyle) : null;
projected.batches.line.forEach(function (batch) {
glAPI.raw(projected.lines, strokeColor, context.LINE_STRIP, batch.offset, batch.count);
});
}
};
var getProjectedData = function getProjectedData(data, withLines, scales) {
var cachedProjected = base.cached();
if (cachedProjected && (!withLines || cachedProjected.lines)) {
return cachedProjected;
}
var crossFn = base.crossValue();
var mainFn = base.mainValue();
var baseFn = base.baseValue();
var vertical = base.orient() === 'vertical'; // 2 triangles per data point, but as a triangle-strip,
// so only 2 vertices per data point
var dataPoints = new Float32Array(data.length * 4);
var index = 0;
var lines = withLines ? new Float32Array(data.length * 2) : null;
var lineIndex = 0;
var crossoverCount = 0;
var areaBatches = {
offset: 0,
batches: []
};
var lineBatches = {
offset: 0,
batches: []
}; // "Batches" keep track of where we have to not-render points because
// the are not "defined"
var pushBatch = function pushBatch(batchSet, index) {
if (index > batchSet.offset) {
batchSet.batches.push({
offset: batchSet.offset,
count: index - batchSet.offset
});
}
batchSet.offset = index;
};
var pushBatches = function pushBatches() {
pushBatch(areaBatches, index / 2 + crossoverCount * 2);
pushBatch(lineBatches, lineIndex / 2);
};
var lastPositive;
data.forEach(function (d, i) {
if (area.defined()(d, i)) {
var p;
if (vertical) {
p = {
x: scales.xScale(crossFn(d, i), i),
y: scales.yScale(mainFn(d, i), i),
y0: scales.yScale(baseFn(d, i), i)
};
p.x0 = p.x;
p.positive = p.y - p.y0 && p.y - p.y0 > 0;
} else {
p = {
x: scales.xScale(mainFn(d, i), i),
y: scales.yScale(crossFn(d, i), i),
x0: scales.xScale(baseFn(d, i), i)
};
p.y0 = p.y;
p.positive = p.x - p.x0 !== 0 && p.x - p.x0 > 0;
}
dataPoints[index++] = p.x;
dataPoints[index++] = p.y;
dataPoints[index++] = p.x0;
dataPoints[index++] = p.y0;
if (withLines) {
lines[lineIndex++] = p.x;
lines[lineIndex++] = p.y;
}
if (lastPositive !== undefined && p.positive !== undefined && p.positive !== lastPositive) {
// If we swapped from positive to negative (or vice versa), we need to
// add a cross-over points (unless one of them was not "defined")
crossoverCount++;
}
lastPositive = p.positive;
} else {
pushBatches();
lastPositive = undefined;
}
});
pushBatches(); // If we have any cross-over points to add, insert them now
var triangles = crossoverCount > 0 ? insertCrossovers(data, dataPoints, crossoverCount) : dataPoints;
var batches = {
area: areaBatches.batches,
line: lineBatches.batches
};
var projectedData = {
triangles: triangles,
lines: lines,
batches: batches
};
base.cached(projectedData);
return projectedData;
};
var insertCrossovers = function insertCrossovers(data, dataPoints, crossoverCount) {
// We need to insert two extra vertices for each crossover
var triangles = new Float32Array(dataPoints.length + crossoverCount * 4);
var index = 0;
var triangleIndex = 0;
var vertical = base.orient() === 'vertical';
var last = null;
data.forEach(function (d, i) {
if (area.defined()(d, i)) {
var x = dataPoints[index++];
var y = dataPoints[index++];
var x0 = dataPoints[index++];
var y0 = dataPoints[index++];
var positive = vertical ? y - y0 > 0 : x - x0 > 0;
if (last && positive !== last.positive) {
// Insert the extra one at the crossover
var r;
if (vertical) {
r = Math.abs(last.y - last.y0) / (Math.abs(y - y0) + Math.abs(last.y - last.y0));
} else {
r = Math.abs(last.x - last.x0) / (Math.abs(x - x0) + Math.abs(last.x - last.x0));
}
var midx = last.x + r * (x - last.x);
var midy = last.y + r * (y - last.y); // Add the same point twice to skip rendering an unwanted triangle
triangles[triangleIndex++] = midx;
triangles[triangleIndex++] = midy;
triangles[triangleIndex++] = midx;
triangles[triangleIndex++] = midy;
}
last = {
positive: positive,
x: x,
y: y,
x0: x0,
y0: y0
};
triangles[triangleIndex++] = x;
triangles[triangleIndex++] = y;
triangles[triangleIndex++] = x0;
triangles[triangleIndex++] = y0;
} else {
last = null;
}
});
return triangles;
};
d3fcRebind.rebindAll(area, base, d3fcRebind.exclude('glAPI', 'cached', 'bandwidth', 'align'));
return area;
});var point = (function () {
var base = glBase();
var size = 70;
var type = d3Shape.symbolCircle;
var imagePromise = null;
var point = function point(data, helperAPI) {
base(data, helperAPI);
var context = base.context();
var glAPI = base.glAPI();
var scales = glAPI.applyScales(base.xScale(), base.yScale());
context.strokeStyle = type ? colors.black : undefined;
context.fillStyle = type ? colors.gray : undefined;
context.lineWidth = 1;
base.decorate()(context, data, 0);
var projectedData = data.constructor === Float32Array ? data : getProjectedData(data, scales);
var fillColor = glColor(context.fillStyle);
var lineWidth = context.strokeStyle !== 'transparent' ? parseInt(context.lineWidth) : 0;
var strokeColor = lineWidth > 0 ? glColor(context.strokeStyle) : null;
if (type === d3Shape.symbolCircle) {
glAPI.circles(projectedData, fillColor, lineWidth, strokeColor);
} else {
imagePromise.then(function (image) {
glAPI.pointTextures(projectedData, image, fillColor, lineWidth, strokeColor);
});
}
};
var getProjectedData = function getProjectedData(data, scales) {
var cachedProjected = base.cached();
if (cachedProjected) {
return cachedProjected;
}
var filteredData = data.filter(base.defined());
var crossFn = base.crossValue();
var mainFn = base.mainValue();
var sizeFn = typeof size === 'function' ? size : function () {
return size;
};
var vertical = base.orient() === 'vertical';
var result = new Float32Array(data.length * 3);
var index = 0;
if (vertical) {
filteredData.forEach(function (d, i) {
result[index++] = scales.xScale(crossFn(d, i), i);
result[index++] = scales.yScale(mainFn(d, i), i);
result[index++] = sizeFn(d);
});
} else {
filteredData.forEach(function (d, i) {
result[index++] = scales.xScale(mainFn(d, i), i);
result[index++] = scales.yScale(crossFn(d, i), i);
result[index++] = sizeFn(d);
});
}
base.cached(result);
return result;
};
point.size = function () {
if (!arguments.length) {
return size;
}
size = arguments.length <= 0 ? undefined : arguments[0];
return point;
};
point.type = function () {
if (!arguments.length) {
return type;
}
type = arguments.length <= 0 ? undefined : arguments[0];
if (type !== d3Shape.symbolCircle) {
imagePromise = getSymbolImage(type);
} else {
imagePromise = null;
}
return point;
};
point.image = function (img) {
type = null;
imagePromise = new Promise(function (resolve) {
if (img.complete) {
resolve(img);
} else {
img.onload = function () {
resolve(img);
};
}
});
return point;
};
d3fcRebind.rebindAll(point, base, d3fcRebind.exclude('glAPI', 'cached', 'baseValue', 'bandwidth', 'align'));
return point;
});
var textureSize = 256;
var getSymbolImage = function getSymbolImage(type) {
return new Promise(function (resolve) {
var canvas = document.createElement('canvas');
canvas.width = textureSize;
canvas.height = textureSize;
var context = canvas.getContext('2d');
context.fillStyle = '#000';
var halfSize = textureSize / 2;
context.translate(halfSize, halfSize);
context.beginPath();
d3Shape.symbol().type(type).size(halfSize * halfSize).context(context)();
context.closePath();
context.fill();
var image = new window.Image();
image.src = canvas.toDataURL();
image.onload = function () {
resolve(image);
};
});
};var groupedBase = (function (series) {
var bandwidth = function bandwidth() {
return 50;
};
var align = 'center'; // the offset scale is used to offset each of the series within a group
var offsetScale = d3Scale.scaleBand();
var grouped = createBase({
decorate: function decorate() {},
xScale: d3Scale.scaleLinear(),
yScale: d3Scale.scaleLinear()
}); // the bandwidth for the grouped series can be a function of datum / index. As a result
// the offset scale required to cluster the 'sub' series is also dependent on datum / index.
// This function computes the offset scale for a specific datum / index of the grouped series
grouped.offsetScaleForDatum = function (data, d, i) {
var width = bandwidth(d, i);
var offset = alignOffset(align, width);
var halfWidth = width / 2;
return offsetScale.domain(d3Array.range(0, data.length)).range([-halfWidth + offset, halfWidth + offset]);
};
grouped.bandwidth = function () {
if (!arguments.length) {
return bandwidth;
}
bandwidth = functor(arguments.length <= 0 ? undefined : arguments[0]);
return grouped;
};
grouped.align = function () {
if (!arguments.length) {
return align;
}
align = arguments.length <= 0 ? undefined : arguments[0];
return grouped;
};
d3fcRebind.rebindAll(grouped, offsetScale, d3fcRebind.includeMap({
'paddingInner': 'paddingOuter'
}));
return grouped;
});function grouped (series) {
var base = groupedBase(series);
var grouped = function grouped(data) {
data.forEach(function (seriesData, index) {
// create a composite scale that applies the required offset
var isVertical = series.orient() !== 'horizontal';
var baseScale = isVertical ? base.xScale() : base.yScale();
var compositeScale = function compositeScale(d, i) {
var offset = base.offsetScaleForDatum(data, d, i);
return baseScale(d) + offset(index) + offset.bandwidth() / 2;
};
d3fcRebind.rebindAll(compositeScale, baseScale, d3fcRebind.exclude('clamp', 'copy'));
if (isVertical) {
series.xScale(compositeScale);
series.yScale(base.yScale());
} else {
series.yScale(compositeScale);
series.xScale(base.xScale());
} // if the sub-series has a bandwidth, set this from the offset scale
if (series.bandwidth) {
series.bandwidth(function (d, i) {
return base.offsetScaleForDatum(data, d, i).bandwidth();
});
} // adapt the decorate function to give each series the correct index
series.decorate(function (c, d) {
return base.decorate()(c, d, index);
});
series(seriesData);
});
};
d3fcRebind.rebindAll(grouped, series, d3fcRebind.exclude('decorate', 'xScale', 'yScale'));
d3fcRebind.rebindAll(grouped, base, d3fcRebind.exclude('offsetScaleForDatum'));
return grouped;
}Object.defineProperty(exports,'seriesWebglMulti',{enumerable:true,get:function(){return d3fcSeries.seriesCanvasMulti;}});Object.defineProperty(exports,'seriesWebglRepeat',{enumerable:true,get:function(){return d3fcSeries.seriesCanvasRepeat;}});exports.cartesian=cartesian;exports.seriesWebglArea=area;exports.seriesWebglBar=bar;exports.seriesWebglGrouped=grouped;exports.seriesWebglLine=line;exports.seriesWebglPoint=point;Object.defineProperty(exports,'__esModule',{value:true});}));//# sourceMappingURL=d3fc-webgl.js.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment