- You can use commas in the console.log() to add spaces
- You can set multiple variables (comma delimited) in the first argument of a ‘for’ loop
- myArray.forEach(function(entry){ console.log(entry.prop1, entry.prop2); }); // entry is the current object
- Note: ‘For’ loops are faster
- Some important JavaScript array methods…
- .filter() = Return a subset of an array based on the conditions
- var newArray = data.filter(function(entry){ return entry > 50; });
- .map() = Perform transformations on an array and return a new array
- var newArray = data.filter(function(entry){ return{ newPropName: entry.oldPropName }; });
- Some important D3 array methods…
- d3.min(data) = Returns minimum value in array
- d3.max(data) = Returns maximum value in array
- d3.extent(data) = Returns an array with the lowest and highest values [lowest, highest]
- For arrays of objects in D3 you can pass an accessor function as the second argument in the methods above
- var dataHiLo = d3.extent(data, function(d){ return d.value; });
- svg.selectAll(‘.bar’).data(data).enter().append(‘rect’).attr(…)… // = “Bind data to all elements in the SVG which have the bar class, and I’m about to tell you how to handle them…”
- d3.scale.linear().domain([0, d3.max(data)]).range([0, w]) … domain method needs an array of min and max, and range method needs an array of min/max to scale to
- You can use .classed(‘myclass’, true/false) to add or remove classes and you can chain it multiple times
- .attr(‘dy or dx’, function(){}) allows us to nudge text in an SVG
- Useful CSS for SVG’s
- shape-rendering: crispEdges;
- text-anchor: end;
- Pass an object into a function and reference values with dot syntax … plot({ data: data }); … function plot(params){ params.data }
- Use plot.call(svg, { data: data}); to scope JavaScript’s ‘this’ to the SVG
- Use .attr(‘transform’, ‘translate(0,0)’) to move an element in an SVG by x and then y
