Scatterplot smaller, card

src/components/scatterplot/scatterplot.js

@@ -69,16 +69,16 @@ class Scatterplot extends React.Component {
       this.props.scatterplotXXaccessor !== prevProps.scatterplotXXaccessor || // was CLU now FTH1 etc
       this.props.scatterplotYYaccessor !== prevProps.scatterplotYYaccessor
     ) {
-      this.drawAxesSVG(this.state.xScale, this.state.yScale);  
+      this.drawAxesSVG(this.state.xScale, this.state.yScale);
     }
-    
+
     if (
-      this.state.xScale && 
+      this.state.xScale &&
       this.state.yScale
     ) {
       drawScatterplotCanvas(
-        this.state.ctx, 
+        this.state.ctx,
-        this.state.xScale, 
+        this.state.xScale,
         this.state.yScale,
         this.props.currentCellSelection,
         this.props.opacityForDeselectedCells,
@@ -106,7 +106,7 @@ class Scatterplot extends React.Component {
           return cell.e[nextProps.expression.data.genes.indexOf(nextProps.scatterplotYYaccessor)]
         }))
         .range([height, 0])
-      
+
       this.setState({
         xScale,
         yScale
@@ -114,7 +114,7 @@ class Scatterplot extends React.Component {
     }
   }
   drawAxesSVG(xScale, yScale) {
-    
+
     this.state.svg.selectAll("*").remove();
 
     // the axes are much cleaner and easier now. No need to rotate and orient the axis, just call axisBottom, axisLeft etc.
@@ -123,7 +123,7 @@ class Scatterplot extends React.Component {
 
     var yAxis = d3.axisLeft()
       .scale(yScale);
-    
+
     // adding axes is also simpler now, just translate x-axis to (0,height) and it's alread defined to be a bottom axis.
     this.state.svg.append('g')
       .attr('transform', 'translate(0,' + height + ')')
@@ -149,21 +149,28 @@ class Scatterplot extends React.Component {
       .attr('text-anchor', 'end')
       .attr('class', 'label')
       .text(this.props.scatterplotXXaccessor);
-        
+
   }
 
   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-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 + margin.bottom - 2 + "px")
+    .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 width = 340;
-export const height = 680 - margin.top - margin.bottom;
+export const height = 340 - margin.top - margin.bottom;
 export const innerHeight = height - 2;
 
 export const devicePixelRatio = window.devicePixelRatio || 1;