@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M still widely used actionscript works in old browsers doesn’t work on mobile resource-intensive FLASH
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // set the canvas size size(300, 300); // top, left, width height rect(20, 20, 100, 100); // set colors stroke(255, 0, 0); // red fill(0, 0, 255); // blue // top, left, width height rect(100, 100, 100, 100);
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // data = [Date, Date, …] // get the natural range of the data timeExtent = d3.extent(data); // make a scale x = d3.time.scale() .rangeRound([0, width]) .domain(timeExtent); // X position on timeline for a date left = x(someDate);
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // data = [Number, Number, …] // get the natural range of the data natural = d3.extent(data); // make a scale colorscale = d3.scale.linear() .domain(natural) .interpolate(d3.interpolateLab) .range(startColor, endColor); // color for a number color = colorScale(42);
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // svg is the DOM root of our // d3 visualization svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5);
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // data JOIN circle nodes circles = svg.selectAll("circle").data(data) // 1. UPDATE // 2. ENTER // 3. ENTER+UPDATE // 4. EXIT
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // data JOIN circle nodes circles = svg.selectAll("circle").data(data) // 1. UPDATE circles.attr("class", "update"); // 2. ENTER circles.enter().append("circle") .attr("class", "enter") .attr("r", 0); // starting radius
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // data JOIN circle nodes circles = svg.selectAll("circle").data(data) // 3. ENTER + UPDATE // works on just-added nodes too // vary the radius according to data // d is the datum for each join. circles.attr(“r”, function(d) { return d.radius; });
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M // data JOIN circle nodes circles = svg.selectAll("circle").data(data) // 4. EXIT // remove nodes that aren’t in data anymore circles.exit().remove();
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M .special { fill: red; stroke: black; stroke-width: 2px; } CSS .special:hover { fill: blue; stroke: white; stroke-width: 10px; }
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M JQUERY $(".station[data-id=216]"); D3 d3.selectAll('.station[data-id="216"]');
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M $(".special").addClass("foo"); $(".special").attr("class", "foo"); d3.selectAll('.special').attr("class", "foo"); d3.selectAll('.special').classed("foo", true);
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M events styling properties appending/removing from DOM mostly, it Just Works™ RELAX
@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M github.com/idan/telostats TELOSTATS.COM YUVAL ADAM @yuvadm IDAN GAZIT @idangazit
idangazit
terkel
hirokazu_oda
5kaichi
shira0000000
mizuena
juliantruitt
sizucca
hiranotomoki
mxair95000
morganepeng
ajstarks
freee
lemiorhan
colly
thekraken
bryan
samlambert
brad_frost
roundedbygravity
addyosmani
3n
shpigford
aarron
iamctodd