D3.js Reference

#D3.js Reference

###API reference https://github.com/mbostock/d3/wiki/API-Reference

###Sortable Table http://jsfiddle.net/recek/v58zT/

###You can remove the div element using

d3.select("div.col-xs-3.ng-scope").remove();

###You can empty the html contents of the element by using

d3.select("div.col-xs-3.ng-scope").html("");.

#####OBS: As its name suggests, .html() is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with the method selection.html().

https://github.com/mbostock/d3/wiki/Selections#html

https://github.com/mbostock/d3/wiki/Selections#text

###About Scales

https://github.com/mbostock/d3/wiki/Quantitative-Scales

Domain >> Range of data values

Range >> Range of pixel values to where the domain will be mapped

Oder important note: as far as the cordinates in SVG are inversed (start on the top-left), the Y is inversed and the X is normal. Then, you should:

var y = d3.scale.linear().domain([0,10]).range([10,0])
var x = d3.scale.linear().domain([0,10]).range([0,10])

###About SVG

source: http://bost.ocks.org/mike/bar/2/

Whereas HTML is largely limited to rectangular shapes, SVG supports powerful drawing primitives like Bézier curves, gradients, clipping and masks. We won’t need all of SVG’s extensive feature set for a lowly bar chart, but learning SVG is a worthwhile addition to your visual lexicon when it comes to designing visualizations.

####Enter method

"Bind each datum (pice of data) taht does't display at the page"

####Make a bar chart - nice tutorial

http://bost.ocks.org/mike/bar/3/

####Trick to inspect your data

Add debugger; to any line in your html file and use google chrome to console.table(data) to see the data tabulated in your browser. If the dataset is large, it could crash your browser.

https://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

####About margings

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

####some functions

Gives the maximum and the minum of an array

var time_extent = d3.extent(data, function(d) { return d['date']; });

####scale axis

The 0 of an svg element corresponds to the margim, the max Y corresponds to th heigh and the X margim corresponds to the width. Another point is that Y axis is inverted. You should refer to it as (max, min) and not (min,max), as in the X axis. See the example here: https://s3.amazonaws.com/udacity-hosted-downloads/ud507/Canvas_and_Axes.jpeg

// Create x-axis scale mapping dates -> pixels
var time_scale = d3.time.scale()
  .range([margin, width])
  .domain(time_extent);
  
// Create y-axis scale mapping attendance -> pixels
var count_scale = d3.scale.linear()
  .range([height, margin])
  .domain(count_extent);

####Converting Date information into d3 date object

format = d3.time.format("%d-%m-%Y (%H:%M h)");
d3.tsv("mydata.tsv", function(d) {
    d['date'] = format.parse(d['date']);
    return d;
}, draw);

####About nest function (to agregate data)

http://bl.ocks.org/phoebebright/raw/3176159/

####JavaScript map function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

####Animation, transiction and Interaction

http://blog.andreaskoller.com/2014/02/d3-and-ui-animations/

http://synthesis.sbecker.net/articles/2012/07/10/learning-d3-part-3-animation-interaction

http://www.jeromecukier.net/blog/2012/07/16/animations-and-transitions/

Update d3.js Data Dynamically: http://www.d3noob.org/2013/02/update-d3js-data-dynamically.html

the use of this: http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

animation chaining: http://christopheviau.com/d3_tutorial/

mouse events: http://www.stator-afm.com/tutorial/d3-js-mouse-events/

ucaiado/gist:5737e7b7d8388d1b3b83