25:["$","title",null,{"children":"Force Directed Graph Learning | Raef Kazi | Observable"}] 49:T12bd,custom_data = { const data = {"nodes": [{"id":"bank","group":1,"topic_id":"","depth":1},{"id":"monetary_banks_inflation_exchange rate","group":2,"topic_id":2,"depth":2},{"id":"fdi_wto_exports_international trade","group":2,"topic_id":"85","depth":3},{"id":"equilibrium_consumers_oligopoly_pricing","group":2,"topic_id":"422","depth":3},{"id":"house prices_housing market_real estate_markets","group":2,"topic_id":"1766","depth":3},{"id":"unemployment_wages_labour_employment","group":2,"topic_id":"174","depth":3},{"id":"federal reserve_federal_86_considers hr","group":3,"topic_id":1202,"depth":2},{"id":"committee serial_considers legislation_86 hr_legislation","group":3,"topic_id":"187","depth":3},{"id":"hr_considers hr_89 hr_veterans","group":3,"topic_id":"95","depth":3},{"id":"merchant_merchant marine_considers legislation_maritime","group":3,"topic_id":"621","depth":3},{"id":"postal_postmaster_postage_post office","group":3,"topic_id":"298","depth":3},{"id":"microfinance_loans_loan_lending","group":4,"topic_id":971,"depth":2},{"id":"welfare_income_happiness_families","group":4,"topic_id":"389","depth":3},{"id":"aid_foreign aid_development aid_poverty reduction","group":4,"topic_id":"577","depth":3},{"id":"consumer credit_credit card_credit cards_use credit","group":5,"topic_id":1193,"depth":2},{"id":"colleges_higher education_community college_community colleges","group":5,"topic_id":"52","depth":3},{"id":"coins_coin_coinage_mint","group":6,"topic_id":792,"depth":2},{"id":"roman_rome_ancient rome_roman empire","group":6,"topic_id":"329","depth":3},{"id":"tricks_magic tricks_magician_magicians","group":6,"topic_id":"654","depth":3},{"id":"counterinsurgency_insurgency_insurgent_guerrilla","group":6,"topic_id":"886","depth":3},{"id":"socrates_platos_plato_athens","group":6,"topic_id":"264","depth":3},],"links": [{"source":"bank","target":"monetary_banks_inflation_exchange rate","value":0.6747748197},{"source":"monetary_banks_inflation_exchange rate","target":"fdi_wto_exports_international trade","value":0.3237589249},{"source":"monetary_banks_inflation_exchange rate","target":"equilibrium_consumers_oligopoly_pricing","value":0.3006481831},{"source":"monetary_banks_inflation_exchange rate","target":"house prices_housing market_real estate_markets","value":0.2913668729},{"source":"monetary_banks_inflation_exchange rate","target":"unemployment_wages_labour_employment","value":0.2707405309},{"source":"bank","target":"federal reserve_federal_86_considers hr","value":0.6712628771},{"source":"federal reserve_federal_86_considers hr","target":"committee serial_considers legislation_86 hr_legislation","value":0.4884781328},{"source":"federal reserve_federal_86_considers hr","target":"hr_considers hr_89 hr_veterans","value":0.4574255291},{"source":"federal reserve_federal_86_considers hr","target":"merchant_merchant marine_considers legislation_maritime","value":0.4169654177},{"source":"federal reserve_federal_86_considers hr","target":"postal_postmaster_postage_post office","value":0.2030670373},{"source":"bank","target":"microfinance_loans_loan_lending","value":0.6333893144},{"source":"microfinance_loans_loan_lending","target":"monetary_banks_inflation_exchange rate","value":0.183873828},{"source":"microfinance_loans_loan_lending","target":"welfare_income_happiness_families","value":0.1059418888},{"source":"microfinance_loans_loan_lending","target":"aid_foreign aid_development aid_poverty reduction","value":0.1036388589},{"source":"microfinance_loans_loan_lending","target":"consumer credit_credit card_credit cards_use credit","value":0.1026026146},{"source":"bank","target":"consumer credit_credit card_credit cards_use credit","value":0.6058267774},{"source":"consumer credit_credit card_credit cards_use credit","target":"federal reserve_federal_86_considers hr","value":0.1707621074},{"source":"consumer credit_credit card_credit cards_use credit","target":"monetary_banks_inflation_exchange rate","value":0.1344281994},{"source":"consumer credit_credit card_credit cards_use credit","target":"microfinance_loans_loan_lending","value":0.1026026146},{"source":"consumer credit_credit card_credit cards_use credit","target":"colleges_higher education_community college_community colleges","value":0.0873401131},{"source":"bank","target":"coins_coin_coinage_mint","value":0.5801416196},{"source":"coins_coin_coinage_mint","target":"roman_rome_ancient rome_roman empire","value":0.1208108881},{"source":"coins_coin_coinage_mint","target":"tricks_magic tricks_magician_magicians","value":0.1047321886},{"source":"coins_coin_coinage_mint","target":"counterinsurgency_insurgency_insurgent_guerrilla","value":0.0821916838},{"source":"coins_coin_coinage_mint","target":"socrates_platos_plato_athens","value":0.0729759914}]} return data }4a:T1699,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph function ForceGraph({ nodes, // an iterable of node objects (typically [{id}, …]) links // an iterable of link objects (typically [{source, target}, …]) }, { nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 1.5, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 5, // node radius, in pixels nodeStrength, linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkStroke = "#999", // link stroke color linkStrokeOpacity = 0.6, // link stroke opacity linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 640, // outer width, in pixels height = 400, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); const node = svg.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .selectAll("circle") .data(nodes) .join("circle") .attr("r", nodeRadius) //.attr("r", d => nodeRadius*d.depth) .on('mouseover', mouseover) .on('mousemove', mousemove) .on('mouseout', mouseout) .call(drag(simulation)); if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } 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); node .attr("cx", d => d.x) .attr("cy", d => d.y); } function mouseover(e, d) { tooltip .style("top", e.pageY - 10 + "px") .style("left", e.pageX + 10 + "px") .classed("appear", true) .text(e.id); d3.select(e.target).attr('opacity', 0.7); } function mousemove(e, d) { tooltip .style("top", e.pageY - 10 + "px") .style("left", e.pageX + 10 + "px") .classed("appear", true); } function mouseout(e, d, x) { tooltip.classed("appear", false); d3.select(e.target).attr('opacity', 1); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } return Object.assign(svg.node(), {scales: {color}}); }4b:T1e09,cc_data = { const data = { "nodes": [ { "id": "climate change", "group": 1, "topic_id": "", "depth": 1 }, { "id": "climate_climate change_crop_climatic", "group": 2, "topic_id": 1771, "depth": 2, }, { "id": "soil_fertilizer_soils_nitrogen", "group": 2, "topic_id": "186", "depth": 3, }, { "id": "corn_maize_crops_pasture", "group": 2, "topic_id": "1725", "depth": 3, }, { "id": "environmental_environmental education_climate change_emissions", "group": 3, "topic_id": 33, "depth": 2, }, { "id": "sustainability_sustainable development_sustainable_campus", "group": 3, "topic_id": "1530", "depth": 3, }, { "id": "energy conservation_energy efficiency_renewable energy_energy use", "group": 3, "topic_id": "68", "depth": 3, }, { "id": "water resources_water management_river basin_water sanitation", "group": 3, "topic_id": "100", "depth": 3, }, { "id": "weather bureau_air weather service_weather service_weather forecasting", "group": 4, "topic_id": 487, "depth": 2, }, { "id": "weather information_weather data_characteristics computer_program multiple", "group": 4, "topic_id": "1361", "depth": 3, }, { "id": "psychrometric_surface weather_means standard deviations_weather observations", "group": 4, "topic_id": "526", "depth": 3, }, { "id": "ozone_atmospheric_clouds_aerosols", "group": 4, "topic_id": "78", "depth": 3, }, { "id": "school climate_organizational climate_principals_improving school", "group": 5, "topic_id": 1905, "depth": 2, }, { "id": "principals_school principals_instructional leadership_superintendents", "group": 5, "topic_id": "350", "depth": 3, }, { "id": "teacher education_teacher evaluation_inservice education_teacher education programs", "group": 5, "topic_id": "277", "depth": 3, }, { "id": "rainfall_precipitation_entire united states_planned series", "group": 6, "topic_id": 1146, "depth": 2, }, { "id": "rainfall_radar data_thunderstorms_storms", "group": 6, "topic_id": "1451", "depth": 3, }, { "id": "eddy_currents_gulf stream_sea surface", "group": 6, "topic_id": "183", "depth": 3, }, ], "links": [ { "source": "climate change", "target": "climate_climate change_crop_climatic", "value": 0.8462514459, }, { "source": "climate_climate change_crop_climatic", "target": "environmental_environmental education_climate change_emissions", "value": 0.3067757117, }, { "source": "climate_climate change_crop_climatic", "target": "soil_fertilizer_soils_nitrogen", "value": 0.1999789869, }, { "source": "climate_climate change_crop_climatic", "target": "school climate_organizational climate_principals_improving school", "value": 0.1759687749, }, { "source": "climate_climate change_crop_climatic", "target": "corn_maize_crops_pasture", "value": 0.1699283422, }, { "source": "climate change", "target": "environmental_environmental education_climate change_emissions", "value": 0.6609487624, }, { "source": "environmental_environmental education_climate change_emissions", "target": "sustainability_sustainable development_sustainable_campus", "value": 0.3486793401, }, { "source": "environmental_environmental education_climate change_emissions", "target": "climate_climate change_crop_climatic", "value": 0.3067757117, }, { "source": "environmental_environmental education_climate change_emissions", "target": "energy conservation_energy efficiency_renewable energy_energy use", "value": 0.2742219706, }, { "source": "environmental_environmental education_climate change_emissions", "target": "water resources_water management_river basin_water sanitation", "value": 0.2645703325, }, { "source": "climate change", "target": "weather bureau_air weather service_weather service_weather forecasting", "value": 0.5341299844, }, { "source": "weather bureau_air weather service_weather service_weather forecasting", "target": "weather information_weather data_characteristics computer_program multiple", "value": 0.5489218455, }, { "source": "weather bureau_air weather service_weather service_weather forecasting", "target": "psychrometric_surface weather_means standard deviations_weather observations", "value": 0.2131160778, }, { "source": "weather bureau_air weather service_weather service_weather forecasting", "target": "ozone_atmospheric_clouds_aerosols", "value": 0.2016042034, }, { "source": "weather bureau_air weather service_weather service_weather forecasting", "target": "rainfall_radar data_thunderstorms_storms", "value": 0.1894703169, }, { "source": "climate change", "target": "school climate_organizational climate_principals_improving school", "value": 0.519400362, }, { "source": "school climate_organizational climate_principals_improving school", "target": "principals_school principals_instructional leadership_superintendents", "value": 0.2330366564, }, { "source": "school climate_organizational climate_principals_improving school", "target": "climate_climate change_crop_climatic", "value": 0.1759687749, }, { "source": "school climate_organizational climate_principals_improving school", "target": "environmental_environmental education_climate change_emissions", "value": 0.1611552631, }, { "source": "school climate_organizational climate_principals_improving school", "target": "teacher education_teacher evaluation_inservice education_teacher education programs", "value": 0.1356031178, }, { "source": "climate change", "target": "rainfall_precipitation_entire united states_planned series", "value": 0.5125172245, }, { "source": "rainfall_precipitation_entire united states_planned series", "target": "rainfall_radar data_thunderstorms_storms", "value": 0.2974798645, }, { "source": "rainfall_precipitation_entire united states_planned series", "target": "climate_climate change_crop_climatic", "value": 0.1571775076, }, { "source": "rainfall_precipitation_entire united states_planned series", "target": "ozone_atmospheric_clouds_aerosols", "value": 0.1570396648, }, { "source": "rainfall_precipitation_entire united states_planned series", "target": "eddy_currents_gulf stream_sea surface", "value": 0.1364293107, }, ], } return data }4c:T98d,function force_directed_graph(data) { const width = 700 const height = 500 //const links = dataset_exp4.links.map(d => Object.create(d)); //const nodes = dataset_exp4.nodes.map(d => Object.create(d)); const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(d => (1 - d.value)*70)) //.force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(function (d, i) { var a = i == 0 ? -100 : -200; //var a = i == i.value*1000; return a; }).distanceMin(200).distanceMax(1000)) .force("collision", d3.forceCollide(d => d.degree + 2)) ; const svg = d3 .create("svg") .attr("height", height) .attr("width", width); const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => d.value*7) //Getting the "value" parameter from links to define width of the link .on("mouseover", tooltip_links) // when the mouse hovers a node, call the tooltip_in function to create the tooltip .on("mouseout", tooltip_link_out) // when the mouse stops hovering a node, call the tooltip_out function to get rid of the tooltip ; const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => (4 - d.depth)*5) //Since the innermost depth is 1, and we want it to be the biggest, we subtract it from the arbitrary value of 5 (since max depth would be 3) .attr("fill", color_scale) .on("mouseover", tooltip_nodes) // when the mouse hovers a node, call the tooltip_in function to create the tooltip .on("mouseout", tooltip_node_out) // when the mouse stops hovering a node, call the tooltip_out function to get rid of the tooltip .call(dragging(simulation)) ; 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); node.attr("cx", d => d.x).attr("cy", d => d.y); }); //return svg.node(); return Object.assign(svg.node(), {scales: {color_scale}}); }4d:T437,//name a tooltip_in function to call when the mouse hovers a node (renamed for nodes) tooltip_nodes = function(event, d) { // pass event and d to this function so that it can access d for our data //return tooltip_2 d3.select(this) .attr("stroke-width", 2) .attr("stroke", "black"); //Adds a black stroke around the node return tooltip_2 .html("

" + d.id + "

") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "

" + d.name + "

" + d.type + "

" + "Strength of the link is:"+ d.value + "

") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "

" + d.name + "

" + d.type + "

" Note the quote marks, pluses and
--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px"); // position the tooltip just to the right of the mouse location }4f:[{"id":"ac14018f2a656f4b2b9c67adf4f705898bb87419346e6dbed81b6f3d14a0997c263cf6b37e19d92f6342036b90f9b460b3add1b1c12f7cd6cf314aa7fdca070d","href":"https://static.observableusercontent.com/files/ac14018f2a656f4b2b9c67adf4f705898bb87419346e6dbed81b6f3d14a0997c263cf6b37e19d92f6342036b90f9b460b3add1b1c12f7cd6cf314aa7fdca070d","name":"mouse_force_directed@3.json","type":"application/json","lastModified":1683192851362.898,"size":6602},{"id":"c06f6cd5b9899836628ea818e18d477ce199e04fb31ecb1f36e370aeeaa4f5d1f468746f4801486faad12ac339aa14b769ce872b0a1b5347f25e1322c98b7dab","href":"https://static.observableusercontent.com/files/c06f6cd5b9899836628ea818e18d477ce199e04fb31ecb1f36e370aeeaa4f5d1f468746f4801486faad12ac339aa14b769ce872b0a1b5347f25e1322c98b7dab","name":"mouse_force_directed_exp5@2.json","type":"application/json","lastModified":1683193027813.605,"size":6450}] 29:{"id":"6d3ec78094240e6d","slug":null,"title":"Force Directed Graph Learning","thumbnail":"0aa188fbbba7e2fe4dbe0bf7c80c7ea7b76ff26f5bb429783282b53752a5c325","access_level":"public","create_time":"$D2023-04-29T16:40:27.267Z","update_time":"$D2023-05-18T10:17:52.311Z","view_time":null,"first_public_time":"$D2023-04-29T16:40:27.267Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"07179e6e66389643","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":990,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force Directed Graph Learning","cells":[{"id":761,"value":"# Force Directed Graph Learning","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"dataset_exp4 = FileAttachment(\"mouse_force_directed@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"dataset_exp5 = FileAttachment(\"mouse_force_directed_exp5@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"# Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"## Using ForceGraph method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"Legend(chart.scales.color, {title: \"Senses\"}) // try also Swatches","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"chart = ForceGraph(dataset_exp4, {\n nodeId: d => d.id,\n nodeGroup: d => d.group,\n nodeTitle: d => d.id,\n nodeRadius: 10,\n linkSource: d => d.source,\n linkTarget: d => d.target,\n linkStrokeWidth: d => d.value*5,\n width\n //invalidation // a promise to stop the simulation when the cell is re-run\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"tooltip = {\n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\");\n return tooltip;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"## Using custom method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"[Link](https://observablehq.com/@mkane2/force-directed-graph-with-tooltip)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"dataset_exp4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"In the example below, we represent different senses of a search term using a force-directed graph. Each sense of a word generated by the topic model is shown by a different colour. \n- The node at the centre is the search term, and each colour group represents a different sense, with the link width corresponding to the similarity level between the term and its sense\n- The nodes connected to each main sense represent the topics most similar to it (with the link width again corresponding to the similarity level)\n- Hovering over the nodes shows its label, and hovering over the links shows the similarity level","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":854,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"### Model exp_4\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"legend_exp4 = {\n\nvar uniqueSources = [...new Set(dataset_exp4.links.map(link => link.source))]\n \nreturn Swatches(d3.scaleOrdinal(uniqueSources, d3.schemeCategory10))\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"exp4_chart = force_directed_graph(dataset_exp4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"### Model exp_5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"legend_exp5 = {\n\nvar uniqueSources = [...new Set(dataset_exp5.links.map(link => link.source))]\n \nreturn Swatches(d3.scaleOrdinal(uniqueSources, d3.schemeCategory10))\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"exp5_chart = force_directed_graph(dataset_exp5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"With this visualization I wanted to see the most similar topics for a search term along with their similarities, but also how connected those similar topics are to each other, by showing their own most similar topics, and whether any they are connected to each other or not. The node sizes change depending on their depth to keep the most relevant ones the biggest","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"From above 2 pictures, we can see the similarities, but how can we show the differences? i.e., the difference in senses that is shown, and the nearby topics for each sense, without just inspecting the label texts?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":928,"value":"### Search term 'bank' (model: exp4)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":920,"value":"legend_custom = {\n\nvar uniqueSources = [...new Set(custom_data.links.map(link => link.source))]\n \nreturn Swatches(d3.scaleOrdinal(uniqueSources, d3.schemeCategory10))\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"force_directed_graph(custom_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"### Search term 'climate change' (model: exp4)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":937,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"legend_cc = {\n\nvar uniqueSources = [...new Set(cc_data.links.map(link => link.source))]\n \nreturn Swatches(d3.scaleOrdinal(uniqueSources, d3.schemeCategory10))\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"force_directed_graph(cc_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":752,"value":"### Force-Directed Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"// Handle dragging\ndragging = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n \n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n \n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"### Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"// name a variable tooltip, and style it using css properties\ntooltip_2 = d3\n .select(\"body\")\n .append(\"div\") // the tooltip always \"exists\" as its own html div, even when not visible\n .style(\"position\", \"absolute\") // the absolute position is necessary so that we can manually define its position later\n .style(\"visibility\", \"hidden\") // hide it from default at the start so it only appears on hover\n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"temp_func = \n function (event, d) {\n d3.select(this)\n .attr(\"stroke-width\", 2)\n .attr(\"stroke\", \"black\");\n d3.select(this)\n .attr(\"title\", d => \"Node \" + d.id + \"\\nDegree: \" + d.degree);\n tooltip_2\n .html(\"

\" + d.id + \"

\") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: \"

\" + d.name + \"

\" + d.type + \"

\" Note the quote marks, pluses and
--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here\n .style(\"visibility\", \"visible\") // make the tooltip visible on hover\n .style(\"top\", event.pageY + \"px\") // position the tooltip with its top at the same pixel location as the mouse on the screen\n .style(\"left\", event.pageX + \"px\"); // position the tooltip just to the right of the mouse location\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_node_out = function() {\n d3.select(this).attr(\"stroke-width\", 1.5).attr(\"stroke\", \"#fff\");\n d3.select(this).attr(\"title\", null); //removes the black stroke\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_link_out = function() {\n d3.select(this).attr(\"stroke\", \"#999\")\n .attr(\"stroke-opacity\", 0.6);\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"// this is some optional tooltip styling to make it look nice. This just uses regular css\nhtml`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"//Define the color scale\ncolor_scale = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"d3Legend = require('d3-svg-legend')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null