D3 Exercises & Questioning Presenter: Shiwangi Singh Discussion - PowerPoint PPT Presentation

D3 Exercises & Questioning Presenter: Shiwangi Singh

Discussion Topics Questions : Update Pattern Merge and Exit D3 Examples : Smooth Transitioning Voronoi Topology Jigsaw Morphing

Update Patterns 0 0 0 d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ) . data ([50,25,100]) . style (‘height’, d=> d + ‘px’) 25 . style (‘background-color’, ‘blue’) 50 100

Update Patterns 25 50 100 d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ) . data ([75,25]) . style (‘height’, d=> d + ‘px’) 25 . style (‘background-color’, ‘purple’) 75 100

“Enter” Selection 25 75 100 d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ) . data ([75,25,100,200]) 25 . style (‘height’, d=> d + ‘px’) . style (‘background-color’, ‘blue’) 75 .enter() 100 .append(‘div’) .attr(‘class’, ‘bar’) . style (‘height’, d=> d + ‘px’) . style (‘background-color’, ‘green’) 200

Merge: “Update + Enter” 25 75 100 200 d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ) 10 10 . data ([10,100,10,200,10]) 10 . style (‘background-color’, ‘blue’) .enter() .append(‘div’) 100 .attr(‘class’, ‘bar’) . style (‘background-color’, ‘green’) .merge(d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ )) . style (‘height’, d=> d + ‘px’) 200

Exit 10 10 10 100 200 10 10 10 d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ) . data ([10,100,10]) . style (‘background-color’, ‘blue’) .exit() 100 . style (‘background-color’, red’) 200

Exit 10 10 10 100 200 d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ) . data ([10,100,10]) . style (‘background-color’, ‘blue’) 10 10 .exit() . style (‘background-color’, red’) .remove() 100

Putting it all together function Update (data) { All three patterns can ‘coexist’ let barsUpdate = d3. select ( ‘ #chart ’ ). selectAll ( ‘ .bar ’ ). data (data) in the same function or scope. let barsEnter = barsUpdate .enter() let barsExit = barsUpdate .exit() barsUpdate Modify EXISTING . style (‘background-color’, ‘blue’) elements . style (‘height’, d => d+‘px’) barsEnter Appends new data to .append( ‘div’ ).attr( ‘class’, ‘bar’) DOM. Affects only . style (‘background-color’, ‘green’) NEW DATA . style (‘height’, d => d+‘px’) Modify (or remove) barsExit elements with . style (‘background-color’, ‘red’) MISSING data, or .remove() // in this case styling would be pointless data that has exited } the selection

TopoJSON TopoJSON is an extension of GeoJSON that encodes Topology. GeoJSON - Represents geometries discretely (e.g Polygon, Multipolygon, etc) TopoJSON - Has fixed-precision integer encoding for co-ordinates 80 % smaller than GeoJSON file Maps back to GeoJSON

TopoJSON Exercise Create a US states TopoJSON map Go to Piazza under In-class exercise 09/27 : - Grab the html, js and JSON codes from under Topomap heading - Create a folder called topomap and put the above files into it - Navigating to the current dir, run a local server - In python2.7: python -m SimpleHTTPServer $port - In python3.x: python -m http.server $port By the end of this exercise, you know : - How to create a us state map using TopoJSON - To explore the JSON data file to see arcs and coordinates in topojson Those who already know how to do this: See Smooth Polygon Transition example on bl.ocks.org

Example 1 : Smooth Polygon Transitions Go to Smooth Polygon Transition example on bl.ocks.org Data Join Merge new a (state a, state b) Pop a (now a = b) added class Push new state as pink as b Remove state a circles

Voronoi Diagrams What are Voronoi Diagrams ? Wikipedia definition says “A Voronoi Diagram is a partitioning of a plane into regions based on distance to points in a specific subset of the plane” - Set of points is called sites or seeds. - Each region is called a Voronoi Cell. - Based on Euclidean distance or Manhattan distance. What is the use of Voronoi Diagram ? - To increase the Target area of points in a scatterplot - For interactions - Computing adjacency or grouping of Visual elements - Automate label positioning

Voronoi Exercise Create a Voronoi Diagram with random data Go to Piazza under In-class exercise 09/27 : - Grab the html, js and JSON codes from under Voronoi heading - Create a folder called voronoi and put the above files into it - Navigating to the current dir, run a local server - In python2.7: python -m SimpleHTTPServer $port - In python3.x: python -m http.server $port By the end of this exercise, you should know : - How to create a Voronoi diagram using d3.voronoi api - How to do basic interaction with voronoi diagram If you are done with this exercise : See Voronoi Topology on bl.ocks.org

Example 2 : Voronoi Topology See Voronoi Topology on bl.ocks.org - This Example makes use of both the Topo map and Voronoi diagram - Shows interaction with Voronoi cells - Makes use of two important features topojson.merge and topojson.mesh - This example uses Canvas element rather than SVG Q. What is the difference between Canvas and SVG ? SVG is shape-based which are comprised of DOM elements, each element can be modified Canvas is pixel-based which is like an image, entire canvas is rendered if modified

Example 2 : Voronoi Topology Computes the Voronoi diagram for the specified data points Makes a voronoi diagram of width and height specified Assigns random coordinates (x, y) within the specified dimension voronoi (data) computes V-diagram for ‘data’. New voronoi is computed.

Example 2 : Voronoi Topology Entire topology is retuned Voronoi has (cells, edges) Cells have (site, halfedges) Site has (index, data) Edge has (left, right) New cell arcs are computed based on edge right or left for each Cell

Example 2 : Voronoi Topology What are topojson.merge and topojson.mesh ?

Example 3 : Jigsaw Morphing See Jigsaw morphing on bl.ocks.org