Ask your JavaScript questions! Pay money and get answers fast! (more info)

What triggers this graph software? JavaScript

  • SOLVED

I would like to use this kind of graph:

[[LINK href="http://bl.ocks.org/mbostock/3943967"]]http://bl.ocks.org/mbostock/3943967[[/LINK]]

That page has an iframe that points here:

[[LINK href="http://bl.ocks.org/mbostock/raw/3943967/34327809e8a6011eab1563084a5665073cb46adc/"]]http://bl.ocks.org/mbostock/raw/3943967/34327809e8a6011eab1563084a5665073cb46adc/[[/LINK]]

I have copied the D3 library, and the styles and the code, but when I put this up on my own page, nothing happens. I do not get any errors in FireBug.

I do not see what triggers this code. What causes it to start?

Answers (1)

2013-02-25

Christianto answers:

Hi Lawrence,

Have you add radio button with value "grouped" and "stacked" on your page?
I check that it will change the "mode" from stacked to grouped on this radio change..
<form>
<label><input type="radio" name="mode" value="grouped"> Grouped</label>
<label><input type="radio" name="mode" value="stacked" checked=""> Stacked</label>
</form>


at first time load it will be triggered after 2 second, from this functions:
var timeout = setTimeout(function() {
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
}, 2000);


this code bind event change on both radio input, based on "checked" value:
function change() {
clearTimeout(timeout);
if (this.value === "grouped") transitionGrouped();
else transitionStacked();
}


Lawrence Krubner comments:

Well, my HTML:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Data Visualization</title>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en" name="language" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />

<link rel="stylesheet" href="/css/bootstrap-and-combined-libraries.css" />
<link rel="stylesheet" href="/css/timeout.css" />

<link rel="stylesheet" href="/js/bootstrap-and-combined-libraries.js" />
<link rel="stylesheet" href="/js/data_driven_documents.js" />
<link rel="stylesheet" href="/js/timeout.js" />

<style type="text/css" id="per-page-styles">
/* these are styles that the code will change on a per page basis, such as
the background-image of the top banner. This is changed by the code and frontenders
should not touch this block. */
</style>

<style type="text/css" id="per-page-javascript">
/* these are styles that the code will change on a per page basis, such as
the background-image of the top banner. This is changed by the code and frontenders
should not touch this block. */
</style>

</head>
<body>

<h1>Hello World</h1>

<div id="content">

<form>
<label><input value="grouped" name="mode" type="radio" /> Grouped</label>
<label><input checked="checked" value="stacked" name="mode" type="radio" /> Stacked</label>
</form>

</div>

<link rel="stylesheet" href="/js/graph_effects.js" />

</body>




</html>


Lawrence Krubner comments:

This file:

/js/graph_effects.js

Is, for now, a simple copy of what was up on that other website:



/*

2013-02-25 -

This effect comes from here:

http://bl.ocks.org/mbostock/3943967

*/



var n = 4, // number of layers
m = 58, // number of samples per layer
stack = d3.layout.stack(),
layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], .08);

var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);

var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);

var xAxis = d3.svg.axis()
.scale(x)
.tickSize(0)
.tickPadding(6)
.orient("bottom");

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });

var rect = layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0);

rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

d3.selectAll("input").on("change", change);

var timeout = setTimeout(function() {
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
}, 2000);

function change() {
clearTimeout(timeout);
if (this.value === "grouped") transitionGrouped();
else transitionStacked();
}

function transitionGrouped() {
y.domain([0, yGroupMax]);

rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
.attr("width", x.rangeBand() / n)
.transition()
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return height - y(d.y); });
}

function transitionStacked() {
y.domain([0, yStackMax]);

rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.transition()
.attr("x", function(d) { return x(d.x); })
.attr("width", x.rangeBand());
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n, o) {

function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < n; i++) {
var w = (i / n - y) * z;
a[i] += x * Math.exp(-w * w);
}
}

var a = [], i;
for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
for (i = 0; i < 5; ++i) bump(a);
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}




Christianto comments:

Could you post your complete code?
where you put the 3d.v3.min.js and entire graph function?

is it on graph_effects.js?
<link rel="stylesheet" href="/js/graph_effects.js" />
I think it should be:
<script type="text/javascript" src="/js/graph_effects.js"></script>


Lawrence Krubner comments:


Fixed script tag error, but still have the same problem:


<!DOCTYPE html>
<html lang="it">
<head>
<title>Data Visualization</title>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en" name="language" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />

<link rel="stylesheet" href="/css/bootstrap-and-combined-libraries.css" />
<link rel="stylesheet" href="/css/timeout.css" />

<script href="/js/data_driven_documents.js"></script>
<script href="/js/timeout.js"></script>

<style type="text/css" id="per-page-styles">
/* these are styles that the code will change on a per page basis, such as
the background-image of the top banner. This is changed by the code and frontenders
should not touch this block. */
</style>

<style type="text/css" id="per-page-javascript">
/* these are styles that the code will change on a per page basis, such as
the background-image of the top banner. This is changed by the code and frontenders
should not touch this block. */
</style>

</head>
<body>

<h1>Hello World</h1>

<div id="content">

<form>
<label><input value="grouped" name="mode" type="radio" /> Grouped</label>
<label><input checked="checked" value="stacked" name="mode" type="radio" /> Stacked</label>
</form>

</div>

<link rel="stylesheet" href="/js/graph_effects.js" />

</body>




</html>


Lawrence Krubner comments:

Added this alert, yet it never triggers:



alert("now we will set up the timeout");
var timeout = setTimeout(function() {
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
}, 2000);



And yet, if I view source on the page, I can easily click the link to the Javascript file, and Chrome takes me there.


Lawrence Krubner comments:

Actually, my mistake, now that I fixed the script tag error, I am getting a lot of errors in FireBug, including:

var π = Math.PI, ε = 1e-6, d3 = {

Maybe that is a copy and paste error? It looks as if something failed to accept UTF8? Why would copy and paste have character encoding issues?


Lawrence Krubner comments:

And how is this possible?

d3 is not defined

stack = d3.layout.stack(),


Christianto comments:

You could test it by downloading it directly from it source, and include it on your page.
http://d3js.org/d3.v3.min.js

I don't know exactly why that could happen, it could be related to individual OS/apps.
What kind of application you use when copy/paste it?



Christianto comments:

<blockquote>d3 is not defined
stack = d3.layout.stack(),</blockquote>

that's d3 script function,
I assuming you already include it on data_driven_documents.js?
<script type="text/javascript" src="/js/bootstrap-and-combined-libraries.js"></script>
<script type="text/javascript" src="/js/data_driven_documents.js"></script>
<script type="text/javascript" src="/js/timeout.js"></script>


is it using the same namespace var "d3"?
like in
<script src="http://d3js.org/d3.v3.min.js"></script>


Lawrence Krubner comments:

I think you are right. I should just re-install everything from scratch. Clearly I made some big mistakes along the way.


Lawrence Krubner comments:

That worked.