Skip to content

Instantly share code, notes, and snippets.

@JulienAssouline

JulienAssouline/index.html

Last active November 15, 2018 18:12
Show Gist options
  • Save JulienAssouline/d4b52eac065c8c14f4f979b6a1736c1b to your computer and use it in GitHub Desktop.
Save JulienAssouline/d4b52eac065c8c14f4f979b6a1736c1b to your computer and use it in GitHub Desktop.
Download ZIP
regl barcode plot
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/regl@1.3.0/dist/regl.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
body,html{
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: center;
}
#canvas{
width: 90%;
}
</style>
</head>
<body>
<canvas id="canvas" class="plot"></canvas>
<script>
var margin = {
top: 40,
right: 40,
left: 40,
bottom: 40
}
var w = 400;
var h = 400;
var width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom;
// width_m = width + margin.left + margin.right,
// height_m = height + margin.top + margin.bottom
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var xScale = d3.scaleLinear()
.range([0, width])
var yScale = d3.scaleLinear()
.range([height, 0])
var regl = createREGL({
extensions: ['OES_standard_derivatives'],
canvas: canvas
});
regl.clear({color: [1, 1, 1, 1]})
d3.csv("random_data.csv", function(error, data){
data.forEach(function(d) {
d.random_data = +d.random_data;
})
yScale.domain([100000, d3.max(data, function(d) { return d.random_data })])
data.forEach(function(d, i) {
console.log(d)
d.position1 = [(w/2), yScale(d.random_data)]
d.position2 = [(w/3), yScale(d.random_data)]
})
// console.log(nested_data)
var value = data.filter(function(d) { return d.random_data == 1554460 })
console.log(value)
const drawDots = regl({
// fragment shader
frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}`,
// vertex shader
vert: `
precision mediump float;
attribute vec2 position;
attribute float pointWidth;
uniform float stageWidth;
uniform float stageHeight;
// helper function to transform from pixel space to normalized
// device coordinates (NDC). In NDC (0,0) is the middle,
// (-1, 1) is the top left and (1, -1) is the bottom right.
vec2 normalizeCoords(vec2 position) {
float x = position[0];
float y = position[1];
return vec2(
2.0 * ((x / stageWidth) - 0.5),
-(2.0 * ((y / stageHeight) - 0.5))
);
}
void main() {
gl_PointSize = pointWidth;
gl_Position = vec4(normalizeCoords(position), 0, 1);
}`,
attributes: {
// There will be a position value for each point
// we pass in
position: function(context, props) {
return props.points.map(function(point) {
return [point.position1 , point.position2]
});
},
// Now pointWidth is an attribute, as each
// point will have a different size.
pointWidth: function(context, props) {
return props.points.map(function(point) {
return [10,10];
})
},
},
// uniforms
uniforms: {
color: function(context, props) {
return [1,0,0,1]
},
stageWidth: regl.context("drawingBufferWidth"),
stageHeight: regl.context("drawingBufferHeight"),
},
count: function(context, props) {
return props.points.length * 2
},
primitive:"lines"
})
var points = data
// console.log(example)
const drawDot = regl({
// fragment shader
frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}`,
// vertex shader
vert: `
precision mediump float;
attribute vec2 position;
attribute float pointWidth;
uniform float stageWidth;
uniform float stageHeight;
// helper function to transform from pixel space to normalized
// device coordinates (NDC). In NDC (0,0) is the middle,
// (-1, 1) is the top left and (1, -1) is the bottom right.
vec2 normalizeCoords(vec2 position) {
float x = position[0];
float y = position[1];
return vec2(
2.0 * ((x / stageWidth) - 0.5),
-(2.0 * ((y / stageHeight) - 0.5))
);
}
void main() {
gl_PointSize = pointWidth;
gl_Position = vec4(normalizeCoords(position), 0, 1);
}`,
attributes: {
// There will be a position value for each point
// we pass in
position: function(context, props) {
return props.points.map(function(point) {
return [point.position1 , point.position2]
});
},
// Now pointWidth is an attribute, as each
// point will have a different size.
pointWidth: function(context, props) {
return props.points.map(function(point) {
return 10;
})
},
},
// uniforms
uniforms: {
color: function(context, props) {
return [0,0,0,1]
},
stageWidth: regl.context("drawingBufferWidth"),
stageHeight: regl.context("drawingBufferHeight"),
},
count: function(context, props) {
return props.points.length
},
primitive:"lines"
})
console.log(data)
regl.frame(function(context) {
// updateData(points);
drawDot({
pointWidth: 10,
points: value
});
drawDots({
pointWidth: 10,
points: points
});
});
});
</script>
</body>
</html>
Raw
random_data.csv
index random_data
0 112 465970.0
1 312 301411.0
2 640 302922.0
3 792 310925.0
4 858 325465.0
5 1058 309117.0
6 1310 483868.0
7 1387 303578.0
8 1527 437533.0
9 1781 311898.0
10 1860 317299.0
11 1948 300464.0
12 1975 443150.0
13 2340 323989.0
14 2421 307164.0
15 2446 321533.0
16 2467 546595.0
17 2517 319882.0
18 2578 337728.0
19 2643 330677.0
20 2666 527346.0
21 2739 340595.0
22 2787 436089.0
23 2855 535164.0
24 2882 311521.0
25 2975 376505.0
26 3128 323388.0
27 3160 301852.0
28 3323 479674.0
29 3377 390247.0
30 3403 858445.0
31 3459 322953.0
32 3531 389400.0
33 3535 300321.0
34 3636 301850.0
35 3897 333508.0
36 4222 329700.0
37 4257 305392.0
38 4312 316517.0
39 4319 1554460.0
40 4377 311305.0
41 4416 330430.0
42 4623 359732.0
43 4626 315948.0
44 4688 591519.0
45 4733 316214.0
46 4745 739855.0
47 5121 311870.0
48 5162 351215.0
49 5733 306937.0
50 5761 608601.0
51 5859 300878.0
52 6245 394095.0
53 6391 323925.0
54 6468 340917.0
55 6506 323531.0
56 6558 339824.0
57 6573 301015.0
58 7433 307130.0
59 7654 305889.0
60 7756 431073.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment