Data Visualization with D3 and Web Standards

@idangazit HI THERE, I’M DATA VISUALIZATION WITH D3.JS & WEB
STANDARDS • HTML5FEST 2012 DATA VISUALIZATION with d3.js and web standards

@idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING
THIS AREA. HI THERE, I’M djangoproject.com

@idangazit HI THERE, I’M HTTP://FLIC.KR/P/7EPN1B

@idangazit HI THERE, I’M HTTP://FLIC.KR/P/967DVR

THIS AREA. HI THERE, I’M VISUALIZATIONS CHARTS

THIS AREA. HI THERE, I’M 0 25 50 75 100 2007 2008 2009 2010 Apples Bananas

@idangazit HI THERE, I’M HTTP://NYTI.MS/WR1DHZ

THIS AREA. HI THERE, I’M

THIS AREA. HI THERE, I’M ©®™ Adobe (please don’t sue me)

THIS AREA. HI THERE, I’M still widely used actionscript works in old browsers doesn’t work on mobile resource-intensive FLASH

THIS AREA. HI THERE, I’M processing.org processingjs.org PROCESSING

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

THIS AREA. HI THERE, I’M raphaeljs.com RAPHAËL

@idangazit HI THERE, I’M HTTP://FLIC.KR/P/ASMPYK

THIS AREA. HI THERE, I’M now tell me about the new hotness COOL STORY, BRO!

THIS AREA. HI THERE, I’M d3js.org D3 DATA-DRIVEN DOCUMENTS

THIS AREA. HI THERE, I’M VISUALIZATION TOOLKIT a true

THIS AREA. HI THERE, I’M DATA onto MEANINGFUL VISUALS map

THIS AREA. HI THERE, I’M DATA onto THE DOM map

THIS AREA. HI THERE, I’M VISUALIZATIONS DRAWING

THIS AREA. HI THERE, I’M d3 supplies the annoying-to-write parts CONVENIENCE

THIS AREA. HI THERE, I’M sometimes you don’t control the data JSON CSV, TSV LOAD & MANIPULATE

THIS AREA. HI THERE, I’M colors dimensions positions … every property. INTERPOLATE

THIS AREA. HI THERE, I’M linear logarithmic quantile ordinal time nice SCALES

THIS AREA. HI THERE, I’M 12.973 39.144 UGLY

THIS AREA. HI THERE, I’M 12 40 NICE

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

THIS AREA. HI THERE, I’M RGB HSL HCL L*a*b* COLORSPACE MATH

HSV V HSL L CIELAB L* Images courtesy Wikipedia &
Luc Viatour / www.Lucnix.be

http://en.wikipedia.org/wiki/HSL_color_space HSL HSV

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

THIS AREA. HI THERE, I’M NOT BAD

THIS AREA. HI THERE, I’M marrying data to the DOM http://bost.ocks.org/mike/join/ DATA JOINS

THIS AREA. HI THERE, I’M for (i=0; i<data.length, i++) { // create some elements // add them to the DOM

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

THIS AREA. HI THERE, I’M there are no circles to select!? BUT

THIS AREA. HI THERE, I’M D3 MAKES THE DOM LIKE THE DATA

THIS AREA. HI THERE, I’M data ENTER UPDATE EXIT DOM

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

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

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

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

THIS AREA. HI THERE, I’M fade-in ANIMATION? ENTER transition UPDATE fade-out EXIT

THIS AREA. HI THERE, I’M http://bl.ocks.org/3808218 EXAMPLES

THIS AREA. HI THERE, I’M Scalable Vector Graphics SVG

THIS AREA. HI THERE, I’M IE9+ PAGEWEIGHT HIGH-DPI (RETINA)

THIS AREA. HI THERE, I’M <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Bu <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/ <svg version="1.1" id="svg6584" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creat rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <g id="layer1" transform="translate(0,-952.362)"> <path id="path5421" fill="#888888" d="M62.5,973.195l-2.084,4.167l8.334,3.125v9.3 c0-1.025-1.058-2.083-2.083-2.083H31.25c-2.083,0-2.083,2.083-2.083,2.083v2.083 c-1.249-0.3-2.566-0.521-3.906-0.521c-9.205,0-16.667,7.462-16.667,16.667s7.462 c9.205,0,16.667-7.461,16.667-16.666c0,0,4.167,0,6.25,0c2.084,0,2.084-2.084,2. c2.833-2.163,5.887-3.498,8.984-4.167v2.604v1.693c-7.185,1.853-12.5,8.252-12.5 c9.205,0,16.668-7.462,16.668-16.667c0-7.617-5.131-13.896-12.109-15.885l-4.559 L62.5,973.195z M39.583,994.029h18.75c-4.168,2.083-10.417,12.5-10.417,16.667l- L39.583,994.029z M27.083,1004.445c5.753,0,10.417,4.664,10.417,10.417s-4.664,1 S21.331,1004.445,27.083,1004.445L27.083,1004.445z M72.916,1004.445c5.754,0,10 s-4.664,10.416-10.418,10.416c-5.752,0-10.416-4.663-10.416-10.416S67.164,1004. </g> </svg>

THIS AREA. HI THERE, I’M HTML <IMG SRC=“MY.SVG”> CSS URL(../IMG/MY.SVG)

THIS AREA. HI THERE, I’M <body> <h1>My Awesome SVG</h1> <svg>...</svg> <p>Wasn’t that awesome?</p> </body>

THIS AREA. HI THERE, I’M <svg> <circle r=“10” class=“special”> </svg> .special { fill: red; stroke: black; stroke-width: 2px; } HTML CSS

THIS AREA. HI THERE, I’M .special { fill: red; stroke: black; stroke-width: 2px; } CSS .special:hover { fill: blue; stroke: white; stroke-width: 10px; }

THIS AREA. HI THERE, I’M <svg> <circle r=“10” class=“special”> </svg> document.getElementByClassName(“special”); HTML JAVASCRIPT

THIS AREA. HI THERE, I’M JQUERY $(".station[data-id=216]"); D3 d3.selectAll('.station[data-id="216"]');

THIS AREA. HI THERE, I’M … jQuery SVG DOM != HTML DOM

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

THIS AREA. HI THERE, I’M http://keith-wood.name/svg.html JQUERY SVG

THIS AREA. HI THERE, I’M events styling properties appending/removing from DOM mostly, it Just Works™ RELAX

THIS AREA. HI THERE, I’M s/python/javascript/ IT’S JUST PYTHON!

THIS AREA. HI THERE, I’M github.com/idan/telostats TELOSTATS.COM YUVAL ADAM @yuvadm IDAN GAZIT @idangazit

THIS AREA. HI THERE, I’M integrating D3-rendered layers into a map mapbox.js GEO

THIS AREA. HI THERE, I’M most visualizations still assume a relatively ﬁxed canvas RESPONSIVE

THIS AREA. HI THERE, I’M it’s so easy to build neat stuﬀ... EXCITING

THIS AREA. HI THERE, I’M gazit.me @idangazit github.com/idan GO MAKE SOMETHING! LONG SHORT CODE

Data Visualization with D3 and Web Standards

Data Visualization with D3 and Web Standards

More Decks by Idan Gazit

Other Decks in Design

Featured

Transcript