31:T668,md`# Hvem er manden bag Pernille Skipper? Dette er et eksempel på hvordan man kan strukturere data som en graf for at understøtte informationssøgningsopgaver. Vores udgangspunkt er en artikel fra Jyllands-Posten med et billede af Pernille Skipper og manden som vi prøver at identificere. ![Artikel](https://storage.googleapis.com/big-data-course-datasets/v3/hvem_er_manden_bag.png) Vi kan bruge machine learning til at lede efter billeder med et ansigt der ligner. Eksempelvis har [Openface](https://cmusatyalab.github.io/openface/) en præ-trænet model, som kan bruge til at bestemme ligheden imellem ansigter på billeder. ![Cutout](https://storage.googleapis.com/big-data-course-datasets/v3/1manden_bag_skipper.png) ### Hvor giver det mening at begynde at lede? Oplagte steder inkluderer: - Wikipedia - Nyhedsartikler om samme emner - Sociale medier - Folketingets hjemmeside ![Wikipedia Pernille Skipper](https://storage.googleapis.com/big-data-course-datasets/v3/wikipediaPernilleSkipper.png) ![Folketingets Hjemmeside](https://storage.googleapis.com/big-data-course-datasets/v3/ft.png) For lettere at kunne overskue data strukturerer vi det som en graf, hvor hver knude er et data-objekt, som eksempelvis en wikipediaside, et billede, et folketingsmedlem osv. Forbindelserne imellem disse objekter inkluderer forbindelsen imellem et folketingsmedlem og vedkommendes wikipediaside, et link imellem wikipediasider, et billede fra en side og ikke mindst to billeder af ansigter, som ligner hinanden. Resultatet af denne strukturering er en graf som den nedenfor. Er det blevet lettere at identificere den ukendte mand? `32:T99f,viewof graphChart={ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g"); var zoom_level=1.0; const link = g.append("g") .attr("class", "links") .selectAll("line") .data(dataset.links) .enter().append("line") .attr("stroke", "red") ; function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fy = d.y; d.fx = d.x; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); } function graphChanged() { } const allNodes=g.selectAll(".nodes") .data(dataset.nodes); const enteringNodes=allNodes.enter(); const enteringNodeGs=enteringNodes .append("g") .attr("class", "nodes"); enteringNodeGs.append("circle") .attr("r", 20) .attr("fill", d=> hash_colour(d["type"])) .attr("stroke", "orange") .attr("stroke-width", 0) .on("click", (d, i, l) => { mutable selectedItem=d.id; d3.select(l[i]).attr("stroke-width", 8); }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; const text = enteringNodeGs .append("text") .text(d => d.id) .attr("stroke", "black") .attr("font-size", 10) .attr("text-anchor", "middle"); function ticked() { 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); enteringNodeGs.select("circle").attr("cx", d => d.x) .attr("cy", d => d.y); enteringNodeGs.select("text") .attr("x", d => d.x - 5) .attr("y", d => d.y + 5); } simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); simulation.alphaTarget(0).restart() function zoom_actions(){ g.attr("transform", d3.event.transform) } var zoom_handler = d3.zoom() .on("zoom", () => { zoom_actions(); zoom_level=d3.event.transform.k; g.selectAll("text") .data(dataset.nodes) .attr("visibility", d=> zoom_level>1 ? "visible" : "hidden"); }); zoom_handler(svg); return svg.node() }33:T4b9,html_renderer=function(node) { var s=""; if(node.type=="mp") { s+="

"; s+="Medlem af Folketinget
"+node.name; s+="

"; } else if(node.type=="image") { s+="

"+node.filename+""; if(node.summary) { s+="

"+node.summary+"

"; } } else if(node.type=="article") { if(node.id=="article_manden_bag_skipper") { s+="

Artikel

" } } else { s+="

"+f+": "+node[f]+"

"; } return s; }34:[] 2f:{"title":"Hvem er manden bag Pernille Skipper?","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"{\n var node=dataset.indexed_nodes[selectedItem];\n if(selectedItem !=\"\") {\n return html`${html_renderer(dataset.indexed_nodes[selectedItem])}`\n } else {\n return html``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"mutable selectedItem=\"\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"dataset= manden_bag","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"manden_bag = {\n let data = await d3.json(\"https://gist.githubusercontent.com/andreaskdk/0b6655d9d7b39268479cda8a843348ee/raw/0bd2e450f05db7c2147b4f081a84cfbf58c0efe8/manden_bag_data.json\");\n data.indexed_nodes={};\n for(let i=0; i d.id)) \n .force(\"charge\", d3.forceManyBody().strength(-1000))\n .force(\"center\", d3.forceCenter(width / 2, height / 2));","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({top: 30, right: 80, bottom: 30, left: 30}); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"hash_colour = function(s) {\n const palete=[\"#a6cee3\", \"#1f78b4\", \"#b2df8a\", \"#33a02c\", \"#fb9a99\", \"#e31a1c\", \"#fdbf6f\", \"#ff7f00\", \"#cab2d6\", \"#6a3d9a\", \"#ffff99\", \"#cb4335\", \"#A9DFBF\", \"#D6EAF8\", \"#D5F5E3\"];\n \n if (typeof(s) == 'undefined' || s == null) {\n return palete[0];\n }\n \n if(s.length == 0) {\n return palete[0];\n }\n \n var hash = 0;\n for (var i = 0; i < s.length; i++) {\n var char = s.charCodeAt(i);\n hash = ((hash<<5)-hash)+char;\n hash = hash & hash; \n }\n return palete[Math.abs(hash)%(palete.length-2)];\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}