2b:null 2c:["$","title",null,{"children":"Elements of Bob Ross' Paintings | pdeshlab | Observable"}] 31:T114f,chart = { const scale = 3 const textOffset = 10 var nm = message; nm = nm.toUpperCase(); var nm2 = message2; nm2 = nm2.toUpperCase(); var nm3 = message3; nm3 = nm3.toUpperCase(); var data = data_gen(csv,[nm, nm2, nm3])[0]; const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); var i; for (i=0; i < nodes.length; i++){ if(nodes[i].__proto__.id == "BARN" || nodes[i].__proto__.id == "BRIDGE" || nodes[i].__proto__.id == "BUILDING" || nodes[i].__proto__.id == "CABIN" || nodes[i].__proto__.id == "DOCK" || nodes[i].__proto__.id == "FARM" || nodes[i].__proto__.id == "LIGHTHOUSE" || nodes[i].__proto__.id == "MILL" || nodes[i].__proto__.id == "STRUCTURE" || nodes[i].__proto__.id == "WINDMILL" || nodes[i].__proto__.id == "FENCE" || nodes[i].__proto__.id == "PATH" || nodes[i].__proto__.id == "FIRE") { nodes[i].__proto__.group = "1";} if(nodes[i].__proto__.id == "PERSON" || nodes[i].__proto__.id == "PORTRAIT"){ nodes[i].__proto__.group = "2";} if(nodes[i].__proto__.id == "CLOUDS" || nodes[i].__proto__.id == "FOG" || nodes[i].__proto__.id == "SNOW"){ nodes[i].__proto__.group = "3";} if(nodes[i].__proto__.id == "BUSHES" || nodes[i].__proto__.id == "CACTUS" || nodes[i].__proto__.id == "FLOWERS" || nodes[i].__proto__.id == "GRASS" || nodes[i].__proto__.id == "TREE" || nodes[i].__proto__.id == "HILLS" || nodes[i].__proto__.id == "MOUNTAIN" || nodes[i].__proto__.id == "RIVER ROCKS" || nodes[i].__proto__.id == "CLIFF" || nodes[i].__proto__.id == "ROCKS"){ nodes[i].__proto__.group = "4";} if(nodes[i].__proto__.id == "BEACH" || nodes[i].__proto__.id == "LAKE" || nodes[i].__proto__.id == "OCEAN" || nodes[i].__proto__.id == "WATERFALL" || nodes[i].__proto__.id == "WAVES" || nodes[i].__proto__.id == "BOAT" || nodes[i].__proto__.id == "RIVER"){ nodes[i].__proto__.group = "5";} if(nodes[i].__proto__.id == "NIGHT" || nodes[i].__proto__.id == "MOON" || nodes[i].__proto__.id == "SUN" || nodes[i].__proto__.id == "AURORA_BOREALIS"){ nodes[i].__proto__.group = "6";} } console.log(nodes); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-800)) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, -40, width, height+20]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", .8) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .selectAll(".node") .data(nodes) .join("g") .attr("class", "node") .call(drag(simulation)); const circle = node.append("circle") .attr("r", 8) .attr("fill", "#000000") .attr("fill", color) .call(drag(simulation)); const text = node.append("text") .text(d => d.id) .attr("font-weight", "bold") .attr("font-family", "Arial") .attr("font-size", "12px") .attr("stroke", "#00000"); /* const episode = node.append("text") .text(JSON.stringify(csv[8])); */ simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); text .attr("x", d => d.x+textOffset) .attr("y", d => d.y); circle .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); //highlights paths node.on("mouseover", function(d) { var thisNode = d.id; d3.selectAll(".circleNode").attr("r", 6); d3.select(this).attr("r", 12); link.attr("opacity", function(d) { return (d.source.id == thisNode || d.target.id == thisNode) ? 1 : 0.4 }) .attr("stroke", function(d) { return (d.source.id == thisNode || d.target.id == thisNode) ? "#FE4527" : "#999" }) .attr("stroke-width", function(d) { return (d.source.id == thisNode || d.target.id == thisNode) ? Math.sqrt(d.value)+1.5 : Math.sqrt(d.value) }); }) .on("mouseout", function(d) { link.attr("opacity", 1) .attr("stroke", "#999") .attr("stroke-width", d => Math.sqrt(d.value)); }); return svg.node(); }32:T692,function data_gen(csv, list){ var node = {}; var links = []; var link = {}; var nodes = []; var csv2 = csv.slice(); var episodelist = []; for (var j = 0; j < list.length; j++) { for (var i = 0; i < csv2.length; i++) { var row = csv2[i]; if (row[list[j]] == "0") { csv2.splice(i,1); i--; } } } for(var i = 0; i < csv2.length; i++) { var row = csv2[i]; episodelist.push({Episode: row.EPISODE, Title: row.TITLE.slice(1, row.TITLE.length-1), Url: row.Image}); for (var key in row) { if (row[key] == "1") { node[key] = 1; for (var k = 0; k < Math.max(nodes.length, 1); k++) { if (nodes.length > 0 && nodes[k].id == key) { break; } else if (k == Math.max(nodes.length, 1) - 1) { nodes.push({id:key, group:1}); } } } } var j1 = 0; for (var key1 in node) { var j2 = 0; for (var key2 in node) { link = {}; if (j1 < j2) { for (var k = 0; k < Math.max(links.length, 1); k++) { if (links.length > 0 && links[k].source == key1 && links[k].target == key2) { links[k].value += .1; break; } else if (k == Math.max(links.length, 1) - 1) { link.source = key1; link.target = key2; link.value = .1; links.push(link); } } } j2++; } j1++; } node = {}; } var data = {nodes: nodes, links: links}; return [data, episodelist]; } 33:T6fa,md`Mary, Anne Laure, and Matt all worked extensively on the d3 code while Pia contributed the least to this section (she had no previous experience with d3). In turn, Pia helped with some d3 and wrote this writeup and conducted all user-testing interviews. The process of brainstorming and ideation was split evenly among all team members. The team faced challenges with node graph readability, signalling to the user that a node and its links were selected, maintaining consistent color-category mappings, and implementing a click selection of the nodes in lieu of a search bar. Users seemed to notice different elements of the design first but all noted that they enjoyed how responsive the node diagram was. They seemed to intuit that to get to a node of interest to examine its links more closely, they would need to click and drag that node or position it in a way that would suit their needs. In essence the node diagram mitigated the gulf of execution and the gulf of evaluation, as users would get instant feedback on their designs. One tester suggested that the conceptual mapping of link stroke weight and the strength of element to element relationship was not clear enough to her. Because of the dataset we used there were some elements which appeared in the same paintings very frequently, which in turn had very thick links. However, comparisons excluding these outliers became harder for users. If the team had another week, we would invest time in mapping line weight to a different scale instead of a pure additive one. We would also create a way for people to select a node by clicking on it and de-select the same node by clicking on it again (signalling the selection with color); this would be more natural than the tiered search bar currently in place. `34:[] 2f:{"id":"ef410ed0c40ed228","slug":"elements-of-bob-ross-paintings","title":"Elements of Bob Ross' Paintings","thumbnail":"b97d0598b4910598662100215304f5421b7e4fdee39b6bce4509996f06e66e52","access_level":"public","create_time":"$D2019-10-29T02:20:55.915Z","update_time":"$D2019-12-06T19:25:58.604Z","view_time":null,"first_public_time":"$D2019-10-29T02:30:23.012Z","fork":{"id":"d3655d7d7601f75f","slug":"elements-of-bob-ross-paintings/5","title":"Elements of Bob Ross' Paintings","owner":{"id":"86d7b00509ba10e2","login":"mwl2131","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"30cb978b7bca5234","login":"pdeshlab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df68225bce3d1c68af97423ac617d34ddf9c418647935d1441bbc0a0b24a5ee2","tier":"starter_2024"},"version":1013,"publish_version":1013,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d9be9f37b296f3b","login":"pdeshlab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df68225bce3d1c68af97423ac617d34ddf9c418647935d1441bbc0a0b24a5ee2","tier":null}],"members":[{"type":"individual","id":"5d9be9f37b296f3b","login":"pdeshlab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df68225bce3d1c68af97423ac617d34ddf9c418647935d1441bbc0a0b24a5ee2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Elements of Bob Ross' Paintings","cells":[{"id":1,"value":"md`# Elements of Bob Ross' Paintings\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"md`This visualization uses data collected by FiveThirtyEight, in which every episode of Bob Ross’ The Joy of Painting is listed with the subject of the painting made and what features are found in it. Our team decided to focus on the relationships between visual elements in Bob Ross’ paintings; enabling the user to answer questions like does a mountain appear in the same painting as an Aurora? If so, in which episode?\n\nEnter up to three features of Bob Ross’ paintings to experience the interconnected web they create, revealing which elements appear together in his work through connected lines. Line thickness reveals how often any given pair of features appear together on Ross’ canvas. The slider allows you to travel through the timeline of episodes that are represented in your web, revealing an image of the episodes painting as you do so! Scroll down to find the full list of applicable episodes.\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"viewof message = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"viewof message2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"viewof message3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof x = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"{ \n var nm = message;\n nm = nm.toUpperCase(); \n var nm2 = message2; \n nm2 = nm2.toUpperCase(); \n var nm3 = message3; \n nm3 = nm3.toUpperCase(); \n \n var episodelist = data_gen(csv,[nm, nm2, nm3])[1];\n var i = Math.min(Math.floor(x*episodelist.length), episodelist.length-1);\n return \"There are \" + episodelist.length + \" episodes to choose from: \\n Episode: \" + episodelist[i].Episode + \", Title: \"+ episodelist[i].Title;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"{\n \n var nm = message;\n nm = nm.toUpperCase(); \n var nm2 = message2; \n nm2 = nm2.toUpperCase(); \n var nm3 = message3; \n nm3 = nm3.toUpperCase(); \n \n var episodelist = data_gen(csv,[nm, nm2, nm3])[1];\n var i = Math.min(Math.floor(x*episodelist.length), episodelist.length-1);\n \n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"{ \n var nm = message;\n nm = nm.toUpperCase(); \n var nm2 = message2; \n nm2 = nm2.toUpperCase(); \n var nm3 = message3; \n nm3 = nm3.toUpperCase(); \n \n var episodelist = data_gen(csv,[nm, nm2, nm3])[1];\n var str = '';\n for (var i = 0; i < episodelist.length; i++) {\n str += \" Episode: \" + episodelist[i].Episode + \", Title: \"+ episodelist[i].Title + \"\\n\" ;\n }\n return \"Here is the full list of \" + episodelist.length + \" episodes to with your selected features: \\n\" + str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"md`Understanding the coloring of each feature: \n\n ${\"brown\"} represents human made features (bridge, mill...)\n\n ${\"cyan\"} represents weather features (fog, snow...)\n\n ${\"blue\"} represents water features (river, waterfall...)\n\n ${\"green\"} represents natural features and plants (tree, mountain...)\n\n ${\"purple\"} represents elements pertaining to time of day(sun, aurora borealis...)\n\n ${\"pink\"} represents people\n\n\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"csv = d3.csv(\"https://raw.githubusercontent.com/ar3607/bobrossdata/master/Bob%20Ross%20Data%20-%20Sheet1(2).csv\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"color = {\n const scale = d3.scaleOrdinal()\n .domain([\"1\", \"2\", \"3\", \"4\", \"5\", \"6\"])\n .range([\"#8A420B\", \"#E23E95\" , \"#36CBAB\", \"#1C8D0B\", \"#2937E2\", \"#9216C7\"]);\n return d => scale(d.__proto__.group);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`WRITE-UP\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`Once the group settled on using the Bob Ross dataset, the concept of a node graph was brought up relatively quickly. Originally, the team played around with the idea of signalling element pervasiveness with the size of the node, but this complicated the graphic and emphasized how dominant trees are in Ross’ pieces. The team also considered including a slider as a means of episode selection, but decided the slider was the best way to peruse through returned episodes.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"md`\n $\"node1\"$ \n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"md`Above: node diagram with inspiration from different template. No labels or color categories.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"md`\n $\"Node2\"$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"md`Above: without color categorizations. No typology of elements.\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"md`\n $\"Node3\"$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"md`Above: a prototype of the final design. Once a node was highlighted, all other links disappeared. The current version signals selection with color instead, so all other links can still be shown to the user.\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"md`\n $\"Node4\"$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"