TODO LIST:
[x] dynamic gradients for pseudo-3D aesthetics [x] mockup tooltip, for now, containing only value. Eventually, could be extended with additional data.
[x] top left and right grids should match values [!] isometric view doesn't work well while back stack visually merge with front ones, so it makes the whole graph illegible. Have to be perspective view. To do this
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta name="keywords" content="d3.js,javascript"> | |
| <title>D3.JS Player with Iterator</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| /** | |
| * @author qiao / https://github.com/qiao | |
| * @author mrdoob / http://mrdoob.com | |
| * @author alteredq / http://alteredqualia.com/ | |
| * @author WestLangley / http://github.com/WestLangley | |
| */ | |
| THREE.OrbitControls = function ( object, domElement ) { | |
| this.object = object; |
| /** | |
| * @author qiao / https://github.com/qiao | |
| * @author mrdoob / http://mrdoob.com | |
| * @author alteredq / http://alteredqualia.com/ | |
| * @author WestLangley / http://github.com/WestLangley | |
| */ | |
| THREE.OrbitControls = function ( object, domElement ) { | |
| this.object = object; |
| /* | |
| * @author zz85 / https://github.com/zz85 | |
| * @author mrdoob / http://mrdoob.com | |
| * Running this will allow you to drag three.js objects around the screen. | |
| * Modified for D3.JS / THREE.JS stack by | |
| * @author vkuchinov / https://github.com/vkuchinov | |
| * | |
| */ |
| /* | |
| * @author zz85 / https://github.com/zz85 | |
| * @author mrdoob / http://mrdoob.com | |
| * Running this will allow you to drag three.js objects around the screen. | |
| * Modified for D3.JS / THREE.JS stack by | |
| * @author vkuchinov / https://github.com/vkuchinov | |
| * | |
| */ |
Based on https://bl.ocks.org/abrahamdu/e1481e86dd4e9d553cc2d7d359b91e68 Please keep in mind that this example is using just a fragment taken from Wikipedia.
Based on http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6 made by Curtis Bratton [brattonc]
You should keep SVG structure and hierarchy:
| border: no | |
| height: 960 |
| border: no | |
| height: 960 |