25:null 26:["$","title",null,{"children":"Elements of Bob Ross' Paintings | mwl2131 | Observable"}] 2b: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(); }2c:T682,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)}); 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]; } 2d:[] 29:{"id":"a4f56208e663f96a","slug":"elements-of-bob-ross-paintings/4","title":"Elements of Bob Ross' Paintings","thumbnail":"ef33e19e0fefc9393910327dc5dc02c2df31a50f6ca83fb05f840df2a67f2b1b","access_level":"public","create_time":"$D2019-10-27T23:42:45.796Z","update_time":"$D2019-10-28T23:37:02.681Z","view_time":null,"first_public_time":"$D2019-10-28T01:06:20.712Z","fork":{"id":"24cbde9006252151","slug":"elements-of-bob-ross-paintings/3","title":"Elements of Bob Ross' Paintings","owner":{"id":"86d7b00509ba10e2","login":"mwl2131","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"86d7b00509ba10e2","login":"mwl2131","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d14c852c6063e633a905d6eeddf8e5e6c8aa79d866dbd4c48c8b25a85dbb3844","tier":"starter_2024"},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"f18475587e072f6f","login":"mwl2131","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d14c852c6063e633a905d6eeddf8e5e6c8aa79d866dbd4c48c8b25a85dbb3844","tier":null}],"members":[{"type":"individual","id":"f18475587e072f6f","login":"mwl2131","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d14c852c6063e633a905d6eeddf8e5e6c8aa79d866dbd4c48c8b25a85dbb3844","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"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":605,"value":"md`Enter up to three features to narrow down the web of elements in Bob Ross' paintings and visualize which appear together! Scroll through episodes with your selected features and find the full list at the bottom of the page.\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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2b","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":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":326,"value":"csv = d3.csv(\"https://raw.githubusercontent.com/pdeshlab/Bob-Ross-Data-Viz/master/Bob%20Ross%20Data.csv\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$2c","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"/*\nTODO - investigate ways of making the variable relationships clearer: could we do the 3D version of this anne laure found? Should we implement the feature that when you hover over a node it darkens all of that node's connections? Should we implement labels of the nodes? Color coding nodes?\n\nThoughts - I think it might be a good idea to add in the extraneous columns we deleted (palm trees for example), because I don't think adding more nodes will hurt the visualization. Also, I think the portrait column should be deleted because it has no connections to any other nodes. \n\n\nlink highlight: \nhttps://stackoverflow.com/questions/41244508/js-d3-js-steps-to-highlighting-of-adjacent-links\n\n\n\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"