element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 17)//+ d.runtime/20 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.runtime/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + ": " + d.label + " - " + d.group +", runtime:"+ d.runtime+ "min"); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.label); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). 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("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } //drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); legend_g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g.append("text") .attr("x", 10) .attr("y", 5) .text(d => d); //drawing the second legend const legend_g2 = svg.append("g") //.attr("transform", (d, i) => `translate(${width},${i * 20})`); .attr("transform", `translate(${width}, 120)`); legend_g2.append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 0) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", 15) .style("fill", "black") legend_g2.append("text") .attr("x",15) .attr("y",0) .text("long runtime"); legend_g2.append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 20) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", 2) .style("fill", "black") legend_g2.append("text") .attr("x",15) .attr("y",20) .text("short runtime"); return div }36:[] 31:{"id":"fb099164447b7a37","slug":"twelve-links-of-causes-and-conditions","title":"Twelve Links Of Causes and Conditions","thumbnail":"45eecb5d890977037805443f6f234f39a8259c2bb5220318ce9a0373ba59057f","access_level":"public","create_time":"$D2020-02-11T05:59:29.721Z","update_time":"$D2020-02-12T02:35:04.406Z","view_time":null,"first_public_time":"$D2020-02-11T06:54:39.885Z","has_unpublished_edits":null,"fork":{"id":"3be2b020673c6c71","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":2,"starred":false,"owner":{"type":"team","id":"8b31cd29cbaba14d","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":"starter_2024"},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7770cd334a447f3","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":null}],"members":[{"type":"individual","id":"b7770cd334a447f3","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Twelve Links Of Causes and Conditions","cells":[{"id":0,"value":"md`# Twelve Links Of Causes and Conditions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`\n> In the teachings of the four noble truths, the Buddha taught, \"Know the truth of suffering and abandon the truth of the source of suffering.\" Two different minds are doing this. Likewise he says, \"Actualize the truth of cessation, and cultivate the truth of the path.\" In the context of the four noble truths, each of these is a separate event. In tantra, immutable bliss recognizes suffering, abandons the source of suffering, actualizes the cessation of suffering, and practices the path to the cessation of suffering all at once. Therefore it is said to be a Dharma of insperable method and wisdom.[Transcending Time](https://www.amazon.com/dp/B00CGNRMJ6/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md` \n> External time is the sun moving through the twelve houses, while internal time is the cause-and-effect phenomena of the twelve links of dependent origination. In their purified form these become the vajra holder Kalacakra, the main deity of the mandala. [Ornament of Stainless Light](https://www.amazon.com/dp/B01AGOWASE/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"colorScale = d3.scaleOrdinal(d3.schemeBlues[9]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink() // This force provides links between nodes\n .id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance(120)\n ) \n .force(\"charge\", d3.forceManyBody().strength(-700)) // This adds repulsion (if it's negative) between nodes. \n .force(\"center\", d3.forceCenter(width / 2, height / 2)); // This force attracts nodes to the center of the svg area","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 800 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n<style> \n\n .links { \n stroke: #999; \n stroke-opacity: 0.6; \n stroke-width: 1px; \n }\n\n text {\n pointer-events: none;\n fill: #000;\n font: 10px sans-serif;\n }\n\n svg{\n border:1px solid #000;\n }\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = 890 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>

2d:null 2e:["$","title",null,{"children":"Twelve Links Of Causes and Conditions | johann bestowrous | Observable"}] 33:T434,md` > The way these effects are produced from these causes is as follows. Because of ignorance, virtuous and nonvirtuous compositional karma is accumulated. [307] This compositional karma, which is capable of creating the links from consciousness to feeling through the process of impelling,226 plants seeds on the mindstream. These seeds, nourished by the link of grasping and then by the link of taking, both of which have the nature of attachment, grow in strength and form the link of becoming, which has the capacity to create a future birth. From the link of becoming comes the link of consciousness that has just linked to a mother’s womb. From consciousness arises name and form, the six sources, contact, and feeling, all arising from preceding links. The moment of the consciousness linking to a mother’s womb is known as birth, and the process of moving from name and form to feeling is labeled aging. Death is posited as the cessation of life. [Ornament of Stainless Light](https://www.amazon.com/dp/B01AGOWASE/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) `34:T4cc,md` > The Tibetan wheel of existence depicts how individuals fare in steering the destiny of their lives through the cycle of existence. Reflecting the Buddhist concept of cosmic flux, the chart shows the uninterrupted continuity of an individual’s stream-consciousness and the evolutionary process of the cosmos. The first to the third links in the chain refer to the past life, the fourth to the eleventh appertain to the present, while the twelfth – death – is linked to the next life. The reversal of this process is the mastering of the path of liberation. > There is a direct corelationship between the chain of the twelve links and the four noble truths representing the basic doctrine of Buddha. The first and second noble truths, i.e., the noble truths of sufffering and of the cause of sufffering, are embodied in the twelve links of the wheel, whereas the third noble truth – the noble truth of eliminating sufffering and its cause – means achieving nirṿ̄a or permanent peace. The fourth noble truth – the noble truth of the path of the Dharma – is inherent in the reversal of the chain. [Mahamudra: The Moonlight](https://www.amazon.com/dp/B00HT53JJI/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) `35:T2463,myChart={ const div = html`

`; const svg = d3.select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg.append('defs').append('marker') .attr("id",'arrowhead') .attr('viewBox','-0 -5 10 10') //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr('refX',23) // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr('refY',0) .attr('orient','auto') .attr('markerWidth',13) .attr('markerHeight',13) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); //create some data const dataset = { nodes: [ {id: 1, name: 'AGGR', label: "Ignorance about one's own identity", group: 'cause', runtime: 20}, {id: 2, name: 'ASMT', label: 'Karma Formation or Psychic Generation', group: 'cause', runtime: 60}, {id: 3, name: 'CALC', label: 'Consciousness', group: 'effect', runtime: 30}, {id: 4, name: 'DEMO', label: 'Psychosomatic Form or Embryo of Life', group: 'effect', runtime: 40}, {id: 5, name: 'ELIG', label: 'Six Sense Fields or Impressions', group: 'effect', runtime: 20}, {id: 6, name: 'GOAL', label: 'Feeling or Contact With Sense Impressions', group: 'effect', runtime: 60}, {id: 7, name: 'GROW', label: 'Sensory Stimuli To Arise', group: 'cause', runtime: 60}, {id: 8, name: 'LINK', label: 'Craving For Sensory or Sensual Enjoyments', group: 'effect', runtime: 100}, {id: 9, name: 'MOSL', label: 'Clinging to Life', group: 'cause', runtime: 80}, {id: 10, name: 'MOTP', label: 'Coming Into Being', group: 'cause', runtime: 20}, {id: 11, name: 'REPT', label: 'Rebirth', group: 'effect', runtime: 240}, {id: 12, name: 'SEDD', label: 'Decay and Death, Maturity and Destruction', group: 'effect', runtime: 30}, ], links: [ {source: 1, target: 2, type: 'gives rise to'}, {source: 2, target: 3, type: 'which activates'}, {source: 3, target: 4, type: 'brings forth'}, {source: 4, target: 5, type: 'in turn leads to'}, {source: 5, target: 6, type: 'which arouse'}, {source: 6, target: 7, type: 'causing'}, {source: 7, target: 8, type: 'resulting in'}, {source: 8, target: 9, type: 'inevitably turns into'}, {source: 9, target: 10, type: 'completing process of'}, {source: 10, target: 11, type: 'which is'}, {source: 11, target: 12, type: 'inevitably leads to'}, {source: 12, target: 1, type: 'yo momma'} // {source: 2, target: 1, type: 'arises from'}, // {source: 3, target: 2, type: 'activated by'}, // {source: 4, target: 3, type: 'brought forth by'}, // {source: 5, target: 4, type: 'led from'}, // {source: 6, target: 5, type: 'aroused by'}, // {source: 7, target: 6, type: 'caused'}, // {source: 8, target: 7, type: 'resulted from'}, // {source: 9, target: 8, type: 'out from'}, // {source: 10, target: 9, type: '???'}, // {source: 11, target: 10, type: '???'}, // {source: 12, target: 11, type: 'led from'} ] }; console.log("dataset is ...",dataset); // Initialize the links const link = svg.selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr('marker-end','url(#arrowhead)') //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. //The element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(dataset.links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); edgelabels.append('textPath') //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.type); // Initialize the nodes const node = svg.selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .call(d3.drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node.append("circle") .attr("r", d=> 17)//+ d.runtime/20 ) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", d => d.runtime/10) .style("fill", d => colorScale(d.group)) node.append("title") .text(d => d.id + ": " + d.label + " - " + d.group +", runtime:"+ d.runtime+ "min"); node.append("text") .attr("dy", 4) .attr("dx", -15) .text(d => d.label); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) .on("tick", ticked); simulation.force("link") .links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). 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("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart();//sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } //drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); legend_g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g.append("text") .attr("x", 10) .attr("y", 5) .text(d => d); //drawing the second legend const legend_g2 = svg.append("g") //.attr("transform", (d, i) => `translate(${width},${i * 20})`); .attr("transform", `translate(${width}, 120)`); legend_g2.append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 0) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", 15) .style("fill", "black") legend_g2.append("text") .attr("x",15) .attr("y",0) .text("long runtime"); legend_g2.append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 20) .style("stroke", "grey") .style("stroke-opacity",0.3) .style("stroke-width", 2) .style("fill", "black") legend_g2.append("text") .attr("x",15) .attr("y",20) .text("short runtime"); return div }36:[] 31:{"id":"fb099164447b7a37","slug":"twelve-links-of-causes-and-conditions","title":"Twelve Links Of Causes and Conditions","thumbnail":"45eecb5d890977037805443f6f234f39a8259c2bb5220318ce9a0373ba59057f","access_level":"public","create_time":"$D2020-02-11T05:59:29.721Z","update_time":"$D2020-02-12T02:35:04.406Z","view_time":null,"first_public_time":"$D2020-02-11T06:54:39.885Z","has_unpublished_edits":null,"fork":{"id":"3be2b020673c6c71","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":2,"starred":false,"owner":{"type":"team","id":"8b31cd29cbaba14d","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":"starter_2024"},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7770cd334a447f3","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":null}],"members":[{"type":"individual","id":"b7770cd334a447f3","login":"jobez","name":"johann bestowrous","avatar_url":"https://avatars-next.observableusercontent.com/b48b8c80d8cadf6858967bd7738ad2a8b0a8188e270549243617694a16a113e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Twelve Links Of Causes and Conditions","cells":[{"id":0,"value":"md`# Twelve Links Of Causes and Conditions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`\n> In the teachings of the four noble truths, the Buddha taught, \"Know the truth of suffering and abandon the truth of the source of suffering.\" Two different minds are doing this. Likewise he says, \"Actualize the truth of cessation, and cultivate the truth of the path.\" In the context of the four noble truths, each of these is a separate event. In tantra, immutable bliss recognizes suffering, abandons the source of suffering, actualizes the cessation of suffering, and practices the path to the cessation of suffering all at once. Therefore it is said to be a Dharma of insperable method and wisdom.[Transcending Time](https://www.amazon.com/dp/B00CGNRMJ6/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md` \n> External time is the sun moving through the twelve houses, while internal time is the cause-and-effect phenomena of the twelve links of dependent origination. In their purified form these become the vajra holder Kalacakra, the main deity of the mandala. [Ornament of Stainless Light](https://www.amazon.com/dp/B01AGOWASE/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"colorScale = d3.scaleOrdinal(d3.schemeBlues[9]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink() // This force provides links between nodes\n .id(d => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance(120)\n ) \n .force(\"charge\", d3.forceManyBody().strength(-700)) // This adds repulsion (if it's negative) between nodes. \n .force(\"center\", d3.forceCenter(width / 2, height / 2)); // This force attracts nodes to the center of the svg area","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 800 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n<style> \n\n .links { \n stroke: #999; \n stroke-opacity: 0.6; \n stroke-width: 1px; \n }\n\n text {\n pointer-events: none;\n fill: #000;\n font: 10px sans-serif;\n }\n\n svg{\n border:1px solid #000;\n }\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = 890 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body" </article></body></html>