31:Tb8b,table_info = [ { technique: "Select", description: " Users distinctively mark data points they want
to keep track of it so that they can easily point
out specific points in a larget dataset and/or for
when the visualization representation is rearranged. ", example: "Complete History of the NFL" }, { technique: "Explore", description: " Users dive deeper into a specific part of the dataset.
For instance,this can be done by adding new data points into the visualization
as others are removed. ", example: "COVID-19 Update" }, { technique: "Reconfigure", description: " Users can manipluate the way the data is arranged.
for instance, users can change the variables shown on the axes.
", example: "Sortable Bar Chart" }, { technique: "Encode", description: " Users have ability to modify the visual representation of
the data. This may include changing the overall chart type
being used or attributes of the chart such as color, size, etc.", example: "Bivariate Choropleth" }, { technique: "Abstract/Elaborate", description: "Users can adjust how abstract or specific to view the data.
This can range from a high level overview to the details for a
specific data point in the set. Common approaches to this include
hovering over a data point and zooming in geographical
representations. ", example: "Zoomable Sunburst" }, { technique: "Filter", description: " Users are enable to input certain conditions and the
visualization will only show the data that satisfy it.
For instance, users can specify a certain range and/or factors to view through
a scrollbar or select boxes. ", example: "Apartment Rental Prices" }, { technique: "Connect", description: " Users can interact with data through highlighting and pointing out relationships within the data.
This includes relationships between variables that are easily identifiable
in the visualization as well as possible hidden ones (e.g. datapoints
that are not originally shown until a user selected a connected point). ", example: "Royal Constellations" } ]32:T4de,scatter_plot = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height1]); svg.node().update = current_metric => { svg.append("g").call(xAxis); svg.append("g").call(yAxis); // define total number of case svg .selectAll('circle') .data(current_metric) .join(enter => enter.append("circle")) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("fill", d => d.color) .attr("r", 5) .attr("opacity", 1); // define number of deaths data svg .append("text") .attr("class", "text") .attr("transform", "translate(500,500)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Date"); svg .append("text") .attr("class", "text") .attr("transform", "translate(25,100)rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Numbers"); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,20)") .style("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .text(" Covid-19 USA Number of Cases v.s. Deaths - 05/01 - 05/15"); }; return svg.node(); }33:T5dd,chart2 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height1]); svg.node().update = current_metric => { svg.append("g").call(xAxis1); svg.append("g").call(yAxis1); // define cases data svg .selectAll('circle') .data(current_metric) .join(enter => enter.append("circle")) .attr("cx", d => x1(d.x.substring(8, 10))) .attr("cy", d => y1(d.y1)) .attr("fill", "steelblue") .attr("r", 5) .attr("opacity", 1); // define deaths data svg .selectAll('.circle') .data(current_metric) .join(enter => enter.append("circle")) .attr("cx", d => x1(d.x.substring(8, 10))) .attr("cy", d => y1(d.y2)) .attr("fill", "pink") .attr("r", 5) .attr("opacity", 1); svg .append("text") .attr("class", "text") .attr("transform", "translate(488,500)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Date"); svg .append("text") .attr("class", "text") .attr("transform", "translate(25,100)rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Numbers"); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,20)") .style("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .text("Covid-19 USA Jan - May Number of Cases v.s. Deaths "); }; return svg.node(); }34:[] 2f:{"title":"Final Interactivity Kitty He","cells":[{"id":0,"value":"md`# Final Interactivity Kitty He`","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":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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"render_data_table(table_info)","pinned":false,"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":943,"value":"md`## Visualization#1: Abstract/Elaborate\nThis is part of my work for the final group project - Last.fm music preference.Users can hover over to the bar to see the number of countries a specific artist appear on the top 50 list. From an high level stand point, users can get the idea who is more or less popluar over the globe by scanning the length of the bar. However, if users want to know how many coutries Coldplay appear on the top 50 lists, they have to mouseover to see the exact data. In this case, I consider this type of interactivity as Abtract/Elaborate `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"import { chart as barChart } from \"@info474/artists-vs-countries-bar-chart-kitty-fixed\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1475,"value":"barChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":1176,"value":"md`## Visualization#2: Filter\nThis data set is about the number of cases of Covid-19 in the US since Jan 2020 to May 2020. In this example, I'm only showing May 1st - 15th data to the users. Users can choose to view number of cases versus number of deaths in the US between May 1st to May 15th.Since users can only select a certain category of data to get information from this chart, I consider this type of interactivity as filter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1524,"value":"viewof type_of = radio({\n title: 'COVID-19 Numbers',\n //description: \"Choose the type of data\",\n options: [\"Number of cases\", \"Number of deaths\"],\n value: \"cases\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"scatter_plot.update(choose_type(type_of))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"function choose_type(metric) {\n if (metric === \"Number of cases\") {\n return caseNum;\n } else if (metric === \"Number of deaths\") {\n return deathNum;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"md`## Visualization #3: Reconfigure\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"viewof months = slider({\n max: 5,\n step: 1,\n min: 1,\n value: 1,\n description: \"Choose a month, 1 = Jan, 2 = Feb, 3 = March, 4 = Apr, 5= May\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1946,"value":"md`### V3 Dimension`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1867,"value":"chart2.update(choose_month(months))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"y1 = d3\n .scaleLinear()\n .domain([\n +d3.min(choose_month(months).map(d => d.y2)),\n +d3.max(choose_month(months).map(d => d.y1))\n ])\n .range([height1 - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1878,"value":"x1 = d3\n .scaleBand()\n .domain(choose_month(months).map(d => d.x.substring(8, 10)))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1880,"value":"xAxis1 = g =>\n g\n .attr(\"transform\", `translate(0,${height1 - margin.bottom})`)\n .call(d3.axisBottom(x1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"yAxis1 = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"function choose_month(month) {\n month = \"0\" + month;\n var result = data\n .filter(d => d.date.substring(5, 7) === month)\n .map(d => ({ x: d.date, y1: d.cases, y2: d.deaths }));\n return result;\n}","pinned":false,"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":1982,"value":"md`### V2&3 data`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1500,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"caseNum = data\n .map(d => ({\n x: d.date,\n y: +d.cases,\n color: \"steelblue\"\n }))\n .slice(101, 115)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"deathNum = data\n .map(d => ({\n x: d.date,\n y: +d.deaths,\n color: \"pink\"\n }))\n .slice(101, 115)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"dateData = data.filter(d => d.date.substring(5, 7) === \"05\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1976,"value":"md`### V2 Dimension`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2019,"value":"margin = ({ top: 30, right: 30, bottom: 50, left: 60 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1529,"value":"y = d3\n .scaleLinear()\n .domain([data.map(d => +d.deaths)[101], data.map(d => +d.cases)[115]])\n .range([height1 - margin1.bottom, margin1.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"x = d3\n .scaleBand()\n .domain(data.map(d => d.date).slice(101, 115))\n .range([margin1.left, width - margin1.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},28)`).call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height1 - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"md`### V3 Dimension`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1548,"value":"height1 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"margin1 = ({\n top: 100,\n right: 30,\n bottom: 80,\n left: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"parseTime = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"import { select, radio } from \"@jashkenas/inputs\"","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":1854,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}