Scatterplot smaller, card

src/components/scatterplot/scatterplot.js

@@ -154,16 +154,23 @@ class Scatterplot extends React.Component {
 
   render() {
     return (
-      <div id="scatterplot_wrapper">
+      <div
+        style={{
+          backgroundColor: "white",
+          borderRadius: 3,
+          marginTop: 15,
+          paddingBottom: 20,
+          boxShadow: "3px 4px 13px 0px rgba(201,201,201,1)",
+        }}
+        id="scatterplot_wrapper">
         <div
           className={styles.scatterplot}
           id="scatterplot"
           style={{
             width:  width + margin.left + margin.right + "px",
             height: height + margin.top + margin.bottom + "px",
-            marginBottom: 60
           }}
-        >scatter</div>
+        ></div>
       </div>
     )
   }

src/components/scatterplot/setupScatterplot.js

@@ -23,8 +23,8 @@ const setupScatterplot = (
     .attr("height", height * devicePixelRatio)
     .style("width", width + "px")
     .style("height", height + "px")
-    .style("margin-left", 10 + 3 + "px") /* magic number: this seems to be visually correct when it is equal to the amount axis is translated by plus or minus... a little? */ 
-    .style("margin-top", margin.top + margin.bottom - 2 + "px")
+    .style("margin-left", margin.left + 1 + "px") /* magic number: this seems to be visually correct when it is equal to the amount axis is translated by plus or minus... a little? */
+    .style("margin-top", margin.top + "px")
 
   var ctx = canvas.node().getContext("2d");
       ctx.globalCompositeOperation = 'darken';

src/components/scatterplot/util.js

@@ -1,11 +1,11 @@
 import _ from "lodash";
 
 const paddingRight = 120;
-const continuousChartWidth = 1200;
+const continuousChartWidth = 340;
 
 export const margin = {top: 66, right: 110, bottom: 20, left: 60};
-export const width = continuousChartWidth - margin.left - margin.right - paddingRight;
-export const height = 680 - margin.top - margin.bottom;
+export const width = 340;
+export const height = 340 - margin.top - margin.bottom;
 export const innerHeight = height - 2;
 
 export const devicePixelRatio = window.devicePixelRatio || 1;