D3.js And General Js Stuff

To inform other events when this one event is over.

There´s time scales, ordinal scales (for strings) and quantitative (for numbers) scales.

python -m SimpleHTTPServer

I can return the current data but also attach data to DOM-Elements

d3.select is only selecting the first element.

el.addEventListener('click',sayHello,false);

The third parameter “false” is to define if the event should be called on the capture or on the bubble phase of the event.

.transition().each(“end”, function() { d3.select(this) .transition() .attr(“height”,”40”) .attr(“width”,”40”) .duration(3000);

});

d3.select(“rect”) .on(“mouseover”, function(d,i) { var currentElementX = d.x; var currentElementY = d.y;

}

d3.select(“#RemoveMe”).remove()

d3.selectAll(“rect) .on(“mouseover, function(d, i){function(){ d3.selectAll(“rect”) .attr(“opacity”,”0.25”); d3.select(this) .attr(“opacity”, “1”);

});

var stack = d3.layout.stack();

stack(layers);

The function adds a new key-value-pair calculating the new y0-value where the bar will be positioned.

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

}, 3000);

- it´s a variable that d3 offered us to show the index of the nested data we are in

- it holds the index of the parent data element

d3.scale.linear().domain([0,400]).range([0,200])

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)}; }); }

var circles = svg.selectAll(“circle”) .data(data)

.enter().append(“circle”);

returns the elements without data, in case there wash´t enough

creates placeholders for the elements that will get elements appended to in the future => they are empty selections (if the .enter() is undefined the elements needed are already created)

To update you need to add the new data and then attribute the new data to create the elements

d3.selection.data(…).exit().remove();

Selections are arrays, so the data that gets added to them should be arranged in arrays, too.

To keep objects constant even when they are updated it´s important, that they have unique identifiers for example if the datasets have different amounts of elements or the order changes

d3.selection.data(x, function(d,i){…});

Because each time you set and interval and ID is being returned.

var currentTime = new Date();

var currentTime = new Date();

var minutes = currentTime.getMinutes();

The linear scale is both and object and a function, because the domain and range are methods of the object/ the axis: (meaning we can redefine the scale object, when the data is changing).

After changing a scale you also have to pass in the new scale to the axis and then call the axis again.

d3.select(“#x-axis”) .transition() .call(myXAxis);

var originalButton = d3.select("body").append("input").attr("type", "button").attr("value", "original").attr("id", "button_original")

.style("font-size", "2em");

To allow zoom behaviour you change the input-domain to show another range of values.

Meaning if we zoom in it will have influence on the axis function and has to be called again.

var zoom = d3.behavior.zoom().x(xAxisScale).y(yAxisScale)

Build-in function takes care of changes the axis scale

Will return the zoom which is neccesairy to redraw the chart (by default it´s set to 1).

zoom.scaleExtent([min,max])

The zoom behaviour gets called on the innerDrawingspace.

Fill it with a white rectangle.

When you redraw you only set the attributes again.Example: circles.attr("cx", function(d, i) { return xAxisScale(d.cx); }).attr("cy", function(d, i) { return yAxisScale(d.cy); }).attr("r", function(d, i) { return (d.radius * scaleMultiplier); }); Initial drawing looks like that: var circle = innerSpace.selectAll("circle").data(data).enter().append("circle").attr("cx", function(d) { return xAxisScale(d.cx); }).attr("cy", function(d) { return yAxisScale(d.cy); }).attr("r", function(d) { return d.radius; })

.style("fill", "green");

Area chart has an additional y0-value.

There are almost being drawn the same but the area chart has an aditional y value for where the area starts being filled:

A vector with to values.var panVector = d3.event.translate;var panX = panVector[0];

var panY = panVector[1];

You can calculate the multiplication-factor using the scale.

d3.select("path") .attr("transform", "translate(" + panVector + ") scale(" + scaleMultiplier + ")");

innerSpace.append("path").attr("d", "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10").attr("stroke", "black").attr("fill", "green").attr("stroke-width", "2")

.attr("fill-opacity", "0.5");

- before optimise SVG with svgo filename in Terminal

var colorScale= d3.scale.linear().domain([0,31]).range(["white","blue"]);

.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

The bars are touching.

var intelligence = d3.keys(data[0])

.filter(function(key){

return key !== "time"; })

data[0] because it´s enough to get the keys from the first object.

d3.svg.axis() creates them by default!

With .rangeRoundBands your set the range within the single bands will be created. With .rangeBand you create one band!

It´s making a range of the minimum and maximum values of the data.

d.x = Math.max(smallside, Math.min(width - smallside, d3.event.x))

d.y = Math.max(bigside, Math.min(height - bigside, d3.event.y))

Selections

On the same element where you add the data.

var addNew = svg.selectAll(".layer").data(slicedData)exit();

when an inner function is made accessible from an outer function.

function add(value1) { return function doAdd(value2) { return value1 + value2; };}var increment = add(1);var foo = increment(2);// foo equals 3

This causes the following script to load and execute already while this one might not be done yet.

It´s a return a callback from a foreign server, you can only get the complete one and not stream. The callback get attached as a script-tag, that´s why it´s risky.

The difference is that apply lets you invoke the function with arguments as an array; callrequires the parameters be listed explicitly.