30:T117f,md`## Part 1: Narrative Data Viz Read the article [Narrative Visualization: Telling Stories with Data](http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf) and answer the following questions: (There were diferences of opinions within the group) \n*1. According to your favorit dictionary, what is the *defintion* of a narrative?* \nAccording to Merriam-Webster's dictionary, a narrative is "a way of presenting or understanding a situation or series of events that reflects and promotes a particular point of view or set of values" \n*2. What is your favorite visualization among the examples in section 3? Explain why in a few words.* \nWhile all the visualizations have their merits, the 2005 Human Development does a good job of conveying an enormous amount of information in an intuitive way to the reader. This is done by sequentially delivering information. The visualization maintains readers' interest and focus by animating transitions when presenting data, maintaining an intuitive understanding of what kind of novel information is being presented. If we however look at Tufte’s principles one may argue that the data to ink ratio is poor given the large amount of ink used (it is an old graph). Further questions can be asked towards the graphical excellence of the data, while its all compiled into a small space, the user is not allowed to get a quick overview but rather limited to one at a time graphics in sequences. It is also arguable that the graphs in several places contains implicit lies e.g. slide 4.12 to 4.19, because the scale is not linear and the grid creates misleading understanding of relative distance. https://www.gapminder.org/downloads/human-development-trends-2005/ \n*3. In your opinion, what's the point of Figure 7?* \nFigure 7 gives an overview of what kinds of media genres use what kinds of visual and narrative structures, on the whole. The figure also provides insight into the importance of interactivity as a means of creating effective visualizations, and also highlights the underutilization of instructive interactivity and common storytelling techniques as a means of conveying information. Overall, the figure serves to present common visualization trends as well as how visualizations vary in their methods of delivering information. \n*4. Use Figure 7 to find the most common design choice within each category for the Visual narrative and Narrative structure (the categories within visual narrative are 'visual structuring', 'highlighting', etc). List those most common choices.* \n | Visual Narrative elements | Most Common Design Choice | |---------------------|:---------------------------:| | Visual Structuring | Consistent Visual Platforms | | Highlighting | Feature Distribution | | Transition Guidance | Object Continuity | | **Narrative Structure elements** | | | Ordering | User Directed Path | | Interactivity | Filtering/Selection/Search | | Messaging | Captions / Headlines | \n\n*Check out Figure 8 and section 4.3. Starting from these, answer the following two questions.* \n*5. What is your favorite genre of narrative visualization? Why? * The annotated chart is powerful because the majority of the total information is presented to the reader at once. Deciphering what general trends a chart conveys takes very little time, and studying the trends presented in the chart reveals information in a discoverable way. That is, unlike a informational video or slideshow of bullet points where information is proverbially thrown at the user, annotated charts allow users the discover the information for themselves directly from data, and gain context along the way with comments and annotations. It can be argued that there is little to no innate interactivity in annotated charts, but the process of studying the chart itself is interactive and allows for readers to explore the information at their whim. \n*6. What is your least favorite genre? Why?* Though slides arguable presents one of the most effective ways at conveying a lot of information in a linear and structured pattern, lack of interactivity make comprehending the content a chore. This is especially true in the case of slideshow presentations, where presenters go through the content linearly and the audience's attention span resides on the quality of the presentation. `31:T6f2,viewof selection = { const graph = d3.select(DOM.svg(width, height)) .property("value",[]); graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - padding.bottom})`) .call(xAxis); graph.append("g") // add the y axis to the graph .attr("class", "y axis") .attr("transform", `translate(${padding.left}, 0)`) // slight transform to position it correctly .call(yAxis); const rScale = d3.scaleSqrt() .domain([0, d3.max(data, d => d[dict[yaxis]])]) .range([0, 10]); var radius = d3.scaleSqrt() .range([2,8]); const dot = graph.append("g") .attr("fill", function(d) {return color(1)}) .selectAll("g") .data(data) //.enter() //.append("circle") .join("circle") .attr("class", "bubble") .attr("transform", d => `translate(${x(d[dict[xaxis]])},${y(d[dict[yaxis]])})`) .attr("r", d => rScale(d[dict[yaxis]]+d[dict[xaxis]])) .style("fill", function(d) { return color(d[dict[yaxis]])}); //.attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"}); graph.append("g") .call(d3.brush() .extent([[padding.left, padding.top], [width - padding.right, height - padding.bottom]]) .on("start brush end", brushed)); function brushed() { let value = []; if (d3.event.selection) { const [[x0, y0], [x1, y1]] = d3.event.selection; console.log(x0,y0,x1,y1) value = data.filter(d => x0 <= x(d[dict[xaxis]]) && x(d[dict[xaxis]]) < x1 && y0 <= y(d[dict[yaxis]]) && y(d[dict[yaxis]]) < y1); } graph.property("value", value).dispatch("input"); } return graph.node(); }32:[] 2e:{"title":"","cells":[{"id":606,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# Part II: Brushing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof xaxis = select({\n title: \"Crime on X axis\",\n options: data.columns.slice(1,15),\n value: data.columns[1]\n})\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"viewof yaxis = select({\n title: \"Crime on Y axis\",\n options: data.columns.slice(1,15),\n value: data.columns[2]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"md`\n\nThe dataset consist of 15 crime categories that can be selected and used to compare to see if there axist interesting korrelation in the data. The number of crimes varies widely between the categories, but is binned to districts. \n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"md` We had trouble getting the barcharts to dynamically update on brushing the scatterplot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`\n\nIt appears that there are certain korrelations between some of the crime types, but its not clear e.g. burglary and stolen property seams to go hand in hand. Oppositely viechel theft and stolen property does not seam to be korrelated at all. \n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n \n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(barData1)\n .join(\"rect\")\n .attr(\"x\", d => xb(d.year))\n .attr(\"y\", d => yb(d.value))\n .attr(\"height\", d => yb(0) - yb(d.value))\n .attr(\"width\", xb.bandwidth());\n \n svg.append(\"g\")\n .call(xAxisb);\n \n svg.append(\"g\")\n .call(yAxisb);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"chart2 = {\n const svg = d3.select(DOM.svg(width, height));\n \n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(barData2)\n .join(\"rect\")\n .attr(\"x\", d => xb(d.year))\n .attr(\"y\", d => yb2(d.value))\n .attr(\"height\", d => yb(0) - yb2(d.value))\n .attr(\"width\", xb.bandwidth());\n \n svg.append(\"g\")\n .call(xAxisb);\n \n svg.append(\"g\")\n .call(yAxisb);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"barData1 = {\n var pd = [];\n for (var i = 0; i < selection.length;++i)\n {\n pd.push(selection[i]['PD'])\n return barGraphData(dict[xaxis], pd )}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"barData2 = {\n var pd = [];\n for (var i = 0; i < selection.length;++i)\n {\n pd.push(selection[i]['PD'])\n return barGraphData(dict[yaxis], pd )}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"xAxisb = g => g\n .attr(\"transform\", `translate(0,${height - padding.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"yAxisb = g => g\n .attr(\"transform\", `translate(${padding.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"width = 700;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"padding = ({top: 20, left: 50, right: 40, bottom: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d[dict[xaxis]])).nice()\n .range([padding.left, width - padding.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"xb = d3.scaleBand()\n .domain(barData1.map(d => d.year))\n .range([padding.left, width - padding.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"yb2 = d3.scaleLinear()\n .domain([0, d3.max(barData2, d => d.value)]).nice()\n .range([height - padding.bottom, padding.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - padding.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - padding.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data[dict[xaxis]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d[dict[yaxis]])).nice()\n .range([height - padding.bottom, padding.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"yb = d3.scaleLinear()\n .domain([0, d3.max(barData1, d => d.value)]).nice()\n .range([height - padding.bottom, padding.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${padding.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data[dict[yaxis]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"function barGraphData(crime,pd) { \n var years = [];\n for (var i = 2003; i <= 2017; i++) {\n years.push(i);\n }\n var totals = [];\n var column = extractColumn(yearly_data,crime);\n\n \n for (var i = 0; i < 15; ++i)\n {\n var s = 0;\n for (var j = 0; j < 10; ++j)\n {\n if (pd.indexOf(yearly_data[10*i+j]['PD']) > -1)\n s+=column[10*i+j]\n }\n totals.push(s)\n }\n \n var arr = [];\n for (var i = 0; i<15; ++i)\n arr.push({year:years[i], value:totals[i]})\n\n return arr;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"function extractColumn(arr, column) {\n\tfunction reduction(previousValue, currentValue) {\n\t\tpreviousValue.push(parseInt(currentValue[column]));\n\t\treturn previousValue;\n\t}\n\n\treturn arr.reduce(reduction, []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"function sum(a) {return a.reduce(function(accumulator, currentValue) {return accumulator + currentValue;})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"function transpose(matrix) {\n return matrix[0].map((col, i) => matrix.map(row => row[i]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"color = d3.scaleOrdinal(d3.schemeCategory10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"dict = ({\n \"STOLEN PROPERTY\" : \"sp\" , \n \"DISORDERLY CONDUCT\": \"dc\" ,\n \"BURGLARY\": \"bg\" ,\n \"DRUG/NARCOTIC\":\"dn\", \n \"VANDALISM\":\"vd\",\n \"TRESPASS\":\"tp\", \n \"WEAPON LAWS\":\"wpn\",\n \"ASSAULT\":\"ass\",\n \"LARCENY/THEFT\":\"lt\",\n \"ROBBERY\":\"rob\",\n \"DRUNKENNESS\":\"drunk\",\n \"PROSTITUTION\":\"prost\",\n \"DRIVING UNDER THE INFLUENCE\":\"dui\",\n \"VEHICLE THEFT\":\"gta\",\n \"TOTAL\":\"TOTAL\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = Object.assign(await d3.csv('https://gist.githubusercontent.com/zeaf/591bd4b6c0c0e4524c44f02fd833759f/raw/ec2df97079d3589bce3ac3cd52f5ea906ceb0a05/data.csv', ({PdDistrict: PD, \"STOLEN PROPERTY\" : sp , \"DISORDERLY CONDUCT\": dc ,BURGLARY: bg ,\"DRUG/NARCOTIC\":dn, VANDALISM:vd,TRESPASS:tp, \"WEAPON LAWS\":wpn,ASSAULT:ass,\"LARCENY/THEFT\":lt,ROBBERY:rob,DRUNKENNESS:drunk,PROSTITUTION:prost,\"DRIVING UNDER THE INFLUENCE\":dui,\"VEHICLE THEFT\":gta,TOTAL:TOTAL}) => ({PD, sp:+sp, dc:+dc, bg:+bg, dn:+dn, vd:+vd, tp:+tp, wpn:+wpn, ass:+ass, lt:+lt, rob:+rob, drunk:+drunk, prost:+prost, dui:+dui, gta:+gta, TOTAL:+TOTAL})), {sp:\"STOLEN PROPERTY\", dc:\"DISORDERLY CONDUCT\",bg:\"BURGLARY\",dn:\"DRUG/NARCOTIC\",vd:\"VANDALISM\",tp:\"TRESPASS\",wpn:\"WEAPON LAWS\",ass:\"ASSAULT\",lt:\"LARCENY/THEFT\",rob:\"ROBBERY\",drunk:\"DRUNKENNESS\",prost:\"PROSTITUTION\",dui:\"DRIVING UNDER THE INFLUENCE\",gta:\"VEHICLE THEFT\",TOTAL:\"TOTAL\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"yearly_data = Object.assign(await d3.csv('https://gist.githubusercontent.com/zeaf/16bcca595ea5fb306ad43901c2aa3de3/raw/ef16a927152a91a91dbba4295c07fdadb88156a4/yearly_data.csv', ({PdDistrict: PD, \"Year\":year, \"STOLEN PROPERTY\" : sp , \"DISORDERLY CONDUCT\": dc ,BURGLARY: bg ,\"DRUG/NARCOTIC\":dn, VANDALISM:vd,TRESPASS:tp, \"WEAPON LAWS\":wpn,ASSAULT:ass,\"LARCENY/THEFT\":lt,ROBBERY:rob,DRUNKENNESS:drunk,PROSTITUTION:prost,\"DRIVING UNDER THE INFLUENCE\":dui,\"VEHICLE THEFT\":gta,TOTAL:TOTAL}) => ({PD, year:year, sp:+sp, dc:+dc, bg:+bg, dn:+dn, vd:+vd, tp:+tp, wpn:+wpn, ass:+ass, lt:+lt, rob:+rob, drunk:+drunk, prost:+prost, dui:+dui, gta:+gta, TOTAL:+TOTAL})), {year:\"YEAR\",sp:\"STOLEN PROPERTY\", dc:\"DISORDERLY CONDUCT\",bg:\"BURGLARY\",dn:\"DRUG/NARCOTIC\",vd:\"VANDALISM\",tp:\"TRESPASS\",wpn:\"WEAPON LAWS\",ass:\"ASSAULT\",lt:\"LARCENY/THEFT\",rob:\"ROBBERY\",drunk:\"DRUNKENNESS\",prost:\"PROSTITUTION\",dui:\"DRIVING UNDER THE INFLUENCE\",gta:\"VEHICLE THEFT\",TOTAL:\"TOTAL\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}