[ Launch: Tributary inlet ] e2b7aea16ecfbcb0028b by bill-kidwell
-
-
Save bill-kidwell/e2b7aea16ecfbcb0028b to your computer and use it in GitHub Desktop.
Tributary inlet
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
{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[{"name":"D3","url":"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"},{"name":"NVD3","url":"https://cdn.rawgit.com/novus/nvd3/v1.7.1/build/nv.d3.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"stream_layers.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true} |
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<link href="https://cdn.rawgit.com/novus/nvd3/v1.7.1/build/nv.d3.css" rel="stylesheet" type="text/css"> | |
<script src="stream_layers.js"></script> | |
<style> | |
text { | |
font: 12px sans-serif; | |
} | |
svg { | |
display: block; | |
float: left; | |
height: 350px; | |
width: 350px; | |
} | |
html, body { | |
margin: 0px; | |
padding: 0px; | |
height: 100%; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body class='with-3d-shadow with-transitions'> | |
<svg id="test1" class="mypiechart"></svg> | |
<svg id="test2" class="mypiechart"></svg> | |
<script> | |
var testdata = [ | |
{key: "One", y: 5}, | |
{key: "Two", y: 2}, | |
{key: "Three", y: 9}, | |
{key: "Four", y: 7}, | |
{key: "Five", y: 4}, | |
{key: "Six", y: 3}, | |
{key: "Seven", y: 0.5} | |
]; | |
var testdata2 = [ | |
{key: "One", y: 5}, | |
{key: "Two", y: 2}, | |
{key: "Three", y: 9}, | |
{key: "Four", y: 7}, | |
{key: "Five", y: 4}, | |
{key: "Six", y: 3}, | |
{key: "Seven", y: 0.5} | |
]; | |
var height = 350; | |
var width = 350; | |
nv.addGraph(function() { | |
var chart = nv.models.pieChart() | |
.x(function(d) { return d.key }) | |
.y(function(d) { return d.y }) | |
.width(width) | |
.height(height); | |
d3.select("#test1") | |
.datum(testdata2) | |
.transition().duration(1200) | |
.attr('width', width) | |
.attr('height', height) | |
.call(chart); | |
// update chart data values randomly | |
setInterval(function() { | |
testdata2[0].y = Math.floor(Math.random() * 10); | |
testdata2[1].y = Math.floor(Math.random() * 10); | |
chart.update(); | |
}, 4000); | |
return chart; | |
}); | |
nv.addGraph(function() { | |
var chart = nv.models.pieChart() | |
.x(function(d) { return d.key }) | |
.y(function(d) { return d.y }) | |
//.labelThreshold(.08) | |
//.showLabels(false) | |
.color(d3.scale.category20().range().slice(8)) | |
.growOnHover(false) | |
.tooltipContent(function(key, y, e, graph) { | |
return '<h3 style="padding: 5px; background-color: ' | |
+ e.color + '"><strong>Yo, the value is</strong></h3>' | |
+ '<p style="padding:5px;">' + y + '</p>'; | |
}) | |
.width(width) | |
.height(height); | |
// make it a half circle | |
chart.pie | |
.startAngle(function(d) { return d.startAngle/2 -Math.PI/2 }) | |
.endAngle(function(d) { return d.endAngle/2 -Math.PI/2 }); | |
// MAKES LABELS OUTSIDE OF DONUT | |
//chart.pie.donutLabelsOutside(true).donut(true); | |
d3.select("#test2") | |
.datum(testdata) | |
.transition().duration(1200) | |
.attr('width', width) | |
.attr('height', height) | |
.call(chart); | |
// disable and enable some of the sections | |
var is_disabled = false; | |
setInterval(function() { | |
chart.dispatch.changeState({disabled: {2: !is_disabled, 4: !is_disabled}}); | |
is_disabled = !is_disabled; | |
}, 3000); | |
return chart; | |
}); | |
</script> | |
</body> | |
</html> |
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
{} |
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
/* Inspired by Lee Byron's test data generator. */ | |
function stream_layers(n, m, o) { | |
if (arguments.length < 3) o = 0; | |
function bump(a) { | |
var x = 1 / (0.1 + Math.random()), | |
y = 2 * Math.random() - 0.5, | |
z = 10 / (0.1 + Math.random()); | |
for (var i = 0; i < m; i++) { | |
var w = (i / m - y) * z; | |
a[i] += x * Math.exp(-w * w); | |
} | |
} | |
return d3.range(n).map(function() { | |
var a = [], i; | |
for (i = 0; i < m; i++) a[i] = o + o * Math.random(); | |
for (i = 0; i < 5; i++) bump(a); | |
return a.map(stream_index); | |
}); | |
} | |
/* Another layer generator using gamma distributions. */ | |
function stream_waves(n, m) { | |
return d3.range(n).map(function(i) { | |
return d3.range(m).map(function(j) { | |
var x = 20 * j / m - i / 3; | |
return 2 * x * Math.exp(-0.5 * x); | |
}).map(stream_index); | |
}); | |
} | |
function stream_index(d, i) { | |
return {x: i, y: Math.max(0, d)}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment