Example of a multi-layered visualization.
Last active
December 17, 2015 18:29
-
-
Save sirrice/5653573 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" type="text/css" href="https://raw.github.com/sirrice/gg/new-model/lib/gg.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://underscorejs.org/underscore-min.js"></script> | |
| <script src="http://sirrice.github.io/gg/js/gg.js"></script> | |
| </head> | |
| <body style="width: 100%; zoom: 1;"> | |
| <script> | |
| var floor500 = function(row) { | |
| return Math.floor(row.get('d') / 500) * 500; | |
| }; | |
| var spec = { | |
| opts: { title: "Multi-layer faceted example" }, | |
| // Faceting along x and y dimensions | |
| facets: {x: "f"}, | |
| layers: [ | |
| // Histogram with 10 bins, rendering sum / 100 | |
| { | |
| geom:{ | |
| type: "rect", | |
| aes: {y: "{total/100}"} | |
| }, | |
| aes: { | |
| x: "d", | |
| y: "e" | |
| }, | |
| stat: {type:"bin", n:10} | |
| }, | |
| // Boxplot collected into 4 bins | |
| { | |
| geom: "boxplot", | |
| aes: { | |
| x: floor500, | |
| y: "e", | |
| group: { color: floor500 } | |
| }, | |
| stat: "boxplot" | |
| }, | |
| // Smoothed line, grouped and colored by "g" attribute | |
| // Lines are custom colored and thick | |
| { | |
| geom: "line", | |
| aes: { | |
| x: "d", | |
| y: "e", | |
| group: {color: "g", "stroke-width": 2} | |
| }, | |
| stat: { | |
| type:"loess", bw: 0.3, acc: 1e-12 | |
| }, | |
| scales: { | |
| stroke: { | |
| type: "color", | |
| range: ["black", "red", "green"] | |
| } | |
| } | |
| }, | |
| // Render the raw data as a stacked line graph | |
| { | |
| geom: "line", | |
| aes: { | |
| x: "d", | |
| y: "e", | |
| group: { | |
| color: "g", | |
| "stroke-opacity": 0.2 | |
| } | |
| }, | |
| pos: "stack" | |
| } | |
| ] | |
| }; | |
| $(document).ready(function() { | |
| Math.seedrandom("zero"); | |
| var w = 900; | |
| var h = 500; | |
| var ex = d3.select("body").append("span"); | |
| var gauss = science.stats.distribution.gaussian(); | |
| // Generate the dataset | |
| var npts = 4000; | |
| bigdata = _.map(_.range(0, npts), function(d) { | |
| g = Math.floor(Math.random() * 3) + 1; | |
| f = Math.floor(Math.random() * 3); | |
| t = Math.floor(Math.random() * 2); | |
| gauss.variance(d * 30.0 / npts); | |
| return { | |
| d: Math.floor(d/3), | |
| e: ((d + gauss())*(2+Math.sin(d/50))) * (g) - (d), | |
| g: g, | |
| f: f, | |
| t: t | |
| }; | |
| }); | |
| var plot = gg(spec); | |
| plot.render(w, h, ex, bigdata); | |
| }); | |
| </script> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment