27:null 28:["$","title",null,{"children":"Network Graph with filters - the Beatles | Eric Field | Observable"}] 2d:T419,nodesSource = [ {id: "John Lennon", type: "person", category: "member", year_start: 1960, year_end: 1969}, {id: "Paul McCartney", type: "person", category: "member", year_start: 1960, year_end: 1970}, {id: "George Harrison", type: "person", category: "member", year_start: 1960, year_end: 1970}, {id: "Ringo Starr", type: "person", category: "member", year_start: 1962, year_end: 1970}, {id: "Pete Best", type: "person", category: "member", year_start: 1960, year_end: 1962}, {id: "Stuart Sutcliffe", type: "person", category: "member", year_start: 1960, year_end: 1961}, {id: "Guitar", type: "instrument", category: "music", year_start: 1960, year_end: 1970}, {id: "Bass Guitar", type: "instrument", category: "music", year_start: 1960, year_end: 1961}, {id: "Drums", type: "instrument", category: "music", year_start: 1960, year_end: 1970}, {id: "Vocals", type: "instrument", category: "music", year_start: 1960, year_end: 1970}, {id: "Song Writer", type: "instrument", category: "music", year_start: 1960, year_end: 1970}, ]2e:Tae5,linksSource = [ {source: "John Lennon", target: "Paul McCartney", type: "member"}, {source: "John Lennon", target: "George Harrison", type: "member"}, {source: "John Lennon", target: "Ringo Starr", type: "member"}, {source: "Paul McCartney", target: "John Lennon", type: "member"}, {source: "Paul McCartney", target: "George Harrison", type: "member"}, {source: "Paul McCartney", target: "Ringo Starr", type: "member"}, {source: "George Harrison", target: "John Lennon", type: "member"}, {source: "George Harrison", target: "Paul McCartney", type: "member"}, {source: "George Harrison", target: "Ringo Starr", type: "member"}, {source: "Ringo Starr", target: "John Lennon", type: "member"}, {source: "Ringo Starr", target: "Paul McCartney", type: "member"}, {source: "Ringo Starr", target: "George Harrison", type: "member"}, {source: "Pete Best", target: "John Lennon", type: "member"}, {source: "Pete Best", target: "Paul McCartney", type: "member"}, {source: "Pete Best", target: "George Harrison", type: "member"}, {source: "Pete Best", target: "Stuart Sutcliffe", type: "member"}, {source: "John Lennon", target: "Pete Best", type: "member"}, {source: "Paul McCartney", target: "Pete Best", type: "member"}, {source: "George Harrison", target: "Pete Best", type: "member"}, {source: "Stuart Sutcliffe", target: "John Lennon", type: "member"}, {source: "Stuart Sutcliffe", target: "Paul McCartney", type: "member"}, {source: "Stuart Sutcliffe", target: "George Harrison", type: "member"}, {source: "Stuart Sutcliffe", target: "Pete Best", type: "member"}, {source: "John Lennon", target: "Stuart Sutcliffe", type: "member"}, {source: "Paul McCartney", target: "Stuart Sutcliffe", type: "member"}, {source: "George Harrison", target: "Stuart Sutcliffe", type: "member"}, {source: "John Lennon", target: "Guitar", type: "instrument"}, {source: "Paul McCartney", target: "Drums", type: "instrument"}, {source: "George Harrison", target: "Guitar", type: "instrument"}, {source: "Ringo Starr", target: "Drums", type: "instrument"}, {source: "Pete Best", target: "Drums", type: "instrument"}, {source: "Stuart Sutcliffe", target: "Bass Guitar", type: "instrument"}, {source: "John Lennon", target: "Vocals", type: "instrument"}, {source: "Paul McCartney", target: "Vocals", type: "instrument"}, {source: "George Harrison", target: "Vocals", type: "instrument"}, {source: "Ringo Starr", target: "Vocals", type: "instrument"}, {source: "John Lennon", target: "Song Writer", type: "instrument"}, {source: "Paul McCartney", target: "Song Writer", type: "instrument"}, {source: "George Harrison", target: "Song Writer", type: "instrument"}, {source: "Ringo Starr", target: "Song Writer", type: "instrument"}, ]2f:[] 2b:{"id":"965d9b5d631a5e12","slug":null,"title":"Network Graph with filters - the Beatles","thumbnail":"71ede01a8b81ccdf24c0c1bc67b2f4b1ca26f048b440c5d9996f8d046dc8670c","access_level":"public","create_time":"$D2026-04-25T21:50:52.525Z","update_time":"$D2026-05-02T03:03:19.048Z","view_time":null,"first_public_time":"$D2026-04-26T02:38:00.738Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":583,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"},{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a9e9f7027a40da9e","slug":"d3-layout-and-lib-examples","title":"d3 layout and lib examples","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Network Graph with filters - the Beatles","cells":[{"id":0,"value":"# Network Graph with filters - the Beatles\ndemo: network graph where nodes and links come and go on filter change","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"\n\n

\n Category:
\n Band Member
\n Instrument
\n Show All\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svgContainer","database":"$undefined"},{"id":377,"value":"viewof yearSelect = Inputs.range([1960, 1970], {label: \"Year\", step: 1, value: 1960})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"Change the year slider. \nStuart and Pete will drop out, Ringo Starr will add, John Lennon leaves after 1969","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"mutable highlighted = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"### source data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"// nodesSource = FileAttachment(\"nodes.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"// linksSource = FileAttachment(\"links.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"// alternately you could create the nodes list from the unique elements of the links\n// but in this case, you'd lose the extras defined in nodesSource (like year, type, and category)\n\n// nodesSource = nodesFromLinks(linksSource); // uses library function imported below","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"### filter the nodes and links by criteria:\nYour criteria here may be different, and is very much dependent on your data, but you need to come up with some logic to control which nodes and links are shown. In this case, the filter is based on properties of the nodes (year), and then the links are filtered to match based on which nodes are included. You might reverse that and filter on a type or condition of link, then filter the nodes to match. Whichever way, define a logic, and the network graph will follow.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"nodes = nodesSource.filter(d => yearSelect >= d.year_start && yearSelect <= d.year_end)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"links = linksSource.filter(d => nodes.some(node => node.id === d.source) && nodes.some(node => node.id === d.target)).map(d => JSON.parse(JSON.stringify(d))); \n\n// filter linksSource to match where both the link.source AND link.target are found in filtered nodes list\n// deepcopy. Without the .map this will mutate original linksSource array. \n// .filter is a shallowcopy, keeping a reference back to the original\n// .map creates a whole new array using the data, so there is no backreference to mutate the original\n// in this case, the force algorithm changes the structure of the links array, causing this filter to break.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"### draw using my library function:\nThe library function provides the basic network and force layout structure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"netElem = d3.select(svgContainer).select(\"#layer1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"network = dvNetworkGraph(netElem,links,1000,600,options)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"options = ({\n //linkDistance: 300,\n linkDistance: d => d.type == \"member\" ? 100 : 250,\n linkClassField: \"type\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"### overrides for specific symbology:\nThe library function created the core. Now you can override and describe unique characteristics using the returned network object with nodes, links, labels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"network.nodes.filter(d => d.type == \"person\").attr(\"r\",5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"network.links.style(\"stroke-dasharray\", d => d.type == \"member\" ? 0 : 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"### a way to anchor selected node locations if desired:\nUncomment one of these to see what it does. After you uncomment, go move a node or change the year to get it to update to see the result. \nUse this carefully and probably very selectively, but this can be useful.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"{\n // Fix nodes at a location so they don't move\n // network.nodes.filter(d => d.id == \"John Lennon\").each(d => {d.fx = 500; d.fy = 300});\n // network.nodes.filter(d => d.type == \"instrument\").each(d => d.fx = 600); // lock one dimension only\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"### add some visual dynamics:\nadd-ons to highlight different characteristics.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"function highlightPerson(evt,personNode) {\n mutable highlighted = personNode.id; // for debug: track up top the element you're on.\n let dimOpacity = 0.1;\n network.nodes.style(\"opacity\",dimOpacity); // dim all node circles\n d3.select(this).style(\"opacity\",\"1\"); // undim this one\n network.links.style(\"opacity\",dimOpacity).style(\"stroke-width\",\"\");\n network.links.filter(d => d.source.id == personNode.id).style(\"opacity\",\"1\").style(\"stroke-width\",\"2\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"network.nodes.on(\"mouseover\", highlightPerson) // this adds the function to each node","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function showAll() {\n netElem.selectAll(\"path\").style(\"opacity\",\"\").style(\"stroke-width\",\"\");\n netElem.selectAll(\"circle\").style(\"opacity\",\"\").style(\"stroke-width\",\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"function filter(key) {\n netElem.selectAll(\"path\").style(\"opacity\",\"0.1\");\n netElem.selectAll(\".\" + key)\n .style(\"opacity\",\"1\")\n //.style(\"stroke-width\",\"2\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"eventlisteners = {\n // register event listeners\n const btns = d3.select(svgContainer).select(\"#controls\");\n btns.select(\"#member\").on(\"click\", () => filter(\"member\"));\n btns.select(\"#instrument\").on(\"click\", () => filter(\"instrument\"));\n btns.select(\"#all\").on(\"click\", showAll);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"function zoomed({transform}) {netElem.attr(\"transform\", transform).style(\"stroke-width\", 1/transform.k);}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"d3.select(svgContainer).call(d3.zoom()\n .extent([[0,0],[1000,600]])\n .scaleExtent([0.1,20])\n .on(\"zoom\", zoomed));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"### functions to make this work:\nclick on the reference to go see the code if you're interested.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"import {nodesFromLinks, dvNetworkGraph} with {nodes} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"