2a:Tc4a,table_info = [ { technique: "Select", description: " provide users with the ability to mark a data item(s) of interest to keep track of it. 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: "link" }, { technique: "Explore", description: "enable users to examine a different subset of data cases. When users view data using an Infovis system,they often can only see a limited number of data items at a time because of some combination of the large scale of the data set, view and/or screen limitations, and fundamental perceptual and cognitivelimitations in human information processing. ", example: "link" }, { technique: "Reconfigure", description: "Reconfigure interaction techniques provide users with different perspectives onto the data set by changing the spatial arrangement of representations. One of the essential purposes of Infovis is to reveal hidden characteristics of data and the relationships between them. ", example: "link" }, { technique: "Encode", description: "Encode techniques enable users to alter the fundamental visual representation of the data including visual appearance (e.g., color,size, and shape) of each data element.", example: "link" }, { technique: "Abstract/Elaborate", description: "Abstract/Elaborate interaction techniques provide users with the ability to adjust the level of abstraction of a data representation.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: "link" }, { technique: "Filter", description: "Filter interaction techniques enable users to change the set of data items being presented based on some specific conditions. In this type of interaction, users specify a range or condition, so that only data items meeting those criteria are presented. ", example: "link" }, { 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: "link" } ]2b:Tcb5,map = { const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .attr("class", "italy"); const legend = svg .append("g") .attr("class", "legend") .attr("fill", "#777") .attr( "transform", `translate(${w > breakpoint ? [w - w / 3.5, h / 3.5] : [10, h - 15]})` ); legend .append("text") .attr("class", "legend-title") .text("No. confirmed cases") .attr("dy", -maxRadius * 2.9); const legendBubbles = legend .selectAll("g") .data(legendRadii) .join("g"); let margin = 0; legendBubbles .attr("transform", (d, i) => { margin += i === 0 ? 0 : radius(legendBubbles.data()[i - 1]) * 1.5 + 15; return `translate(${margin + radius(d)}, 0)`; }) .append("circle") .attr("class", "legend-bubble") //.attr("fill", d => colorScale(d)) .attr("fill", d => "red") .attr("fill-opacity", 0.5) .attr("cy", d => -radius(d)) .attr("r", radius); legendBubbles .append("text") .attr("dy", "1.3em") .text(w > breakpoint ? numFormat : sFormat); svg .append("path") .datum(provinces) .attr("d", path); const g = svg .selectAll(".subunit") .data(provinces.features) .enter() .append("path") .attr("class", function(d) { return "subunit"; }) .attr("d", path); const bubble = svg .selectAll(".bubble") .data(data[mutable index]) .enter() .append("circle") .attr("transform", function(d) { return "translate(" + projection([d.long, d.lat]) + ")"; }) .attr("class", "bubble") .attr("fill-opacity", 0.5) .attr("fill", d => colorScale(+d.totale_casi)) .attr("fill", "red") .attr("r", d => radius(+d.totale_casi)); bubble.append("title"); const tip = svg .append("text") .style("pointer-events", "none") .style("text-anchor", "middle"); // tooltip bubble.on("mouseenter", event => { const value = event.target.__data__; const pointer = d3.pointer(event, this); tip .attr("x", 300) .attr("y", 500) .text( d => `${value.denominazione_provincia}: ${numFormat( +value.totale_casi )} cases` ); }); bubble.on("mouseout", event => { tip.text(""); }); const wrapper = html`

`; wrapper.append(svg.node()); // const zoom = d3 // .zoom() // .scaleExtent([0.5, 4]) //.on("zoom", zoomed); // function zoomed({ transform }) { // // const transform = event.transform; // g.attr("transform", transform); // svg.attr("transform", transform); // } // svg.call(zoom); return Object.assign(wrapper, { update(i) { const t = svg .transition() .duration(i === 0 ? 0 : delay) .ease(d3.easeLinear); bubble .data(data[i]) .call(b => { b.transition(t) .attr("fill", d => colorScale(+d.totale_casi)) .attr("fill", "red") .attr("r", d => radius(+d.totale_casi)); }) .select("title") .text( d => `${d.denominazione_provincia}: ${numFormat(+d.totale_casi)} cases` ); } }); }2c:[{"id":"7a494ae46571d92dd4f8a754c43e748048151f23143f9f2e5f1b95ee2afaa9fbf31573a978645d9618b3fd217dfad1a07264cc5d68c9612f84ce4b3be50389a0","href":"https://static.observableusercontent.com/files/7a494ae46571d92dd4f8a754c43e748048151f23143f9f2e5f1b95ee2afaa9fbf31573a978645d9618b3fd217dfad1a07264cc5d68c9612f84ce4b3be50389a0","name":"covid19_italy_province.csv","type":"text/csv","lastModified":1607107436996.54,"size":2352253},{"id":"9132b2f74dffe9214d02351c3945352c687c42e3f06c6afd5c6438b6780f206b56f52ec15398c6d5677ade3d81811a692ff945fa5007ca8d53dd65acd6ea63d6","href":"https://static.observableusercontent.com/files/9132b2f74dffe9214d02351c3945352c687c42e3f06c6afd5c6438b6780f206b56f52ec15398c6d5677ade3d81811a692ff945fa5007ca8d53dd65acd6ea63d6","name":"italy2-1.json","type":"application/json","lastModified":1607107436996.54,"size":98808}] 29:{"title":"Interactivity(Ma)","cells":[{"id":0,"value":"md`# Interactivity(Ma)`","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":"$2a","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":612,"value":"FileAttachment(\"covid19_italy_province.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"data_old","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"data_old = d3.csvParse(await FileAttachment(\"covid19_italy_province.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"data.filter(d => d.TotalPositiveCases > 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"data_old.filter(d => d.Date == \"2020-02-25T18:00:00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"viewof day = Scrubber(dates.slice(0, data.length), {\n delay,\n loop: false,\n format: d => d.toLocaleDateString()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs"},{"id":767,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"description = md`## Interactivity Description\nIn the section below, please detail what interaction techniques you employed (using the formal language from the paper), and describe what questions it allows you to ask of the chart`","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"md`### filter`","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"md`I used filter as the interaction technique. I used the slider function to let users filter out the data they want to see by date. People are able to see how the cases in Italy proceed after the first case was recorded. They can see the locations that have more breakouts.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`### encode`","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"md`I used encode to let the audience see the number of people impacted by using circles. The size of the circles shows the scale of people infected. When the user hover on it, the circle has a black outline. The name of the city and the number of cases are also showing at a specific spot of the map. People can see the specific name of the city and the number of cases.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":748,"value":"md`### Abstract/elabrate`","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"md` I am able to use abstract/elabrate for people to look at specific areas they want to see. This can help to answer the question of where the cases are located at when time proceeds.`","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":608,"value":"md`implementing the details of the graphs`","pinned":true,"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":605,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"legendRadii = [10, 500, 2000, 10000]","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"map.update(index)","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"w = Math.min(width, 700)","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"h = Math.round(w * 1.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"maxLegend = Math.round(maxCases / magnitude) * magnitude","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"magnitude = toMagnitude(maxCases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"function toMagnitude(n) {\n var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);\n return Math.pow(10, order);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"mutable index = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"{\n mutable index = dates.indexOf(day);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"radius = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([0, maxRadius])","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"colorScale = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"delay = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"maxCases = d3.max(recentData.map(d => +d.totale_casi))","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"data = responses.map(r => d3.csvParse(r))","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"breakpoint = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"maxRadius = w > breakpoint ? 30 : 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"recentData = data[data.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"responses = Promise.all(urls.map(u => fetch(u))).then(responses =>\n Promise.all(responses.filter(r => r.ok).map(r => r.text()))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"csvs = Promise.all(urls.map(u => fetch(u).then(u => u.text())))","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"urls = dateStrings.map(d => baseUrl.replace(\"DATE\", d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"baseUrl = \"https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province-DATE.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"startDate = new Date(\"2020-02-24T11:00:00Z\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"endDate = new Date(\"2020-06-25T11:00:00Z\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"dateStrings = dates.map(\n d =>\n d\n .toISOString()\n .replace(/-/g, '')\n .split(\"T\")[0]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"dates = dateRange(startDate, endDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"function dateRange(start, end) {\n const duration = 1000 * 60 * 60 * 24;\n const dates = [];\n let ms = start * 1;\n while (ms < end * 1) {\n dates.push(new Date(ms));\n ms += duration;\n }\n return dates;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"allProvinces = topojson.feature(italy, italy.objects.subunits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"provinces = ({\n ...allProvinces,\n // Nix Pantelleria\n features: allProvinces.features.filter(\n f => d3.min(f.geometry.coordinates.flat(10).filter(d => d > 30)) > 36\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"places = topojson.feature(italy, italy.objects.places)","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"sFormat = d3.format(\".1s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"numFormat = d3.format(\",\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"projection = d3\n .geoAlbers()\n .rotate([-12.8, 0])\n .parallels([40, 50])\n .fitExtent([[0, 0], [w, h]], provinces)","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"italy = FileAttachment(\"italy2-1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"map_styles = {\n const c = `rgb(255, 255, 255, 0.5)`;\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}