New colors + marker on links + svg overlay on samples

Author: Theo-Jaunet

assets/css/main.css

@@ -109,7 +109,7 @@ body {
 
 #selFlat {
     height: 100%;
-    width: 81%;
+    width: calc(100% - 32px);
     display: block;
     /*overflow-x: scroll;*/
     overflow-y: hidden;
@@ -795,6 +795,7 @@ li .fakeGrammarRow {
     border-radius: 5px;
     cursor: grab;
     margin-left:42px ;
+    background-color:#fff;
 
 }
 
@@ -828,25 +829,25 @@ p, h3, h4, h5, img {
     position: absolute;
     width: 15px;
     background-color: #fff;
-    left: -2.7vw;
+    right: -2vw;
     /*height: 99.5vh;*/
     /*top: 0;*/
     height: 34vh;
     top: 30%;
     z-index: 99;
     text-align: center;
     padding: 3px;
-    border-top-right-radius: 25px 25px;
-    border-bottom-right-radius: 25px 25px;;
-    border-right: solid 1px #717171;
+    border-top-left-radius: 25px 25px;
+    border-bottom-left-radius: 25px 25px;;
+    border-left: solid 1px #717171;
 }
 
 
 #sideArrow img {
     width: 20px;
     cursor: pointer;
     height: 20px;
-    margin-top: 7.5px;
+    margin-top: 7px;
     margin-left: -10px;
     transition: 1.15s;
 
@@ -858,10 +859,9 @@ p, h3, h4, h5, img {
     width: 32px;
     height: 35px;
     background-color: inherit;
-    right: -22px;
+    left: -22px;
     border-radius: 5px;
     transition: .5s;
-
 }
 
 
@@ -915,4 +915,8 @@ p, h3, h4, h5, img {
     border-radius: 10px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     padding: 20px;
+}
+
+#svgDisplay image{
+    pointer-events: all;
 }

assets/js/AllPalettes.js

@@ -142,7 +142,7 @@ function openNav() {
     let img = document.getElementById("sideImg");
 
     if (flipSide) {
-        img.style.transform = "";
+        img.style.transform = "scaleX(-1)";
         container.style.width = `${containerWidth}px`
 
         // containerImg.style.right = `${sideOffset}px`
@@ -155,7 +155,8 @@ function openNav() {
             el.style.display = "inline-block";
         })
     } else {
-        img.style.transform = "scaleX(-1)";
+
+        img.style.transform = "";
         container.style.width = `${offsetWidth}px`
         containerImg.style.right = "-22px";
 

assets/js/dragStuff.js

@@ -104,6 +104,8 @@ function dropPalette(e, elmnt) {
         addPaletteInfoToCollage(allPalettes[num],name)
 
 
+
+
         megaGlyph[name] = {
             dataColumn: "",
             size: {
@@ -117,6 +119,8 @@ function dropPalette(e, elmnt) {
         }
         megaGlyph[name].color = makeColorScale(name, "")
         makeMarkTree()
+
+        displayPalette(name)
     }
 }
 

assets/js/main.js

@@ -46,7 +46,7 @@ docReady(init)
 
 
 const dataRef = {
-    giorgia_36: "assets/images/tempLoad/full.json"
+    // giorgia_36: "assets/images/tempLoad/full.json"
 }
 
 

assets/js/newCollage.js

@@ -28,14 +28,45 @@ function placeMark() {
 
 }
 
+function setMarker() {
+    let svg = d3.select("#composition")
+
+    svg.selectAll("defs").remove("*");
+
+    let def = svg.append("defs")
+
+    let marker = def.append("marker")
+        .attr("id", "arrow")
+        .attr("refX", "-0")
+        .attr("refY", "3.5")
+        .attr("markerWidth", "7")
+        .attr("markerHeight", "7")
+        .attr("orient", "mid")
+
+
+    // marker.append("path")
+    //     .attr("d", "M 0 5 L 8 0 L 8 9 z")
+    //     .attr("stroke-width", 3)
+    //     .attr("stroke", "red")
+    //     .attr("fill", "none")
+
+    marker.append("image")
+        .attr("xlink:href", "assets/images/buttons/side.png")
+        .attr("x", "0")
+        .attr("y", "0")
+        .attr("width", "7")
+        .attr("height", "7")
+}
+
+
 function addPaletteInfoToCollage(palette, name) {
 
     let svg = d3.select("#composition")
 
     let show = palette.encodings.range.marks["mark0"].proto.canvas
 
     drawnMarks[name] = placeMark()
-
+    setMarker()
 
     svg.append("image")
         .attr("class", "collageElement")
@@ -96,12 +127,17 @@ function addPaletteInfoToCollage(palette, name) {
                         const cx = (tFrom.x + tTo.x) / 2;
                         const curve = 2;
 
+                        console.log("?????????????????????????????????????????");
+
                         svg.append("path")
                             // .attr("d", `M ${tFrom.x} ${tFrom.y} Q ${cx} ${curve} ${tTo.x} ${tTo.y}`)
                             .attr("d", makeLink(tFrom.x, tFrom.y, tTo.x, tTo.y))
+                            .attr("marker-end", "url(#arrow)")
                             .attr("stroke-width", 3)
                             .attr("stroke", "red")
                             .attr("fill", "none")
+
+
                         // .attr("stroke", drawnMarks[name].x)
 
                         megaPalettes[name].apply = tFrom.name
@@ -159,6 +195,7 @@ function addPaletteInfoToCollage(palette, name) {
             .attr("stroke-width", 3)
             .attr("stroke", "red")
             .attr("fill", "none")
+            .attr("marker-end", "url(#arrow)")
         // .attr("stroke", drawnMarks[name].x)
 
 
@@ -189,7 +226,7 @@ function displayPalette(name) {
 
         const val = parseInt(document.getElementById("strokewidth").value);
         stWidth = val
-        console.log("dsdsadas");
+
     }
 
     document.getElementById('strokecolor').onchange = function () {

assets/js/sandbox.js

@@ -9,7 +9,7 @@ let chartAxis = {
 const defaultMinColor = "#a50026"
 const defaultMaxColor = "#313695"
 
-let useForce = false
+let useForce = true
 let gridMod = false
 
 const datasetList = ["pinguin"]

assets/js/svgHandler.js

@@ -36,7 +36,41 @@ function fillSampleBar(marks) {
 
 
 function fillSvg(marks) {
-    fillSampleBar(marks)
+    // fillSampleBar(marks)
+
+    let svg = d3.select("#sampleDisplay")
+
+    if(marks.length > 0) {
+        svg.style("background-color","rgba(75,75,75,0.5)")
+        svg.style("display","block")
+    }else {
+        svg.style("display","none")
+    }
+
+    const rect = svg.node().getBoundingClientRect()
+
+    const w = rect.width
+    const h = rect.height
+    bounds = [w, h]
+
+    svg.selectAll("image").remove();
+
+    svg.selectAll("dot")
+        .data(marks)
+        .enter()
+        .append("svg:image")
+        .attr("xlink:href", (d) => d.canvas.toDataURL())
+        .attr('num', (d, i) => i)
+        .attr("x", (d) => d.rx * w)
+        .attr("y", (d) => d.ry * h)
+        .attr("width", (d) => d.rWidth * w)
+        .attr("height", (d) => d.rHeight * h)
+        .on("click", (e) => {
+
+            d3.selectAll("image").style("opacity", 1)
+            const el = e.target
+            loadModal(sampleData.find((d) => d === el.__data__))
+        })
 
     /*const tsvg = document.getElementById("inVis")
 
@@ -49,7 +83,7 @@ function fillSvg(marks) {
     svg.style("height", rect.height + "px")
 
 
-    svg.selectAll("image").remove();
+
 
     const w = rect.width
     const h = rect.height