Skip to content

Instantly share code, notes, and snippets.

View darosh's full-sized avatar
🏠
Working from home.

Jan Forst darosh

🏠
Working from home.
96 followers · 5 following
View GitHub Profile
@darosh
darosh / index.html
Last active October 18, 2015 17:24 — forked from mbostock/.block
Merging States with Presimplify Bug?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state {
fill: #ccc;
}
.state-boundary {
fill: none;
@darosh
darosh / README.md
Last active October 18, 2015 23:57
Zoom to Group of Countries IV
@darosh
darosh / README.md
Last active February 3, 2018 12:54
Countries & Events
  • Space/Enter keys: Pause/Play
  • Left/Right keys: Previous/Next
  • Pan & Zoom: when paused
@darosh
darosh / README.md
Last active October 30, 2015 11:36
Planetary Grid Browser I
@darosh
darosh / README.md
Last active October 30, 2015 11:55
Planetary Grid Browser II
@darosh
darosh / index.html
Last active November 4, 2015 12:16
2D with stacksgl
<!DOCTYPE html>
<meta charset="UTF-8">
<body style="font-family: sans-serif;">
<div style="float: left;">
<div style="width: 478px; height: 478px; position: relative; border: 1px solid #ccc; overflow: hidden;">
<div style="background-color: rgba(255,0,0,0.5); width: 250px; height: 250px; position: absolute;"></div>
<div style="background-color: rgba(0,0,255,0.25); width: 250px; height: 250px; position: absolute; left: 125px; top: 125px;"></div>
<div style="background-color: rgba(0,0,0,0.12); width: 125px; height: 125px; position: absolute; left: 375px; top: 375px;"></div>
<div style="background-color: rgba(255,255,0,0.5); width: 250px; height: 250px; position: absolute; left: 125px; top: 0; border-radius: 125px;"></div>
<div style="position: absolute; left: 375px; bottom: 0; color: rgba(0, 0, 0, 0.25); font-size: 36px; line-height: 28px; font-family: Arial; height: 28px;">
@darosh
darosh / README.md
Last active March 20, 2020 13:20
Benchmark

Notes

  • inspired by pjanik’s blocks
  • animation frame and FPS calculation powered by d3.timer
  • 3D based frameworks are producing a lot of DOM elements in SVG renderers thanks to shape triangulation
  • some test have limited number of objects because of high memory needs or incomplete/reference implementation (triangles)
  • click run link or run single test in the table
  • path is using d3-path
  • stackgl based on this block
@darosh
darosh / index.html
Last active November 5, 2015 14:56
Arrow SMIL/CSS/Web Animation
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
svg {
border: 1px solid #ccc;
display: block;
margin: 8px 0;
}
div {
@darosh
darosh / index.html
Last active November 5, 2015 14:55
Arrow SMIL/CSS Animation II
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
svg {
border: 1px solid #ccc;
display: block;
margin: 8px 0;
}
div {
@darosh
darosh / bench-two-rectangles.js
Last active November 30, 2015 09:35
Tweaking two.js
function BenchTwoRectangles(container, width, height, data, params) {
var self, renderer, objects;
return self = {
init: function () {
renderer = Two.Instances.filter(function (d) {
return {webgl: 'WebGLRenderer', canvas: 'CanvasRenderer'}[params.renderer] === d.type;
})[0];
renderer = renderer || new Two({