31:T6e9,dataZeeschuimer = { let text; try { text = "[" + (await zeeschuimerFile.text()) + "]"; } catch (err) { text = "[]"; } const regex = /\n\{/gi; const jsonText = text.replaceAll(regex, ",{"); let json = JSON.parse(jsonText); return json.map((d) => { const code = "" + d.data.code; const user = "" + d.data.user?.username; const usertags = d.data.usertags?.in.map((dd) => dd.user.username) || []; const timestamp = d.data.caption?.created_at_utc; const date = formatTime(d.data.caption?.created_at_utc + "000"); const caption = d.data.caption ? "" + d.data.caption.text : ""; const hashtags = caption.match(/#(\w+)/g) || []; let mentionedUsersCaption = caption.match(/@(\S+)/g) || []; mentionedUsersCaption = mentionedUsersCaption.map((d) => { d = d.toLowerCase(); d = d.replace("@@@", "@@").replace("@@", "@").replace("@", ""); const terminators2Remove = [ /\.$/, /\,$/, /\)$/, /\($/, /\:$/, /\;$/, /\!$/, /\?$/ ]; terminators2Remove.forEach((term) => (d = d.replace(term, ""))); return d; }); mentionedUsersCaption = [...new Set(mentionedUsersCaption)]; const likes = 0 + d.data.like_count; const comments = d.data.comments?.length; //const location = d.data.location; const locationName = d.data.location?.name; const locationCode = d.data.location?.pk; const lat = d.data.location?.lat; const lng = d.data.location?.lng; return { code, user, date, // timestamp, likes, comments, // location, locationName, lat, lng, usertags, caption, hashtags, mentionedUsersCaption }; }); }32:T5de,dataInstaloader = { let jsons = await Promise.all(instaloaderFiles.map((d) => d.json())); return jsons.map((d) => { const formatTime = d3.timeFormat("%Y-%m-%d"); const caption = d.node.edge_media_to_caption?.edges[0]?.node.text || ""; let hashtags = caption.match(/#(\w+)/g) || []; let mentionedUsersCaption = caption.match(/@(\S+)/g) || []; mentionedUsersCaption = mentionedUsersCaption.map((d) => { d = d.toLowerCase(); d = d.replace("@@@", "@@").replace("@@", "@").replace("@", ""); const terminators2Remove = [ /\.$/, /\,$/, /\)$/, /\($/, /\:$/, /\;$/, /\!$/, /\?$/ ]; terminators2Remove.forEach((term) => (d = d.replace(term, ""))); return d; }); mentionedUsersCaption = [...new Set(mentionedUsersCaption)]; let timestamp = d.node.taken_at_timestamp; let date = timestamp ? formatTime(timestamp + "000") : undefined; return { code: d.node.shortcode, user: d.node.owner.username, date, // timestamp, likes: d.node.edge_media_preview_like.count, comments: d.node.edge_media_to_comment.count, locationName: d.node.location?.name, // lat: "not retrieved by instaloader", // lng: "not retrieved by instaloader", usertags: d.node.edge_media_to_tagged_user.edges.map( (d) => d.node.user.username ), caption, hashtags, mentionedUsersCaption }; }); return []; }33:T44b,viewof filters = guard( // The callback. We pass `template` through to Inputs.form(), but could also // define our own template instead. See "Callback context" in the documentation. ({ template }) => Inputs.form( { dataSource: Inputs.radio( ["dataZeeschuimer", "dataInstaloader", "customData"], { label: "Data to use", value: undefined } ), captionFilter: Inputs.text({ label: "Filter against caption content", placeholder: "Search", value: "" }), sortKey: Inputs.select([undefined, "date", "likes", "comments", "followers"], { value: undefined, label: "Sort by key" }), minValue: Inputs.number({ value: undefined, label: `Min value of selected key` }), slice: Inputs.number({ value: 5000, label: "Take the top N posts" }) }, { template } ), // Options. Here we override the label of the reset button. { resetLabel: "Revert to default" } )34:T62a,getHashtagsNetwork = (data, mapFunction, options = {}) => { const { key, toLowerCase, toRemove, minCount, minWeight } = options; const graph = new Graph({ multi: false, allowSelfLoops: false, type: "undirected" }); data.map(mapFunction).forEach((d) => { if (d?.constructor === Array) { if (toLowerCase) { d = d.map((d) => d.toLowerCase()); } d = [...new Set(d)]; } else { d = []; } const thisNetwork = list2network(d); thisNetwork.nodes.forEach((node) => { graph.updateNode(node.id, (attr) => { return { ...attr, label: node.id, group: "hashtag", count: (attr.count || 0) + 1 }; }); }); thisNetwork.edges.forEach((edge) => { const _update = graph.updateEdge(edge.source, edge.target, (attr) => { return { ...attr, weight: (attr.weight || 0) + 1 }; }); }); }); if (toRemove) { toRemove.split("\n").forEach((id) => { if (graph.hasNode(id)) { graph.dropNode(id); } }); } if (minCount) { graph.forEachNode((node, attributes) => { if (attributes.count < minCount) { graph.dropNode(node); } }); } if (minWeight) { graph.forEachEdge( ( edge, attributes, source, target, sourceAttributes, targetAttributes ) => { if (attributes.weight < minWeight) { graph.dropEdge(edge); } } ); } return graph.export(); }35:T74f,getUsersNetwork = (data, mapFunction, options) => { const { toRemove, minCount, minWeight } = options; const graph = new Graph({ multi: false, allowSelfLoops: false, type: "directed" }); // mapFunction returns array of element as follows {source: id, targets: [id1, id2, id3]} data.map(mapFunction).forEach((d) => { if (d.source && d.targets.length) { graph.updateNode(d.source, (attr) => { return { ...attr, label: d.source, indexOf: accounts.indexOf(d.source), group: accounts.indexOf(d.source) < 0 ? "new account" : "account", count: (attr.count || 0) + 1, followers: 0 }; }); d.targets.forEach((t) => { if (d.source !== t) { graph.updateNode(t, (attr) => { return { ...attr, label: t, indexOf: accounts.indexOf(t), group: accounts.indexOf(t) < 0 ? "new account" : "account", count: (attr.count || 0) + 1 }; }); graph.updateEdge(d.source, t, (attr) => { return { ...attr, weight: (attr.weight || 0) + 1 }; }); } }); } }); if (toRemove) { toRemove.split("\n").forEach((id) => { if (graph.hasNode(id)) { graph.dropNode(id); } }); } if (minCount) { graph.forEachNode((node, attributes) => { if (attributes.count < minCount) { graph.dropNode(node); } }); } if (minWeight) { graph.forEachEdge( ( edge, attributes, source, target, sourceAttributes, targetAttributes ) => { if (attributes.weight < minWeight) { graph.dropEdge(edge); } } ); } return graph.export(); }36:T6df,getUsersHashtagsNetwork = (data, options = {}) => { let { toRemove, toLowerCase, minCount, minWeight } = options; const graph = new Graph({ multi: false, allowSelfLoops: false, type: "directed" }); // mapFunction returns array of element as follows {source: id, targets: [id1, id2, id3]} data.forEach((d) => { let user = d.user; graph.updateNode(user, (attr) => { if (toLowerCase) { user = user.toLowerCase(); } return { ...attr, label: user, group: "account", count: (attr.count || 0) + 1 }; }); d.hashtags.forEach((t) => { let hashtag = t; if (toLowerCase) { hashtag = hashtag.toLowerCase(); } if (user !== hashtag) { graph.updateNode(hashtag, (attr) => { return { ...attr, label: hashtag, group: "hashtag", count: (attr.count || 0) + 1 }; }); graph.updateEdge(user, hashtag, (attr) => { return { ...attr, weight: (attr.weight || 0) + 1 }; }); } }); }); if (toRemove) { toRemove.split("\n").forEach((id) => { if (graph.hasNode(id)) { graph.dropNode(id); } }); } if (minCount) { graph.forEachNode((node, attributes) => { if (attributes.count < minCount) { graph.dropNode(node); } }); } if (minWeight) { graph.forEachEdge( ( edge, attributes, source, target, sourceAttributes, targetAttributes ) => { if (attributes.weight < minWeight) { graph.dropEdge(edge); } } ); } return graph.export(); }37:T77b,getLocationHashtags = (data, options) => { const { toLowerCase, toRemove, minCount, minWeight } = options; const graph = new Graph({ multi: false, allowSelfLoops: false, type: "undirected" }); data .filter((d) => d.locationName && d.hashtags.length) .map((d) => { if (toLowerCase) { d.user = d.user.toLowerCase(); d.locationName = d.locationName.toLowerCase(); d.hashtags = [...new Set(d.hashtags.map((d) => d.toLowerCase()))]; } // let user = d.user; let locationName = d.locationName; graph.updateNode(locationName, (attr) => { return { ...attr, label: locationName, group: "location", count: (attr.count || 0) + 1 }; }); d.hashtags.forEach((t) => { let hashtag = t; if (locationName !== hashtag) { graph.updateNode(hashtag, (attr) => { return { ...attr, label: hashtag, group: "hashtag", count: (attr.count || 0) + 1 }; }); graph.updateEdge(locationName, hashtag, (attr) => { return { ...attr, weight: (attr.weight || 0) + 1 }; }); } }); }); if (toRemove) { toRemove.split("\n").forEach((id) => { if (graph.hasNode(id)) { graph.dropNode(id); } }); } if (minCount) { graph.forEachNode((node, attributes) => { if (attributes.count < minCount) { graph.dropNode(node); } }); } if (minWeight) { graph.forEachEdge( ( edge, attributes, source, target, sourceAttributes, targetAttributes ) => { if (attributes.weight < minWeight) { graph.dropEdge(edge); } } ); } return graph.export(); }38:T1c17,networkGraph = (data, options = {}) => { let { height, type, layoutIterations } = options; if (!height) height = window.screen.availHeight; if (!type) type = "undireceted"; if (!layoutIterations) layoutIterations = 64; // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const nodes = data.nodes.map((d) => ({ id: d.key, ...d.attributes })); const links = data.edges.map((d) => ({ id: d.key, source: d.source, target: d.target, ...d.attributes })); data.spatialized = { links, nodes }; // Specify the color scale. //const color = d3.scaleOrdinal(d3.schemeCategory10); const thickness = d3.scaleLinear( [1, d3.max(links, (d) => d.weight)], [1, 10] ); const label_size = 12; let new_label_size = label_size, label_size_hover = label_size * 1.3; // Create a simulation with several forces. const simulation = d3 .forceSimulation(nodes) .force( "link", d3.forceLink(links).id((d) => d.id) ) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .force( "collision", d3.forceCollide((d) => size(d.count) + 0.5) ) .stop() .tick(layoutIterations); //.on("tick", ticked) //.on("end", () => { label.attr("display", "block"); }); // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, window.screen.availWidth, height]) .style("background-color", "#fafafa"); const g = svg.append("g"); // Add a line for each link, and a circle for each node. const link = g .append("g") .selectAll() .data(links) .join(type === "directed" ? "path" : "line") .attr("fill", "none") .attr("stroke-width", (d) => thickness(d.weight)) .attr("stroke", "#999") .attr("stroke-opacity", 0.25); const node = g .append("g") .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll() .data(nodes) .join("circle") .attr("r", (d) => { d.size = size(d.count); return d.size; }) .attr("fill", (d) => { d.color = color(d.group); return d.color; }) .style("cursor", "pointer") .on("mouseenter", function (event) { const id = event.target.__data__.id; const connected = []; const filteredLinks = links.filter( (e) => e.source.id == id || e.target.id == id ); filteredLinks.forEach((e) => { if (connected.indexOf(e.source) < 0) { connected.push(e.source.id); } if (connected.indexOf(e.target) < 0) { connected.push(e.target.id); } }); node.filter((d) => connected.indexOf(d.id) < 0).attr("fill", "white"); link .attr("stroke-opacity", 0.25) .filter((e) => e.source.id == id || e.target.id == id) .attr("stroke-opacity", 1); label .style("opacity", 0.25) .filter((d) => connected.indexOf(d.id) > -1) .style("opacity", 1) .attr("fill", "#000") .filter((d) => d.id === event.target.__data__.id) .attr("font-weight", "bold") .attr("font-size", label_size_hover) .raise(); }) .on("mouseleave", function (event) { node.attr("fill", (d) => color(d.group)); link.attr("stroke-opacity", 0.25); label .style("opacity", 1) .attr("fill", "#666") .attr("font-weight", "normal") .attr("font-size", new_label_size); }) .on("click", function (event) { const d = event.target.__data__; if (d.group === "post") { window.open(`https://www.instagram.com/p/${d.id}`, "_blank").focus(); } else if (d.group === "account" || d.group === "new account") { window.open(`https://www.instagram.com/${d.id}`, "_blank").focus(); } else if (d.group === "hashtag") { window .open( `https://www.instagram.com/explore/tags/${d.id.replace(/^#/g, "")}`, "_blank" ) .focus(); } }); const label = g .append("g") .selectAll() .data(nodes) .join("text") // .attr("display", "none") .attr("fill", "#666") .attr("font-family", "sans-serif") .attr("font-size", new_label_size) .attr("pointer-events", "none") .attr("text-anchor", "middle") .text((d) => d.label); node.append("title").text((d) => d.id + "-" + d.count); link.append("title").text((d) => d.id + "-" + d.weight); ticked(); // Add a drag behavior. node.call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); // links are drawn as curved paths between nodes, // through the intermediate nodes function positionLink(d) { var offset = 20; var midpoint_x = (d.source.x + d.target.x) / 2; var midpoint_y = (d.source.y + d.target.y) / 2; var dx = d.target.x - d.source.x; var dy = d.target.y - d.source.y; var normalise = Math.sqrt(dx * dx + dy * dy); var offSetX = midpoint_x + offset * (dy / normalise); var offSetY = midpoint_y - offset * (dx / normalise); return ( "M" + d.source.x + "," + d.source.y + "S" + offSetX + "," + offSetY + " " + d.target.x + "," + d.target.y ); } // Set the position attributes of links and nodes each time the simulation ticks. function ticked() { if (type === "directed") { link.attr("d", positionLink); } else { 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); } node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); label.attr("x", (d) => d.x).attr("y", (d) => d.y); } // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); svg.call( d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([0.1, 8]) .on("zoom", zoomed) ); function zoomed({ transform }) { g.attr("transform", transform); new_label_size = label_size / transform.k; label_size_hover = new_label_size * 1.3; label.attr("font-size", new_label_size); } return svg.node(); }39:T64d,getGexfString = (network, options = {}) => { if (!network.spatialized) return; let { multi, allowSelfLoops, type } = options; if (!multi) multi = false; if (!allowSelfLoops) allowSelfLoops = false; if (!type) type = "undirected"; // init Graph object const graph = new Graph({ multi, allowSelfLoops, type }); // load and add nodes network.spatialized.nodes.forEach((n, i) => { const attributes = { label: n.label, x: n.x, y: n.y, size: n.size, color: n.color, count: n.count }; graph.addNode(n.id, attributes); }); network.spatialized.links.forEach((e) => { // const attributes = { ...e }; const attributes = {}; graph.addEdge(e.source.id, e.target.id, attributes); }); const graphGexf = gexf.write(graph, { formatNode: function (key, attributes) { return { label: attributes.label, attributes: { // age: attributes.age, // name: attributes.name }, viz: { // color: "#FF0", x: attributes.x, y: attributes.y, // shape: "circle", size: attributes.size } }; }, formatEdge: function (key, attributes) { return { label: attributes.label, attributes: { // number: attributes.number }, weight: attributes.weight, viz: { color: "#c4c4c4" // x: attributes.x, // y: attributes.y, // shape: "dotted", // thickness: 20 } }; } }); return gexf.write(graph); }3a:T761,// functions that aggregate small networks summming up occurrences of nodes and weight of edges aggregateNetworksOLD = (data, options) => { const { key, toLowerCase, toRemove, minOccurrences, minWeight } = options; let nodes = [], nodesIds = [], edges = [], edgesIds = []; data.forEach((d) => { const thisNetwork = list2network(d[key], { toLowerCase }); thisNetwork.nodes.forEach((node) => { if (nodesIds.indexOf(node.id) < 0) { nodes.push(node); nodesIds.push(node.id); } else { const existingNode = nodes.find((n) => n.id === node.id); existingNode.occurrences++; } }); thisNetwork.edges.forEach((edge) => { if (edgesIds.indexOf(edge.id) < 0) { edges.push(edge); edgesIds.push(edge.id); } else { const existingEdge = edges.find((e) => e.id === edge.id); existingEdge.weight++; } }); }); let networkData = { nodes, edges }; if (toRemove) { if (toRemove.constructor === Array) { toRemove.forEach((id) => (networkData = removeNode(networkData, id))); } else if (typeof toRemove === "string") { networkData = removeNode(networkData, toRemove); } } if (minOccurrences) { const ids2Remove = networkData.nodes .filter((n) => n.occurrences < minOccurrences) .map((n) => n.id); ids2Remove.forEach((id) => (networkData = removeNode(networkData, id))); } if (minWeight) { networkData.edges = networkData.edges.filter((e) => e.weight >= minWeight); let survivedNodesIds = []; networkData.edges.forEach((e) => { survivedNodesIds.push(e.source); survivedNodesIds.push(e.target); }); survivedNodesIds = [...new Set(survivedNodesIds)]; networkData.nodes = networkData.nodes.filter( (e) => survivedNodesIds.indexOf(e.id) > -1 ); } return networkData; }3b:T679,getPostsHashtagsNetwork = (data, options = {}) => { const { minLikes } = options; const nodes = [], nodesIds = [], edges = [], edgesIds = []; if (minLikes) { data = data.filter(d=>d.likes >= minLikes) } data.forEach((d) => { const post = { id: d.code, label: d.user, group: "post", user: d.user, caption: d.caption, date: d.date, // hashtags: d.hashtags, likes: d.likes, comments: d.comments, occurrences: 1 }; if (nodesIds.indexOf(post.id) < 0) { nodesIds.push(post.id); nodes.push(post); if (d.hashtags?.length) { d.hashtags.forEach((h) => { const hashtag = { id: h, label: h, group: "hashtag", occurrences: 1 }; if (nodesIds.indexOf(hashtag.id) < 0) { nodesIds.push(hashtag.id); nodes.push(hashtag); } else { const existingNode = nodes.find((n) => n.id === hashtag.id); existingNode.occurrences++; } const edge = { id: post.id + "-" + hashtag.id, source: post.id, target: hashtag.id, weight: 1 }; if (edgesIds.indexOf(edge.id) < 0) { edgesIds.push(edge.id); edges.push(edge); } else { const existingEdge = edges.find((e) => e.id === edge.id); existingEdge.weight++; } }); } } else { const existingNode = nodes.find((n) => n.id === d.code); existingNode.occurrences++; } }); return { nodes, edges }; }3c:[{"id":"9770ffe9394407821e3f4bb990d5d52712e24d46633f1084f90f8c09edd4cf933824543dcf8a159ac3f0bc8c18db927014056a987feac5ad47c71d2e388b5324","href":"https://static.observableusercontent.com/files/9770ffe9394407821e3f4bb990d5d52712e24d46633f1084f90f8c09edd4cf933824543dcf8a159ac3f0bc8c18db927014056a987feac5ad47c71d2e388b5324","name":"sample-data.ndjson","type":"application/octet-stream","lastModified":1688030759231.074,"size":5075973}] 2f:{"title":"Visualizing Instagram Data","cells":[{"id":0,"value":"# Visualizing Instagram Data\nThis notebook allows to explore data collected from Instagram in form of network graphs:\n- hashtag-hashtag\n- users-users mentions\n- users-hastags\n- location-hashtags\n\nLoad data in one of the following inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"## 🏴‍☠️ Zeeschuimer Data (v1.5.0)\nUpload a ndjson created with Zeeschuimer (a sample is provided in the notebook attachments). Hashtags and mentions are extracted from posts captions and data is converted to a more usable format. ","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"viewof zeeschuimerFile = Inputs.file({label: \"Zeeschuimer JSON-LD\", accept: \".ndjson\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"## 🪓 Instaloader Data (v 4.10)\nUpload one or multiple json files created by Instaloader. Hashtags and mentions are extracted from posts captions and data is converted to a more usable format. ","pinned":false,"hidden":false,"mode":"md"},{"id":2207,"value":"viewof instaloaderFiles = Inputs.file({label: \"Instaloader JSON(s)\", accept: \".json\", multiple: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2557,"value":"## ♻️ Custom Data\n\nUpload custom data with the following structure:\n\n```\n[\n {\n code: \"instagram post code\",\n user: \"user handle (without @)\",\n date: \"YYYY-MM-DD\",\n likes: 99,\n followers: 99,\n comments: 99,\n locationName: \"string or undefined\",\n usertags: [users tagged in the post picture(s)],\n caption: \"string\",\n hashtags: [hashtags are usually colleted from the post caption],\n mentionedUsersCaption: [users mentioned in the post caption]\n },\n {...},\n]\n```\n\n💡 You can download `dataZeeschuimer`, `dataInstaloader` or `data` as JSON files using the native ObservableHQ functions.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2579,"value":"viewof customDataFile = Inputs.file({label: \"Custom Data\", accept: \".json\", multiple: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2581,"value":"customData = {\n if (customDataFile) return customDataFile.json();\n else return [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2554,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2202,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":2511,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2643,"value":"filters","pinned":true,"hidden":false,"mode":"ojs"},{"id":2316,"value":"data = {\n const sources = { dataZeeschuimer, dataInstaloader, customData };\n\n let toReturn = sources[filters.dataSource];\n\n if (filters.captionFilter) {\n toReturn = toReturn.filter((d) =>\n d.caption.includes(filters.captionFilter)\n );\n }\n if (filters.minValue && filters.sortKey) {\n toReturn = toReturn.filter((d) => d[filters.sortKey] >= filters.minValue);\n }\n if (filters.sortKey) {\n toReturn = toReturn.sort((a, b) => {\n if (filters.sortKey === \"date\") {\n const aa = new Date(a[filters.sortKey]);\n const bb = new Date(b[filters.sortKey]);\n return bb - aa;\n }\n return b[filters.sortKey] - a[filters.sortKey];\n });\n }\n if (filters.slice) {\n toReturn = toReturn.slice(0, filters.slice);\n }\n return toReturn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2148,"value":"viewof search = Inputs.search(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2146,"value":"Inputs.table(search, {\n format: {\n code: d=> htl.html`${d}`\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2651,"value":"accounts = [...new Set(data.map(d=>d.user))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"## Network Graphs","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"### Hash-to-Hash\nWhich hashtag occur together in posts captions?","pinned":false,"hidden":false,"mode":"md"},{"id":1130,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1871,"value":"viewof hashtagsNetworkOptions = guard(\n // The callback. We pass `template` through to Inputs.form(), but could also\n // define our own template instead. See \"Callback context\" in the documentation.\n ({ template }) =>\n Inputs.form(\n {\n toRemove: Inputs.textarea({\n label: \"Nodes to remove (one ID each line)\",\n value: \"\"\n }),\n minCount: Inputs.number({ label: \"minCount\", value: 2 }),\n minWeight: Inputs.number({ label: \"minWeight\", value: 0 }),\n toLowerCase: Inputs.toggle({ label: \"toLowerCase\", value: true })\n },\n { template }\n ),\n // Options. Here we override the label of the reset button.\n { resetLabel: \"Revert to default\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2090,"value":"hashtagsNetworkOptions","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"hashtagsNetwork = getHashtagsNetwork(data, (d) => d.hashtags, hashtagsNetworkOptions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"networkGraph(hashtagsNetwork, {\n type: hashtagsNetwork.options.type,\n layoutIterations: 256\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2105,"value":"Export the .gexf file and get a better spatialization in another software (e.g., Gephi)","pinned":false,"hidden":false,"mode":"md"},{"id":2107,"value":"DOM.download(new Blob([getGexfString(hashtagsNetwork, {type: hashtagsNetwork.options.type})], {type: \"application/application/vnd.geometry-explorer\"}), \"hashtagsNetwork.gexf\", \"Download hashtagsNetwork.gexf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"### Users Network\nWho is mentioned by who?","pinned":false,"hidden":false,"mode":"md"},{"id":1355,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"viewof usersNetworkOptions = guard(\n // The callback. We pass `template` through to Inputs.form(), but could also\n // define our own template instead. See \"Callback context\" in the documentation.\n ({ template }) =>\n Inputs.form(\n {\n toRemove: Inputs.textarea({\n label: \"Nodes to remove (one ID each line)\"\n }),\n minCount: Inputs.number({ label: \"minCount\", value: 0 }),\n minWeight: Inputs.number({ label: \"minWeight\", value: 0 }),\n toLowerCase: Inputs.toggle({ label: \"toLowerCase\", value: true })\n },\n { template }\n ),\n // Options. Here we override the label of the reset button.\n { resetLabel: \"Revert to default\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"usersNetwork = getUsersNetwork(\n data,\n (d) => {\n const source = d.user;\n const targets = [...new Set(d.usertags.concat(d.mentionedUsersCaption))];\n return { source, targets };\n },\n usersNetworkOptions\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"networkGraph(usersNetwork, {\n type: usersNetwork.options.type,\n layoutIterations: 1024\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2103,"value":"Export the .gexf file and get a better spatialization in another software (e.g., Gephi)","pinned":false,"hidden":false,"mode":"md"},{"id":884,"value":"DOM.download(new Blob([getGexfString(usersNetwork, {type: usersNetwork.options.type})], {type: \"application/application/vnd.geometry-explorer\"}), \"usersNetwork.gexf\", \"Download usersNetwork.gexf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2113,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"### PostAuthors-Hashtags\nEvery identified post author and all the hashtags used by them in all their posts","pinned":false,"hidden":false,"mode":"md"},{"id":1696,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"viewof usersHashtagsNetworkOptions = guard(\n // The callback. We pass `template` through to Inputs.form(), but could also\n // define our own template instead. See \"Callback context\" in the documentation.\n ({ template }) =>\n Inputs.form(\n {\n toRemove: Inputs.textarea({\n label: \"Nodes to remove (one ID each line)\"\n }),\n minCount: Inputs.number({ label: \"minCount\", value: 0 }),\n minWeight: Inputs.number({ label: \"minWeight\", value: 0 }),\n toLowerCase: Inputs.toggle({ label: \"toLowerCase\", value: true })\n },\n { template }\n ),\n // Options. Here we override the label of the reset button.\n { resetLabel: \"Revert to default\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"usersHashtagsNetwork = getUsersHashtagsNetwork(data, usersHashtagsNetworkOptions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"viz_usersHashtagsNetwork = networkGraph(usersHashtagsNetwork, {\n type: usersHashtagsNetwork.options.type,\n layoutIterations: 256\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2101,"value":"Export the .gexf file and get a better spatialization in another software (e.g., Gephi)","pinned":false,"hidden":false,"mode":"md"},{"id":1690,"value":"DOM.download(new Blob([getGexfString(usersHashtagsNetwork, {type: usersHashtagsNetwork.options.type})], {type: \"application/application/vnd.geometry-explorer\"}), \"usersHashtagsNetwork.gexf\", \"Download usersHashtagsNetwork.gexf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1928,"value":"### Locations-to-Hashtags\nHow are location and hashtags related?","pinned":false,"hidden":false,"mode":"md"},{"id":1931,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"viewof locationHashtagNetworkOptions = guard(\n // The callback. We pass `template` through to Inputs.form(), but could also\n // define our own template instead. See \"Callback context\" in the documentation.\n ({ template }) =>\n Inputs.form(\n {\n toRemove: Inputs.textarea({\n label: \"Nodes to remove (one ID each line)\"\n }),\n minCount: Inputs.number({ label: \"minCount\", value: 0 }),\n minWeight: Inputs.number({ label: \"minWeight\", value: 0 }),\n toLowerCase: Inputs.toggle({ label: \"toLowerCase\", value: true }),\n },\n { template }\n ),\n // Options. Here we override the label of the reset button.\n { resetLabel: \"Revert to default\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1944,"value":"locationHashtagNetwork = getLocationHashtags(data, locationHashtagNetworkOptions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"networkGraph(locationHashtagNetwork, {\n type: locationHashtagNetwork.options.type,\n layoutIterations: 256\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2048,"value":"DOM.download(new Blob([getGexfString(locationHashtagNetwork, {type: locationHashtagNetwork.options.type})], {type: \"application/application/vnd.geometry-explorer\"}), \"locationHashtagNetwork.gexf\", \"Download locationHashtagNetwork.gexf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2118,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1072,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":1820,"value":"size = d3.scaleSqrt([0, 250], [0, 25]).clamp(false);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"color = d3.scaleOrdinal([\"account\", \"hashtag\", \"location\", \"post\", \"new account\"], d3.schemeCategory10);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2391,"value":"formatTime = d3.timeFormat(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1873,"value":"import { guard } from \"@mootari/inputs-submit\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"import {swatches} from \"@d3/color-schemes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2071,"value":"swatches(\"Category10\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"Graph = require(\"graphology\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"list2network = (arr = []) => {\n const nodes = arr.map((d) => ({\n id: d,\n label: d,\n occurrences: 1\n }));\n const edges = [];\n for (let i = 0; i < nodes.length; i++) {\n let ii = i + 1;\n while (ii < nodes.length) {\n edges.push({\n id: nodes[i].id + \"-\" + nodes[ii].id,\n source: nodes[i].id,\n target: nodes[ii].id,\n weight: 1\n });\n ii++;\n }\n }\n return { nodes, edges };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"gexf = require(\"https://bundle.run/graphology-gexf@0.8.1\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"##### Deprecated","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"removeNode = (networkData, id) => {\n const nodes = networkData.nodes.filter((n) => n.id !== id);\n const edges = networkData.edges.filter(\n (e) => e.source !== id && e.target !== id\n );\n return { nodes, edges };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}