summaryrefslogtreecommitdiff
path: root/recommend/templates/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'recommend/templates/index.html')
-rw-r--r--recommend/templates/index.html123
1 files changed, 0 insertions, 123 deletions
diff --git a/recommend/templates/index.html b/recommend/templates/index.html
deleted file mode 100644
index b54901e..0000000
--- a/recommend/templates/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- </head>
- <body>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
- <script src="http://d3js.org/d3.v3.min.js"></script>
- <script type="text/javascript">
- treeData = {
- name: "",
- children: []
- };
-
- function deeper(route) {
- $.getJSON("/api/builds" + route, (data) => {
- let path = route.split("/");
- let traverse = (obj, pp) => {
- o = obj;
- pp.forEach((p) => p != ""?
- o = o.children.filter((n) => p == n.name)[0]
- : null)
- return o;
- };
- traverse(treeData, path).children = data
- .filter((d) => d.probability > 0.01)
- .map((d) => {
- return {
- name: d.name,
- probability: d.probability,
- children: [],
- path: route + "/" + d.name
- };
- });
- update(root);
- });
- }
- deeper("");
-
- let width = 1500,
- height = 800;
- let i = 0, duration = 300;
-
- let tree = d3.layout.tree()
- .size([width, height]);
- let diagonal = d3.svg.diagonal()
- .projection((d) => [d.x, d.y]);
- let svg = d3.select("body").append("svg")
- .attr("width", width)
- .attr("height", height)
- .append("g");
-
- let root = treeData;
- root.x0 = 0;
- root.y0 = width/2;
-
- function update(source) {
- let nodes = tree.nodes(root).reverse(),
- links = tree.links(nodes);
-
- let node = svg.selectAll("g.node")
- .data(nodes, (d) => d.id || (d.id = ++i));
-
- let nodeEnter = node.enter().append("g")
- .attr("class", "node")
- .attr("transform", (d) => `translate(${source.x0}, ${source.y0})`)
- .on("click", click);
- nodeEnter.append("text")
- .attr("dy", ".35em")
- .text((d) => d.name)
- .style("fill-opacity", 1e-6);
- nodeEnter.append("image")
- .attr("xlink:href", (d) => `/assets/${d.name.replace(/ /g, "-").toLowerCase()}.png`)
- .attr("x", -16)
- .attr("y", -16)
- .attr("width", 32)
- .attr("height", 32);
- let nodeUpdate = node.transition()
- .duration(duration)
- .attr("transform", (d) => `translate(${d.x}, ${d.y})`);
- nodeUpdate.select("circle")
- .attr("r", 10);
- nodeUpdate.select("text")
- .style("fill-opacity", 1);
- let nodeExit = node.exit().transition()
- .duration(duration)
- .attr("transform", (d) => `translate(${source.x}, ${source.y})`)
- .remove();
-
- let link = svg.selectAll("path.link")
- .data(links, (d) => d.target.id);
-
- link.enter().insert("path", "g")
- .attr("class", "link")
- .attr("d", (d) => {
- let o = {x: source.x0, y: source.y0};
- return diagonal({source: o, target: o});
- });
-
- link.transition()
- .duration(duration)
- .attr("d", diagonal);
-
- link.exit().transition()
- .duration(duration)
- .attr("d", (d) => {
- var o = {x: source.x, y: source.y};
- return diagonal({source: o, target: o});
- })
- .remove();
-
- nodes.forEach((d) => {
- d.x0 = d.x;
- d.y0 = d.y;
- });
- }
-
- function click(d) {
- deeper(d.path);
- update(d);
- }
- </script>
- </body>
-</html>