add sample data and d3.js boilerplate

4 years ago · 24f381a9d4
parent a1408d432a
commit 24f381a9d4
6 changed files with 144 additions and 0 deletions
--- a/data/cryo-pump.json
+++ b/data/cryo-pump.json
@ -0,0 +1,13 @@
+{
+    "itemName": "Cryo-Pump",
+    "components": [
+        {
+            "id": "hot-ice",
+            "amount": 1
+        },
+        {
+            "id": "thermic-condensate",
+            "amount": 1
+        }
+    ]
+}
--- a/data/cryogenic-chamber.json
+++ b/data/cryogenic-chamber.json
@ -0,0 +1,13 @@
+{
+    "itemName": "Cryogenic Chamber",
+    "components": [
+        {
+            "id": "living-glass",
+            "amount": 1
+        },
+        {
+            "id": "cryo-pump",
+            "amount": 1
+        }
+    ]
+}
--- a/data/hot-ice.json
+++ b/data/hot-ice.json
@ -0,0 +1,13 @@
+{
+    "itemName": "Hot Ice",
+    "components": [
+        {
+            "id": "enriched-carbon",
+            "amount": 1
+        },
+        {
+            "id": "nitrogen-salt",
+            "amount": 1
+        }
+    ]
+}
--- a/data/living-glass.json
+++ b/data/living-glass.json
@ -0,0 +1,13 @@
+{
+    "itemName": "Living Glass",
+    "components": [
+        {
+            "id": "lubricant",
+            "amount": 1
+        },
+        {
+            "id": "glass",
+            "amount": 5
+        }
+    ]
+}
--- a/data/thermic-condensate.json
+++ b/data/thermic-condensate.json
@ -0,0 +1,13 @@
+{
+    "itemName": "Thermic Condensate",
+    "components": [
+        {
+            "id": "sulphurine",
+            "amount": 250
+        },
+        {
+            "id": "condensed-carbon",
+            "amount": 50
+        }
+    ]
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<!-- Load d3.js -->
+<script src="https://d3js.org/d3.v4.js"></script>
+
+<body>
+<!-- Create a div where the graph will take place -->
+<h2>Cryogenic Chamber</h2>
+<div id="my_dataviz"></div>
+
+<script>
+
+    // set the dimensions and margins of the graph
+    var width = 460
+    var height = 460
+    
+    // append the svg object to the body of the page
+    var svg = d3.select("#my_dataviz")
+      .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+      .append("g")
+        .attr("transform", "translate(40,0)");  // bit of margin on the left = 40
+    
+    // read json data
+    d3.json("data/cryogenic-chamber.json", function(data) {
+    
+      // Create the cluster layout:
+      var cluster = d3.cluster()
+        .size([height, width - 100]);  // 100 is the margin I will have on the right side
+
+      function children(d){
+          return d.children
+          // ???
+      }
+    
+      // Give the data to this cluster layout:
+      var root = d3.hierarchy(data, function(d) {
+          return d.children;
+      });
+      cluster(root);
+    
+    
+      // Add the links between nodes:
+      svg.selectAll('path')
+        .data( root.descendants().slice(1) )
+        .enter()
+        .append('path')
+        .attr("d", function(d) {
+            return "M" + d.y + "," + d.x
+                    + "C" + (d.parent.y + 50) + "," + d.x
+                    + " " + (d.parent.y + 150) + "," + d.parent.x // 50 and 150 are coordinates of inflexion, play with it to change links shape
+                    + " " + d.parent.y + "," + d.parent.x;
+                  })
+        .style("fill", 'none')
+        .attr("stroke", '#ccc')
+    
+    
+      // Add a circle for each node.
+      svg.selectAll("g")
+          .data(root.descendants())
+          .enter()
+          .append("g")
+          .attr("transform", function(d) {
+              return "translate(" + d.y + "," + d.x + ")"
+          })
+          .append("circle")
+            .attr("r", 7)
+            .style("fill", "#69b3a2")
+            .attr("stroke", "black")
+            .style("stroke-width", 2)
+    
+    })
+    
+    </script>
+
+</body>
+</html>