30:T90f,table_info = [ { technique: "Select", description: "A user is able to choose items of interest to keep track of even as the rest of the data changes", example: "https://observablehq.com/@xavier-brinon/seat-select" }, { technique: "Explore", description: "A user is able to examine a different subset of the data", example: "https://observablehq.com/@bartok32/exploring-concurrent-twitter-hashtags-brexit-edition" }, { technique: "Reconfigure", description: "A user is able to see a different arrangement of the representation, such as sorting, rearranging, changing axes attributes, etc", example: "https://observablehq.com/@tpreusse/interactive-sort" }, { technique: "Encode", description: "A user is able to change the visual representation of the data, such as color, size, orientation, font, and shape", example: "https://observablehq.com/@youbastard/color-scales-with-adaptive-text-color" }, { technique: "Abstract/Elaborate", description: "A user is able to change the level of abstraction from showing an overview to details of individual cases", example: "https://observablehq.com/@jzhang/playing-the-percentages" }, { technique: "Filter", description: "A user is able to change the data they view based on a specific range or condition", example: "https://observablehq.com/@mbostock/ancestry-by-u-s-county" }, { technique: "Connect", description: "A user is able to see associations and relationships between data items", example: "http://www.datasketch.es/october/code/nadieh/" } ]31:T5b8,chart = { const svg = d3.create('svg').attr("viewBox", [0, 0, width, height]); svg.append('g').call(bx_axis); svg .append('text') .attr('x', width / 2) .attr('y', height - margin.bottom + 40) .text('Year'); svg.append('g').call(by_axis); svg .append("text") .attr("y", margin.left / 2 - 30) .attr("x", -((height - margin.bottom) / 2)) .style("text-anchor", "middle") .text("Avocado Volume") .attr('transform', "rotate(-90)"); var order = ''; if (base == 'plu4046') { order = ['plu4046', 'plu4225', 'plu4770']; } else if (base == 'plu4225') { order = ['plu4225', 'plu4770', 'plu4046']; } else { order = ['plu4770', 'plu4046', 'plu4225']; } var colors = d3.scaleOrdinal( ['plu4046', 'plu4225', 'plu4770'], d3.schemeGreens[9].slice(3) ); var stack = d3.stack().keys(order); const chartData = stack(byYear); const groups = svg .append('g') .selectAll('.bar') .data(chartData) .join('g') .style('fill', (d, i) => colors(d.key)); groups .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => bar_x(d.data.year)) .attr('y', d => bar_y(d[1])) .attr('height', d => bar_y(d[0]) - bar_y(d[1])) .attr('width', bar_x.bandwidth()); svg .append("g") .attr("transform", "translate(400,10)") .append(() => legend({ color: colors, title: "Avocado Plu" }) ); return svg.node(); }32:[{"id":"e3ee5b82f342fbc4f444ec15291ff96539f7cebd2b4d4945a0732dd97e195dfdc7ccfd0e65ff82c65641e98f4d9a38752894861048251bec5bdd557306fe45a7","href":"https://static.observableusercontent.com/files/e3ee5b82f342fbc4f444ec15291ff96539f7cebd2b4d4945a0732dd97e195dfdc7ccfd0e65ff82c65641e98f4d9a38752894861048251bec5bdd557306fe45a7","name":"avocado.csv","type":"text/csv","lastModified":1590347093489.777,"size":1989197}] 2e:{"title":"Interactivity Kota","cells":[{"id":0,"value":"md`# Interactivity Kota`","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":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":622,"value":"md`### Reconfigure`","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"viewof base = radio({\n title: 'Avocado Type',\n description: \"Please select the Avocado type you would like to compare\",\n options: ['plu4046', 'plu4225', 'plu4770'],\n value: 'plu4046'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`### Encode`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"viewof interpolator = select({\n title: \"Color Scheme\",\n description: \"Please pick a color scheme\",\n options: color_list.map(d => \"interpolate\" + d),\n value: 'interpolateBlues'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"chart2 = {\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);\n\n svg.append('g').call(sx_axis);\n svg\n .append('text')\n .attr('x', width / 2)\n .attr('y', height - margin.bottom + 40)\n .text('Date');\n svg.append('g').call(sy_axis);\n svg\n .append(\"text\")\n .attr(\"y\", margin.left / 2 - 30)\n .attr(\"x\", -((height - margin.bottom) / 2))\n .style(\"text-anchor\", \"middle\")\n .text(\"Average Avocado Price\")\n .attr('transform', \"rotate(-90)\");\n\n svg\n .selectAll('circle')\n .data(byDate)\n .join(enter =>\n enter\n .append('circle')\n .attr('cx', d => x_scatter(d.date))\n .attr('cy', d => y_scatter(d.avgPrice))\n .attr('r', 2.5)\n .attr('fill', d => color_scatter(d.totalVolume))\n );\n\n svg\n .append(\"g\")\n .attr(\"transform\", \"translate(400,10)\")\n .append(() =>\n legend({\n color: color_scatter,\n title: \"Avocado Volume\"\n })\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"md`### Filter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"viewof type = radio({\n title: 'Avocado Type',\n description:\n \"Please select the Avocado type you would like to see the volume of\",\n options: ['conventional', 'organic'],\n value: 'conventional'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"chart3 = {\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);\n\n svg.append('g').call(sx2_axis);\n svg\n .append('text')\n .attr('x', width / 2)\n .attr('y', height - margin.bottom + 40)\n .text('Date');\n svg.append('g').call(sy2_axis);\n svg\n .append(\"text\")\n .attr(\"y\", margin.left / 2 - 30)\n .attr(\"x\", -((height - margin.bottom) / 2))\n .style(\"text-anchor\", \"middle\")\n .text(\"Avocado Volume\")\n .attr('transform', \"rotate(-90)\");\n\n svg\n .selectAll('circle')\n .data(data.filter(d => d.type == type))\n .join(enter =>\n enter\n .append('circle')\n .attr('cx', d => x_scatter2(d.date))\n .attr('cy', d => y_scatter2(d.totalVolume))\n .attr('r', 2.5)\n .attr('opacity', 0.25)\n .attr('fill', d => {\n if (type == 'conventional') {\n return 'purple';\n } else {\n return 'green';\n }\n })\n );\n\n return svg.node();\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":16,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"data = d3\n .csvParse(await FileAttachment('avocado.csv').text(), d3.autoType)\n .map(d => {\n return {\n date: d.Date,\n avgPrice: d.AveragePrice,\n totalVolume: d['Total Volume'],\n plu4046: d['4046'],\n plu4225: d['4225'],\n plu4770: d['4770'],\n totalBags: d['Total Bags'],\n smallBags: d['Small Bags'],\n largeBags: d['Large Bags'],\n xlBags: d['XLarge Bags'],\n type: d.type,\n year: d.year,\n region: d.region.match(/[A-Z][a-z]+|[0-9]+/g).join(\" \")\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"margin = ({ top: 20, right: 30, bottom: 50, left: 120 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"import { legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"import { radio, select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"md`**Reconfigure**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"bar_x = d3\n .scaleBand()\n .domain(_.uniqBy(byYear.map(d => d.year)))\n .range([margin.left, width - margin.right])\n .paddingInner(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"bar_y = d3\n .scaleLinear()\n .domain([0, d3.max(byYear, d => d.totalVolume)])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"bx_axis = g =>\n g\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(bar_x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"by_axis = g =>\n g.attr(\"transform\", `translate(${margin.left}, 0)`).call(d3.axisLeft(bar_y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"byYear = d3\n .nest()\n .key(d => d.year)\n .rollup(d => {\n return {\n totalVolume: d3.sum(d, dd => dd.totalVolume),\n plu4046: d3.sum(d, dd => dd.plu4046),\n plu4225: d3.sum(d, dd => dd.plu4225),\n plu4770: d3.sum(d, dd => dd.plu4770)\n };\n })\n .entries(data)\n .map(d => {\n return {\n year: parseInt(d.key),\n totalVolume: d.value.totalVolume,\n plu4046: d.value.plu4046,\n plu4225: d.value.plu4225,\n plu4770: d.value.plu4770\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"md`**Encode**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"import { color_list } from '@info474/using-color-with-d3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"color_scatter = d3.scaleSequential(\n d3.extent(byDate, d => d.totalVolume),\n d3[interpolator]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"y_scatter = d3\n .scaleLinear()\n .domain(d3.extent(byDate, d => d.avgPrice))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"sy_axis = g =>\n g\n .attr(\"transform\", `translate(${margin.left - 50},0)`)\n .call(d3.axisLeft(y_scatter))","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"x_scatter = d3\n .scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left - 50, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"sx_axis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_scatter).tickFormat(d3.timeFormat(\"%m/%Y\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"byDate = d3\n .nest()\n .key(d => d.date)\n .rollup(d => {\n return {\n totalVolume: d3.sum(d, dd => dd.totalVolume),\n plu4046: d3.sum(d, dd => dd.plu4046),\n plu4225: d3.sum(d, dd => dd.plu4225),\n plu4770: d3.sum(d, dd => dd.plu4770),\n avgPrice: d3.mean(d, dd => dd.avgPrice)\n };\n })\n .entries(data)\n .map(d => {\n return {\n date: d3.isoParse(d.key),\n totalVolume: d.value.totalVolume,\n plu4046: d.value.plu4046,\n plu4225: d.value.plu4225,\n plu4770: d.value.plu4770,\n avgPrice: d.value.avgPrice\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"md`**Filter**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"y_scatter2 = d3\n .scaleLog()\n .domain(d3.extent(data, d => d.totalVolume))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"sy2_axis = g =>\n g\n .attr(\"transform\", `translate(${margin.left - 30},0)`)\n .call(d3.axisLeft(y_scatter2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"x_scatter2 = d3\n .scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left - 30, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"sx2_axis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_scatter2).tickFormat(d3.timeFormat(\"%m/%Y\")))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}