table

Author: Theo-Jaunet

assets/css/main.css

@@ -584,7 +584,7 @@ filter: invert(1);
     width: 100%;
     border: solid #555 1px;
     border-radius: 14px;
-    height: 100%;
+    height: 75%;
 }
 
 .fakeGrammarRow {
@@ -1012,4 +1012,11 @@ p, h3, h4, h5, img {
 #composition circle, .markAnchorSvg circle {
     stroke: #000;
     stroke-width: 2px;
+}
+
+#datasetContainer {
+    border-radius: 15px;
+
+    background-color: #FFF;
+    border: solid 1px #424242;
 }

assets/js/datasetStuff.js

@@ -34,14 +34,36 @@ function fillSidePanel() {
 
     }
 
-    const elements =  document.querySelectorAll(".dataRow")
+    const elements = document.querySelectorAll(".dataRow")
 
-    for (let i = 0; i <elements.length; i++) {
+    for (let i = 0; i < elements.length; i++) {
 
 
         dragElement2(elements[i])
     }
 
 
+}
+
+
+function fillTable() {
+    let table = document.getElementById("newDataTable")
+    let tkeys = Object.keys(chartDataset.data[0])
+    let row = document.createElement("tr")
+    for (let i = 0; i < tkeys.length; i++) {
+        row.innerHTML += `<th>${tkeys[i]}</th>`
+
+
+    }
+    table.appendChild(row)
+    for (let i = 0; i < chartDataset.data.length; i++) {
+        let row = document.createElement("tr")
+        for (let j = 0; j < tkeys.length; j++) {
+            row.innerHTML += `<td>${chartDataset.data[i][tkeys[j]]}</td>`
+        }
+        table.appendChild(row)
+
+    }
+
 
 }

assets/js/main.js

@@ -172,7 +172,7 @@ async function init() {
     // drawSvg()
     // tdrawRefactor()
     fillSidePanel()
-
+    fillTable()
     collageColScale = d3.scaleOrdinal(d3.schemeAccent)
     // document.getElementById("jsonLoader").addEventListener("change", importFromJson);
     document.getElementById("imgLoader").addEventListener("change", importImg);

assets/js/newCollage.js

@@ -68,7 +68,9 @@ function addPaletteInfoToCollage(palette, name) {
     drawnMarks[name] = placeMark()
     setMarker()
 
-    svg.append("image")
+    svg.append("g")
+        .attr("id","g-"+name)
+        .append("image")
         .attr("class", "collageElement")
         .style("outline", `${collageColScale(name)} solid 3px`)
         .attr("xlink:href", show.toDataURL("image/png"))

index.html

@@ -253,12 +253,22 @@ <h5>Data Columns</h5>
         </div>
 
         <!--        <div id="fakePreview">-->
-        <div>
+<!--        <div>
             <button style="border: darkred solid 1px" onclick="switchForce()"> Force Layout</button>
             <button  onclick="switchGrid()"> Grid Layout</button>
 
-        </div>
+        </div>-->
         <svg style="background-color:#fff;" id="fakePreviewSvg"></svg>
+
+        <div id="datasetContainer" style="width: 100%">
+            <div id="sandboxControls" style="width: 100%"><h4>Dataset </h4></div>
+
+            <table id="newDataTable">
+<!--                <tr> <th>Id</th><th>Category</th><th>x</th><th>y</th></tr>-->
+            </table>
+
+        </div>
+
         <!--        </div>-->
     </div>
 </div>