31:T5f5,tweak_scatterplot = (scatter_group) => { // bound our plot with a rectangle scatter_group.append('rect').attr('width', scatter_size).attr('height', scatter_size) .attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1) scatter_group.append('g').attr('id', 'xaxis').attr('transform', 'translate(0,0)').call(d3.axisTop(scatter_x_scale).ticks(5)) scatter_group.append('g').attr('id', 'yaxis').call(d3.axisLeft(scatter_y_scale).ticks(5)) // get rid of the domains for the x and y axes scatter_group.selectAll('#xaxis,#yaxis').select('.domain').remove() // tone down the colors scatter_group.selectAll('#xaxis,#yaxis').selectAll('text').attr('fill', d3.hcl(0,0,50)) scatter_group.selectAll('#xaxis,#yaxis').selectAll('line').attr('stroke', d3.hcl(0,0,50)) // provide guides for our ticks scatter_group.select('#xaxis').selectAll('.tick').append('line') .attr('y1', scatter_size).attr('y2', 0) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) scatter_group.select('#yaxis').selectAll('.tick').append('line') .attr('x1', 0).attr('x2', scatter_size) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) scatter_group.append('text').text('PC 0').attr('text-anchor', 'middle') .attr('x', (.5*scatter_size)).attr('y', (-22)).attr('fill', d3.hcl(0,0,40)) scatter_group.append('text').text('PC 1').attr('text-anchor', 'middle') .attr('transform', 'translate('+(-22)+','+(.5*scatter_size)+') rotate(270)').attr('fill', d3.hcl(0,0,40)) }32:T44d,linked_updates = (selected_data, scatterplot_group, pcp_data_group, pcp_pc_group) => { let scatterplot_update = scatterplot_group .selectAll('circle') // all circles .data(selected_data, d => d.id) // just those circles that match with selected data scatterplot_update.attr('fill', selected_color).raise() scatterplot_update.exit().attr('fill', default_color) let pcp_data_update = pcp_data_group .selectAll('.line') // all PCP data line marks .data(selected_data, d => d.id) // just those marks that match with selected data pcp_data_update.attr('stroke', selected_color).attr('stroke-width', 1.2).raise() pcp_data_update.exit().attr('stroke', default_color).attr('stroke-width', .2).lower() let pcp_pcs_update = pcp_pc_group .selectAll('.line') // all PCP projected data line marks .data(selected_data, d => d.id) // just those marks that match with selected data pcp_pcs_update.attr('stroke', selected_color).attr('stroke-width', 1.2).raise() pcp_pcs_update.exit().attr('stroke', default_color).attr('stroke-width', .2).lower() }33:T490,## Scatterplot Brushing We may use D3's built-in `brush` as a way to create a 1D and 2D brushes. A 2D brush is a natural way to select points in a scatterplot. The brush needs to be added to a group that contains our scatterplot. Here we need to specify the extents over which the brush is defined, and then associate a listener with the brush for different types of events: * `on`: this is continuously called as the user is performing the brush. * `end`: called when the user has finished the brush (released the mouse button). * `start`: called when the user has started the brush, e.g. pressed mouse button (not shown). Regardless of event type, we can access the brush's rectangle coordinates via `d3.event.selection`, where the first item is the lower-left corner, and the second item is the upper-right corner. From here, we can test to see if points are within the brush, followed by updating the circle marks based on the brush, as well as propagate the selected data items to our other views. ##

Exercise

Your result should look like:

34:[{"id":"83685aa14646baad061d405841f2d3b8f7b0c221cd74959eb31058a14adfa22531591d45275bf74685bdfc4d9fd66f5ff12c4e4f1bbe568fb9d12c4c5ee9afb9","href":"https://static.observableusercontent.com/files/83685aa14646baad061d405841f2d3b8f7b0c221cd74959eb31058a14adfa22531591d45275bf74685bdfc4d9fd66f5ff12c4e4f1bbe568fb9d12c4c5ee9afb9","name":"ex1.png","type":"image/png","lastModified":1712803912909.457,"size":66840},{"id":"b0efa66d99447c56d709451bd330bbbd6de2eb6daf3eeabc6349f6ca66d13d478f6cdbfaa763fe13b12189a7fd11cc0a71d133e3909e7dee3041b96a607304de","href":"https://static.observableusercontent.com/files/b0efa66d99447c56d709451bd330bbbd6de2eb6daf3eeabc6349f6ca66d13d478f6cdbfaa763fe13b12189a7fd11cc0a71d133e3909e7dee3041b96a607304de","name":"ex2.png","type":"image/png","lastModified":1712803913438.261,"size":283371},{"id":"84662a82214cbb17182526bd17350133d8ac42556b82ac0e27f681a79bbda29c46e935c46d8981db43bc731f15699d23b7913aee5eae981cef1ffcda79dd3286","href":"https://static.observableusercontent.com/files/84662a82214cbb17182526bd17350133d8ac42556b82ac0e27f681a79bbda29c46e935c46d8981db43bc731f15699d23b7913aee5eae981cef1ffcda79dd3286","name":"ex3.png","type":"image/png","lastModified":1712803913450.359,"size":326027},{"id":"a26a815eb3726d8a6377c179523256827836740d7035614f5933772561f9d06c0c1b9251ae0d94ea9d525241fbe51e4e70984603bce237f585b728a59e6aff55","href":"https://static.observableusercontent.com/files/a26a815eb3726d8a6377c179523256827836740d7035614f5933772561f9d06c0c1b9251ae0d94ea9d525241fbe51e4e70984603bce237f585b728a59e6aff55","name":"ex4.png","type":"image/png","lastModified":1712804610559.667,"size":325034},{"id":"fbe74e6a0e79b4a5600ef2e64ca91be6c4032b2e2dda0b60359c5d02abe2011dd7e8fd25525a19fb3a0869ac1571dd1d812117d2004f080a20ced81f6d0b4cba","href":"https://static.observableusercontent.com/files/fbe74e6a0e79b4a5600ef2e64ca91be6c4032b2e2dda0b60359c5d02abe2011dd7e8fd25525a19fb3a0869ac1571dd1d812117d2004f080a20ced81f6d0b4cba","name":"nba_players.json","type":"application/json","lastModified":1680195446243.542,"size":150416}] 2f:{"title":"iPCA - Lab","cells":[{"id":0,"value":"# iPCA - Lab \n\nThis notebook illustrates one implementation of the paper [iPCA](http://www.cs.tufts.edu/~remco/publications/2009/Eurovis2009-iPCA.pdf).\n\nAn emphasis here is on **linked and coordinated views**.\n\nWe will have three views, all showing the _same data_, but in _different ways_.\n\nMore specifically, every graphical mark drawn in one view has a corresponding mark drawn in the other views.\n\nWe can use the **data join** as a way to link views together easily and to coordinate interactions between views.\n\nWe will use a **brush** to select data items. This will lead to the following sequence for handling linked interactions:\n\n1. Brush in the **visual range**.\n2. Gather data items in the **data domain**, whose graphical marks are within the brush.\n3. Update the visual appearance of these data items across _all views_.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"# Data\n\nOur data is comprised of a set of attributes of basketball players:\n\n* salary\n* age\n* blocks\n* steals\n* assists\n* two pointers\n* three pointers\n\nThe one thing to note below is that an additional property is created for each data item: `id`. This will be used to identify data items in the different views uniquely.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"nba_data = {\n let the_data = await FileAttachment('nba_players.json').json()\n the_data.forEach((datum,i) => {\n datum.id = i\n }) \n return the_data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"# Spatial Layout\n\nWe will have three main views:\n\n* A scatterplot corresponding to the PCA projection.\n* A parallel coordinates plot (PCP) for the data.\n* A PCP for the data projected onto the principal components (all of them, rather than just the top 2).\n\nHere we create a group element for each view, so that we can work in separate local coordinate systems.\n\n##

Exercise

\n\nCreate your layout:","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"create_groups = (main_plot) => {\n let scatterplot_g = main_plot.append('g').attr('id', 'scatterplot')\n let pcp_data_g = main_plot.append('g').attr('id', 'pcpdata')\n .attr('transform', 'translate(0,'+(scatter_size+pc_pad)+')')\n // Create the group 'pcp_pcs_g' with id 'pcppcs' in the position (scatter_size+pc_pad)+',0)\n // Code here ...\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"{\n let svg_elem = DOM.svg(width,width)\n let svg_selection = d3.select(svg_elem)\n // create the main_plot as a group and translate to ('pad', 'pad')\n let main_plot = // Code here ...\n create_groups(main_plot)\n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"# Scales\n\nOur scales for the scatterplot are pretty straightforward.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"att_order = ['salary', 'age', 'block', 'steal', 'assist', 'two_pointers', 'three_pointers']","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"pc_order = ['pc0', 'pc1', 'pc2', 'pc3', 'pc4', 'pc5', 'pc6']","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"scatter_x_scale = d3.scaleLinear().domain(d3.extent(nba_data, d => d.pc0)).range([0,scatter_size])","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"// Create the 'scatter_y_scale' as a linear scale and set: \n// domain: min and max of variable pc1\n// range: [0, ???]\n// Code here ...","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"Scales for the PCPs are a bit more involved. We need a scale to _position axes_, as well as _1 scale per attribute_ to map a data item onto a polyline.","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"attribute_scale = d3.scalePoint().domain(att_order).range([0,scatter_size])","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"// Create a simimar scale 'pc_scale' for the PCP\n// Code here ...","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"pcp_data_scale = {\n let all_scales = {}\n att_order.forEach((att,i) => {\n all_scales[att] = d3.scaleLinear().domain(d3.extent(nba_data, d => d[att])).range([pcp_size,0])\n })\n return all_scales\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"pcp_pcs_scale = {\n let all_scales = {}\n pc_order.forEach((pc,i) => {\n // Create the scale for each component of PCP\n // Code here ...\n })\n return all_scales\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"# Scatterplot\n\nOur scatterplot is rather straightforward.\n\nHowever, there is one addition made here. Our data join is no longer called with a single argument, but two arguments:\n\n* The first argument is our data array.\n* The second argument is a function. This function will be evaluated on _each item in our array_, and will associate each item with a **unique key**. This key will be the basis for how data bound to elements (in the selection) will be _matched_ with the data specified in the join. So, rather than matching based on item order, we now match based on a specified key, enabling for much more flexibility in how we perform data joins.\n\n\n##

Exercise

\n\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"{\n let svg_elem = DOM.svg(width,width)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n \n create_scatterplot(main_plot.select('#scatterplot'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"create_scatterplot = (scatter_group) => {\n // create the scatterplot following this steps: \n // selectAll circles\n // data join\n // add circles\n // set 'cx' and 'cy' attributes using the scatter_x_scale and scatter_y_scale scales\n // set radius 'r' with 4\n // set 'fill' attribute using 'default_color'\n // set 'stroke' with HCL(0, 0, 70)\n // Code here ...\n \n tweak_scatterplot(scatter_group)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"# Parallel Coordinates\n\nWe will draw parallel coordinates for both our data (aligned horizontally) and the data projected onto eigenvectors (aligned vertically).\n\nWe use `d3.line` to draw each data item, effectively emitting the geometry used to draw a path element. This expects an array of Objects, where we do a bit of formatting before we pass a data item onto the line. In this example, note here the flexibility in how we specify functions for element attributes.\n\n##

Exercise

\n\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"{\n let svg_elem = DOM.svg(width,width)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n \n create_scatterplot(main_plot.select('#scatterplot'))\n create_data_pcp(main_plot.select('#pcpdata'))\n create_pcs_pcp(main_plot.select('#pcppcs'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"data_line = d3.line()\n .x(d => attribute_scale(d.att))\n .y(d => pcp_data_scale[d.att](d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"pc_line = //create a similar line \n // set x using pc_scale \n // set y using pcp_data_scale","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"create_data_pcp = (pcp_data_group) => {\n pcp_data_group.selectAll('path')\n .data(nba_data, d => d.id) // same data as scatterplot! same keys!\n .enter()\n .append('path')\n .attr('d', d => {\n let poly_line = att_order.map((a,i) => {\n return {att:a,value:d[a]}\n })\n return data_line(poly_line)\n })\n .attr('class', 'line')\n .attr('fill', 'None').attr('stroke', default_color).attr('stroke-width', 0.2).attr('stroke-opacity', 0.7)\n \n pcp_data_axes(pcp_data_group)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"pcp_data_axes = (pcp_data_group) => {\n pcp_data_group.selectAll('axes').data(att_order).enter().append('g')\n .attr('transform', d => 'translate('+attribute_scale(d)+',0)')\n .attr('class', 'pcpax')\n .each(function(d,i) {\n d3.select(this).call(d3.axisRight(pcp_data_scale[d]).ticks(4))\n })\n \n pcp_data_group.selectAll('.pcpax').selectAll('path').attr('stroke', d3.hcl(0,0,40))\n pcp_data_group.selectAll('.pcpax').selectAll('line').attr('stroke', d3.hcl(0,0,40))\n pcp_data_group.selectAll('.pcpax').selectAll('text').attr('fill', d3.hcl(0,0,40))\n \n pcp_data_group.selectAll('axestext').data(att_order).enter().append('g')\n .attr('transform', d => 'translate('+attribute_scale(d)+','+(pcp_size+15)+')')\n .append('text').text(d => d).attr('text-anchor', 'middle').attr('font-size', 10)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"create_pcs_pcp = (pcp_pcs_group) => {\n pcp_pcs_group.selectAll('path')\n // Do the same for PCP\n // Code here ...\n \n pcp_pcs_axes(pcp_pcs_group)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"pcp_pcs_axes = (pcp_pcs_group) => {\n pcp_pcs_group.selectAll('axes').data(pc_order).enter().append('g')\n .attr('transform', d => 'translate(0,'+pc_scale(d)+')')\n .attr('class', 'pcpax')\n .each(function(d,i) {\n d3.select(this).call(d3.axisBottom(pcp_pcs_scale[d]).ticks(6))\n })\n \n pcp_pcs_group.selectAll('.pcpax').selectAll('path').attr('stroke', d3.hcl(0,0,40))\n pcp_pcs_group.selectAll('.pcpax').selectAll('line').attr('stroke', d3.hcl(0,0,40))\n pcp_pcs_group.selectAll('.pcpax').selectAll('text').attr('fill', d3.hcl(0,0,40))\n \n pcp_pcs_group.selectAll('axestext').data(pc_order).enter().append('g')\n .attr('transform', d => 'translate('+(pcp_size+15)+','+pc_scale(d)+')')\n .append('text').text(d => d).attr('text-anchor', 'middle').attr('alignment-baseline', 'middle').attr('font-size', 10)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"# Interaction\n\nIn this part, we show the main advantage in using keys for our data join. Given `selected_data`, which arises from _some_ selection, we can easily update the visual appearance of all of our plots using the **update selection**, matching the already drawn elements with the selected data via **keys**:\n\n* The update selection provides us elements that matched with the selected data - we update their visual appearance to indicate a user's brush (across _all_ views).\n* The exit selection provides us elements that did not match with the selected data - we resort back to their default appearance.","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"# Color","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"default_color = d3.hcl(320,40,50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"selected_color = d3.hcl(140,80,30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"{\n let svg_elem = DOM.svg(width,width)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n \n create_scatterplot(main_plot.select('#scatterplot'))\n create_data_pcp(main_plot.select('#pcpdata'))\n create_pcs_pcp(main_plot.select('#pcppcs'))\n \n scatterplot_brush(main_plot.select('#scatterplot'), main_plot.select('#pcpdata'), main_plot.select('#pcppcs'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"scatterplot_brush = (scatterplot_group, pcp_data_group, pcp_pc_group) => {\n let brush = d3.brush().extent([[0,0],[scatter_size,scatter_size]])\n \n brush.on('brush', () => {\n let rect_select = d3.event.selection;\n\t\tlet min_pc0 = scatter_x_scale.invert(rect_select[0][0]);\n\t\tlet max_pc0 = scatter_x_scale.invert(rect_select[1][0]);\n // do the same fot pc1 \n let min_pc1 = ??\n\t\tlet max_pc1 = ??\n\n // creates a filter to brush\n\t\tlet brushed_data = nba_data.filter(d => {\n\t\t\treturn ??\n\t\t});\n\n // link all updates\n })\n .on('end', () => {\n scatterplot_group.selectAll('.selection,.handle').attr('style', 'display: none;')\n })\n \n scatterplot_group.call(brush)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"## Parallel Coordinates Brushing\n\nBrushing for PCPs serve a similar function to scatterplot brushing, however there are two important differences:\n\n* We are use 1D brushing, as we are only brushing individual attributes.\n* We associate one brush per attribute. This implies we need to define one group per attribute for creating the brushes. We create these groups via a data join, using the attributes, and when we listen for brush events, the function we specify will be populated with the particular attribute that was bound to the group, enabling us to customize how we identify data items based on the group's attribute.\n\n##

Exercise

\n\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"pc_brush = (scatterplot_group, pcp_data_group, pcp_pc_group) => {\n let brush_pad = 8\n \n let data_brush = d3.brushY().extent([[-brush_pad,0],[brush_pad,pcp_size]])\n pcp_data_group.selectAll('guides').data(att_order).enter().append('g').attr('class', 'dataguide')\n\t\t.attr('transform', d => 'translate('+(attribute_scale(d))+','+(0)+')').raise()\n \n data_brush.on('brush', att => {\n // Complete\n let rect_select = ???;\n\t\tlet min_att = ???;\n\t\tlet max_att = ???;\n\n\t\tlet brushed_data = nba_data.filter(d => {\n\t\t\treturn ???\n\t\t});\n \n linked_updates(brushed_data, scatterplot_group, pcp_data_group, pcp_pc_group)\n })\n .on('end', () => {\n pcp_data_group.selectAll('.selection,.handle').attr('style', 'display: none;')\n })\n\n // Do the same for PCP creating 'pc_brush'\n // Code here ...\n \n pcp_data_group.selectAll('.dataguide').call(data_brush)\n pcp_pc_group.selectAll('.pcguide').call(pc_brush)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"# Final Interaction\n\nJoin all. Now using all functions, we can interact with our iPCA.","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"pcp_plot = {\n let svg_elem = DOM.svg(width,width)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n \n create_scatterplot(main_plot.select('#scatterplot'))\n create_data_pcp(main_plot.select('#pcpdata'))\n create_pcs_pcp(main_plot.select('#pcppcs'))\n \n scatterplot_brush(main_plot.select('#scatterplot'), main_plot.select('#pcpdata'), main_plot.select('#pcppcs'))\n pc_brush(main_plot.select('#scatterplot'), main_plot.select('#pcpdata'), main_plot.select('#pcppcs'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"# Sizing","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"scatter_size = 410","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"pcp_size = 170","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"pad = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"pc_pad = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"# Imports","pinned":true,"hidden":false,"mode":"md"},{"id":18,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}