25:["$","title",null,{"children":"Interactivity Zhang | Spring 2020 Info Vis | Observable"}] 4b:Tb50,table_info = [ { technique: "Select", description: "Mark noticiable element. By making items of interest
visually distinctive, users can easily keep track of them even in
a large data set and/or with changes in representations. ", example: "Influencers of Data Visualization Society
Connection between song's features and popularity

Point on a path detection
" }, { technique: "Explore", description: "Explore is to show more things by taking action.
Like Move from one thing to another
", example: " Radar & Venn" }, { technique: "Reconfigure", description: "Restrutcure your data with different focus. Like sorting or other mutation", example: "COVID-19 deaths and cases by country" }, { technique: "Encode", description: "change a different kind of data viz with
same data. Like bar chart to pie chart
", example: "23 May 2020: Area Charts in Vega-Lite and CSV Parsing" }, { technique: "Abstract/Elaborate", description: "Show more or less details. These types of
interactions allow users to alter the representation from an overview
down to details of individual data cases and often many levels in-between. ", example: "Sketchy Earth" }, { technique: "Filter", description: "Most common trick for presenting data.
It enable users to change the set of data items being
presented based on some specific conditions.", example: "Race by U.S. County" }, { 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.
", example: "COVID-19 in NYC by Zip Code & Income" } ]4c:T766,function labels(svg) { let label = svg .append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => (label = label .data(data.slice(0, n), d => d.name) .join( enter => enter .append("text") .attr( "transform", d => `translate(${race_x((prev.get(d) || d).value)},${race_y( (prev.get(d) || d).rank )})` ) .attr("y", race_y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text .append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em") ), update => update, exit => exit .transition(transition) .remove() .attr( "transform", d => `translate(${race_x((next.get(d) || d).value)},${race_y( (next.get(d) || d).rank )})` ) .call(g => g .select("tspan") .tween("text", d => textTween(d.value, (next.get(d) || d).value) ) ) ) .call(bar => bar .transition(transition) .attr( "transform", d => `translate(${race_x(d.value)},${race_y(d.rank)})` ) .call(g => g .select("tspan") .tween("text", d => textTween((prev.get(d) || d).value, d.value)) ) )); }4d:T575,chart2 = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, 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(); }4e:T496,choropleth_map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color, title: "Cars Traded", width: 260 })); svg .append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", d => color(data_map.get(d.properties.name.toLowerCase()))) .attr("d", path) .on("mouseenter", hovered) .on("mouseleave", unhovered) .append("title") .text( d => `${d.properties.name} Car Traded: ${data_map.get(d.properties.name.toLowerCase())}` ); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); function hovered(d) { d3.select(this) .raise() .attr("cursor", "pointer") .style("stroke", "#bada55") .style("stroke-width", "1.5"); } function unhovered(d) { d3.selectAll('path') .style("stroke", "black") .style("stroke-width", .5); } return svg.node(); }4f:[{"id":"81a2a032bbe489c31cea803f5bc01d051b8e1bfc05a6a280e8eb8b297f575858ad97f150ab2ccc5b45b578d0a68e2aba2269de4924b9f3d91d0ec1413201adc8","href":"https://static.observableusercontent.com/files/81a2a032bbe489c31cea803f5bc01d051b8e1bfc05a6a280e8eb8b297f575858ad97f150ab2ccc5b45b578d0a68e2aba2269de4924b9f3d91d0ec1413201adc8","name":"USA_cars_datasets.csv","type":"text/csv","lastModified":1590258835885.721,"size":284430},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1590259448610.411,"size":795407},{"id":"aea2040e07b5bdeb1ef30850e26153c13e053dad07bee77e5aba73d7658d28569f66bb63e8ad0d59a263eb0662ef6f381325cf7c815be5eacc5d9e7ac878de94","href":"https://static.observableusercontent.com/files/aea2040e07b5bdeb1ef30850e26153c13e053dad07bee77e5aba73d7658d28569f66bb63e8ad0d59a263eb0662ef6f381325cf7c815be5eacc5d9e7ac878de94","name":"preprocessed_car_data.csv","type":"text/csv","lastModified":1590530287606.944,"size":21858},{"id":"666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","href":"https://static.observableusercontent.com/files/666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","name":"weather-1.csv","type":"text/csv","lastModified":1590282617646.103,"size":47838}] 47:{"id":"17b2c65ea78f2145","slug":"interactivity-zhang","title":"Interactivity Zhang","thumbnail":"cfc9399c277b1d32cbb5768da51e3497dad33aa451742b32d5904c1c5c11dd6a","access_level":"public","create_time":"$D2020-05-22T07:24:52.035Z","update_time":"$D2020-05-27T01:06:28.165Z","view_time":null,"first_public_time":"$D2020-05-27T01:07:16.356Z","has_unpublished_edits":null,"fork":{"id":"bc6b2944b49e95c4","slug":"interactivity","title":"Interactivity","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":1066,"publish_version":1066,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a4a4722db9871c6","login":"yuanruizhang","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3ffdbf4492f5e30dff74629747a0f4ab9829141a8385d9ade1767bcc050e2c5e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactivity Zhang","cells":[{"id":0,"value":"md`# Interactivity Zhang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"render_data_table(table_info)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`We first take a brief look on data we imported`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"render_data_table(raw_data.slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md`## Race chart(Reconfigure)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"preprocessed_car_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"parseTime = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"//1. filter year, 2. change year from int to time\nfixed_car_data = preprocessed_car_data\n .filter(dd => dd.Year >= showYear)\n .map(d => {\n return {\n state: d.State,\n date: parseTime(d.Year),\n //date: new Date(formatTime(parseTime(d.Year))),\n value: d.Repaired\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"render_data_table(fixed_car_data.slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"years = Array.from(new Set(preprocessed_car_data.map(d => d.Year)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"md`drag to change the starting year`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"// display after year...\nviewof showYear = slider({\n min: d3.min(years),\n max: d3.max(years),\n step: 1,\n value: 2003\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"viewof replay = html`