Sefika/continual-relation-extraction
0
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width" />6 <title>My static Space</title>7 <link rel="stylesheet" href="style.css" />8 </head>9<style>10.node {11 cursor: pointer;12}13.node circle {14 fill: #fff;15 stroke: steelblue;16 stroke-width: 2.0px;17}18.node text {19 font: 12px sans-serif;20}21.link {22 fill: none;23 stroke: #ccc;24 stroke-width: 2.0px;25}26</style>27 28<body>29<!--<script src="https://cdnjs.cloudtaxonomy.com/ajax/libs/d3/3.4.5/d3.min.js" integrity="sha512-ixqLAANjnCFERy/YNIycwzbDuk3tEWaVOwepwCh65GKbt+GgnCV/dO1ne+OZXwif8q/j79PKb8RGdNu27055HA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->30<!--<script src="//d3js.org/d3.v3.min.js"></script>-->31<script src="https://d3js.org/d3.v3.min.js"></script>32<script>33var margin = {top: 20, right: 120, bottom: 20, left: 120},34 width = 960 - margin.right - margin.left,35 height = 800 - margin.top - margin.bottom;36var i = 0,37 duration = 750,38 root;39var tree = d3.layout.tree()40 .size([height, width]);41var diagonal = d3.svg.diagonal()42 .projection(function(d) { return [d.y, d.x]; });43var svg = d3.select("body").append("svg")44 .attr("width", width + margin.right + margin.left)45 .attr("height", height + margin.top + margin.bottom)46 .append("g")47 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");48d3.json("https://huggingface.co/datasets/Sefika/continual-re-survey-taxonomy/raw/main/continual-re-taxonomy.json", function(error, taxonomy) {49 if (error) throw error;50 root = taxonomy;51 root.x0 = height / 2;52 root.y0 = 0;53 function collapse(d) {54 if (d.children) {55 d._children = d.children;56 d._children.forEach(collapse);57 d.children = null;58 }59 }60 root.children.forEach(collapse);61 update(root);62});63d3.select(self.frameElement).style("height", "800px");64function update(source) {65 // Compute the new tree layout.66 var nodes = tree.nodes(root).reverse(),67 links = tree.links(nodes);68 // Normalize for fixed-depth.69 nodes.forEach(function(d) { d.y = d.depth * 180; });70 // Update the nodes…71 var node = svg.selectAll("g.node")72 .data(nodes, function(d) { return d.id || (d.id = ++i); });73 // Enter any new nodes at the parent's previous position.74 var nodeEnter = node.enter().append("g")75 .attr("class", "node")76 .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })77 .on("click", click);78 nodeEnter.append("circle")79 .attr("r", 1e-6)80 .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });81 nodeEnter.append("text")82 .attr("x", function(d) { return d.children || d._children ? -10 : 10; })83 .attr("dy", ".35em")84 .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })85 .text(function(d) { return d.name; })86 .style("fill-opacity", 1e-6);87 // Transition nodes to their new position.88 var nodeUpdate = node.transition()89 .duration(duration)90 .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });91 nodeUpdate.select("circle")92 .attr("r", 4.5)93 .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });94 nodeUpdate.select("text")95 .style("fill-opacity", 1);96 // Transition exiting nodes to the parent's new position.97 var nodeExit = node.exit().transition()98 .duration(duration)99 .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })100 .remove();101 nodeExit.select("circle")102 .attr("r", 1e-6);103 nodeExit.select("text")104 .style("fill-opacity", 1e-6);105 // Update the links…106 var link = svg.selectAll("path.link")107 .data(links, function(d) { return d.target.id; });108 // Enter any new links at the parent's previous position.109 link.enter().insert("path", "g")110 .attr("class", "link")111 .attr("d", function(d) {112 var o = {x: source.x0, y: source.y0};113 return diagonal({source: o, target: o});114 });115 // Transition links to their new position.116 link.transition()117 .duration(duration)118 .attr("d", diagonal);119 // Transition exiting nodes to the parent's new position.120 link.exit().transition()121 .duration(duration)122 .attr("d", function(d) {123 var o = {x: source.x, y: source.y};124 return diagonal({source: o, target: o});125 })126 .remove();127 // Stash the old positions for transition.128 nodes.forEach(function(d) {129 d.x0 = d.x;130 d.y0 = d.y;131 });132}133// Toggle children on click.134function click(d) {135 if (d.children) {136 d._children = d.children;137 d.children = null;138 } else {139 d.children = d._children;140 d._children = null;141 }142 update(d);143}144</script>145 146 </body>147</html>