30:Tcc8,table_info = [ { technique: "Select", description: "Select interaction technique allows users mark items which they interested
in with visually distinctive feature, and it helps user easily track these items in
large amount of data with change in representations", example: "Sunburst Chart" }, { technique: "Explore", description: "Explore interaction technique leads user to perceive different sets of data
since human cannot examine full dataset if there are huge amount of data
, which appears to be inefficient fot gaining understanding and insight from data.", example: "Pannable Chart
Versor Dragging" }, { technique: "Reconfigure", description: "Reconfigure allows user change the spatial arrangement
of representations so they can display different perspectives on the data", example: "Arc Diagram
Sankey Diagram" }, { technique: "Encode", description: "Encode interactive technique let user change the
visual representation of data element, which help user
uncovers new aspect of relationship in data.", example: "Versor Dragging" }, { technique: "Abstract/Elaborate", description: "Abstract/Elaborate provides users with the ability to adjust the level of absraction
of a data representation so users can have a board, contextual view of
the data while able to examining individual detail data at the same time.", example: "Zoomable Sunbrust Chart
Zoomable Circle Packing
Zoomable Rotate Map" }, { technique: "Filter", description: "Filter interactive technique allows users choose the data
that match their needs(with range or condition) being presented", example: "Phase of The Moon" }, { technique: "Connect", description: "Connect refers to interaction techniques that are used to
(1) highlight associations and relationships between data items that are already
represented and (2) show hidden data items that are relevant to a specified item.
Moreover, it helps users identify correnspoinding data item under different views", example: "Round Connection Chart
Brushable Scatterplot" } ]31:T574,chart1 = { const svg = d3.create('svg').attr('viewBox', [0, 0, 1000, height]); // Append x axis svg .append('g') .attr("transform", `translate(0,${height - 50})`) .call(xScaleAxis) .selectAll("text") .attr("y", 5) .attr("x", 3) .attr("dy", ".35em") .attr("transform", "rotate(40)") .style("text-anchor", "start"); //append y axis const yAxis = d3.axisLeft().scale(bar_yScale); svg .append('g') .attr('transform', 'translate(' + 50 + ',0)') .call(yAxis); //append title svg .append("text") .attr('transform', `translate(${width / 2}, ${50 / 2})`) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text(choice + ' Data in ' + choiceYear); // Add the data rectangles/bars svg .selectAll('rect') .data(summary_by_year) .join(enter => enter.append('rect')) .attr('x', d => scaleBand(d.key)) .attr('y', d => bar_yScale(d.value.avg_price)) .attr('width', scaleBand.bandwidth()) .attr('height', 0) .attr('fill', '#F34F1C'); //add animation svg .selectAll("rect") .transition() .duration(2000) .attr('y', d => bar_yScale(d.value[choice])) .attr('height', d => bar_yScale(0) - bar_yScale(d.value[choice])) .delay(function(d, i) { //console.log(i); return i * 10; }); return svg.node(); }32:T922,chart = { const root = my_pack(nested_data); let focus = root; let view; const svg = d3 .create("svg") .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("background", color(0)) .style("cursor", "pointer") .on("click", () => zoom(root)); const node = svg .append("g") .selectAll("circle") .data(root.descendants().slice(1)) .join("circle") .attr("fill", d => (d.children ? color(d.depth) : "white")) .attr("pointer-events", d => (!d.children ? "none" : null)) .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); }) .on("mouseout", function() { d3.select(this).attr("stroke", null); }) .on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation())); const label = svg .append("g") .style("font", "10px sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .join("text") .style("fill-opacity", d => (d.parent === root ? 1 : 0)) .style("display", d => (d.parent === root ? "inline" : "none")) .text(d => d.data.name); zoomTo([root.x, root.y, root.r * 2]); function zoomTo(v) { const k = width / v[2]; view = v; label.attr( "transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})` ); node.attr( "transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})` ); node.attr("r", d => d.r * k); } function zoom(d) { const focus0 = focus; focus = d; const transition = svg .transition() .duration(d3.event.altKey ? 7500 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]); return t => zoomTo(i(t)); }); label .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .transition(transition) .style("fill-opacity", d => (d.parent === focus ? 1 : 0)) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } return svg.node(); }33:T7e4,chart2 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const tip = svg.append('g'); const tipRect = tip.append("rect"); const tipText = tip.append('text').style("text-anchor", "middle"); svg .append("g") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("transform", "rotate(-40)"); svg.append("g").call(yAxis); svg .append("text") .text("# of Cases in Each State") .style("font-weight", "bold") .style("font-size", "15px") .attr("transform", "translate(400, 20)"); svg .append("text") .text("States") .style("font-size", "12px") .attr("transform", "translate(450, 480)"); svg .append("text") .text("# of Cases") .style("font-size", "12px") .attr("transform", "translate(15, 200) rotate(-90)"); svg .selectAll("rect") .data(state_data) .join(enter => enter.append("rect")) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("width", x.bandwidth()) .attr("fill", "blue") .attr("opacity", "0.90") .on('mouseenter', function(d) { const position = d3.mouse(this); d3.select(this).style("fill", "red"); tip.attr('transform', `translate(${position[0]}, ${position[1]})`); const { x, y, width: w, height: h } = tipText.node().getBBox(); tipRect .attr("width", w) .attr("height", h) .attr("x", x) .attr("y", y) .attr("fill", "none"); tipText.text(d.x + ": " + d.y + " cases"); }) .on("mousemove", function(d) { const position = d3.mouse(this); tip.attr("transform", `translate(${position[0]}, ${position[1] - 10})`); }) .on("mouseout", function(d) { d3.select(this).style("fill", "blue"); tipRect.attr('stroke', 'none').attr('fill', 'none'); tipText.text(""); }); svg .selectAll("rect") .transition() .duration(2000) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.y)); return svg.node(); }34:[{"id":"2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","href":"https://static.observableusercontent.com/files/2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","name":"Airbnb_Cleaned.csv","type":"text/csv","lastModified":1590531710628.71,"size":1432106},{"id":"666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","href":"https://static.observableusercontent.com/files/666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","name":"weather-1.csv","type":"text/csv","lastModified":1590530535750.468,"size":47838}] 2e:{"title":"Interactivity LEI","cells":[{"id":0,"value":"md`# Interactivity LEI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"summary = md`In this notebook, you will learn about **interaction techniques** for visualization through following steps: \n1. Carefully read [this academic paper](https://www.cc.gatech.edu/~stasko/papers/infovis07-interaction.pdf) summarizing different techinques for interactions\n2. Fill out a table with descriptions and hyperlinks to examples\n3. Build three interactions technqiues of your choice _from scratch_ (i.e., not importing notebooks)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Interactivity Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/interactivity-assignments)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"summary_table = md`## Summary Table\nEdit the \\`table_info\\` cell below to populate the corresponding table with descriptions and examples of different interaction techniques.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"render_data_table(table_info)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"sample_visualizations = md`## Sample Visualizations\nIn this section, create -- **from scratch** -- three interactive visualization of your choice. Remember, so of the interactions may come from a separate cell (e.g., an [input](https://observablehq.com/@jashkenas/inputs) element), while others may come from interacting with the chart directly (hovering, clicking, mouse-wheel events, etc.).\n\nFeel free to use your final project data for exploration and practice!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"weather2012to2015 = d3.csvParse(await FileAttachment(\"weather-1.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`## Filter`","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"weatherByYear = weather2012to2015.filter(\n d => timeformat(d.date).getFullYear() == choiceYear\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"// Create a nested data structure that has the min,max, and avg price for each PermitClass\nsummary_by_year = d3\n .nest() // create a nesting function\n .key(d => timeformat(d.date)) // Where we nest by the \"date\" value of each object\n .rollup(d => {\n // For each _group_, compute the following values\n return {\n max_temp: d3.max(d, dd => +dd.temp_max),\n min_temp: d3.min(d, dd => +dd.temp_min),\n wind: d3.max(d, dd => +dd.wind)\n };\n })\n .entries(weatherByYear) // Pass our data in as we create the function!","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"weatherdate2 = weather2012to2015.map(d => timeformat(d.date).getFullYear())","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"scaleBand = d3\n .scaleBand()\n .domain(weatherByYear.map(d => timeformat(d.date)))\n .range([50, width])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"xScaleAxis = d3\n .axisBottom(scaleBand)\n .tickFormat(d3.timeFormat(\"%Y/%m/%d\"))\n .tickValues(\n scaleBand.domain().filter(function(d, i) {\n return !(i % 15);\n })\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"bar_yScale = d3\n .scaleLinear()\n .domain([0, d3.max(summary_by_year.map(d => d.value[choice]))])\n .range([height - 50, 50])","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"viewof choiceYear = select([2012, 2013, 2014, 2015])","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"viewof choice = select([\"max_temp\", \"min_temp\", \"wind\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`## Abstract/Elaborate`","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"SeattleLiving = d3.csvParse(await FileAttachment(\"Airbnb_Cleaned.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"// Nest your data by type 1, then type 2\nnested_data = d3\n .nest()\n .key(d => d['address'])\n .key(a => a['room_type'])\n .entries(SeattleLiving)","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"nested_data.map(d => {\n d.name = d.key;\n d.children = d.values.map(dd => {\n dd.name = dd.key;\n return dd;\n });\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"my_pack = data =>\n d3\n .pack()\n .size([width, height])\n .padding(3)(\n d3\n .hierarchy(\n { key: \"Greater Seattle Area\", values: nested_data },\n d => d.values\n )\n .sum(d => +d.bedrooms)\n .sort((a, b) => b.value - a.value)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`## Select`","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"state_data1 = data.filter(d => d.date === \"2020-05-25\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"state_data = state_data1\n .map(function(d) {\n return {\n x: d.state,\n y: +d.cases,\n color: \"blue\"\n };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"margin = ({\n top: 30,\n right: 10,\n bottom: 80,\n left: 80\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"x = d3\n .scaleBand()\n .domain(state_data.map(d => d.x))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(state_data, d => d.y)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"timeformat = d3.timeParse(\"%Y/%m/%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"height = 932","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"pack_width = 932","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"color = d3\n .scaleLinear()\n .domain([0, 5])\n .range([\"hsl(152,80%,80%)\", \"hsl(228,30%,40%)\"])\n .interpolate(d3.interpolateHcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}