title: Unable to plot scales and axes in scatter plot in google data studio
body: <p>Trying to build scatter plot custom visualization in google data studio. Stuck with creating scales and axes.Help me in creating the scales and axes to the plot.</p>
  
  <p>Please note:- have removed the d3.min.js, dscc.min.js library from the myViz.js file to make it readable</p>
  
  <p>I have created the below files in google cloud platform and have been referring to <a href="http://bl.ocks.org/weiglemc/6185069" rel="nofollow noreferrer">http://bl.ocks.org/weiglemc/6185069</a> for building the scatter plot.</p>
  
  <p>files on the google cloud platform</p>
  
  <p>manifest.json, myViz.css, myViz.json, myViz.js</p>
  
  <p><code>https://imgur.com/fJyh71C</code> (Please refer to the following image on how the graph looks)
  The problem with data studio custom visualization is i am not able to use the tradition d3 code in the file and have to rely on the pure vanilla java script to do the coding.</p>
  
  <p>I have been able to pull the data(Cereal Name, calaories and proteins) from the following file </p>
  
  <p><a href="https://docs.google.com/spreadsheets/d/1daWp7XM7PJbDLjkXxdVAeVtPem6HJfFEIYRSesQKbpI/edit?usp=sharing" rel="nofollow noreferrer">https://docs.google.com/spreadsheets/d/1daWp7XM7PJbDLjkXxdVAeVtPem6HJfFEIYRSesQKbpI/edit?usp=sharing</a></p>
  
  <p>however m not sure how to do the scaling on the chart. The below code helps me in ploting the scale and axes but i will need the vanilla javascript equivalent of the code.</p>
  
  <pre><code>// setup x 
  var xValue = function(d) { return d.Calories;}, // data -&gt; value
      xScale = d3.scale.linear().range([0, width]), // value -&gt; display
      xMap = function(d) { return xScale(xValue(d));}, // data -&gt; display
      xAxis = d3.svg.axis().scale(xScale).orient("bottom");
  
  // setup y
  var yValue = function(d) { return d["Protein (g)"];}, // data -&gt; value
      yScale = d3.scale.linear().range([height, 0]), // value -&gt; display
      yMap = function(d) { return yScale(yValue(d));}, // data -&gt; display
      yAxis = d3.svg.axis().scale(yScale).orient("left");
  </code></pre>
  
  <p>can you guys help in getting the code. iam pasting the working code which reulted in scatter plot as shown in the pic above.</p>
  
  <p>manifest.json</p>
  
  <pre><code>{
    "name": "My Visualizations",
    "organization": "MyOrg",
    "description": "My first visualization package.",
    "logoUrl": "https://logo",
    "organizationUrl": "https://url",
    "supportUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "packageUrl": "https://url",
    "supportUrl": "https://url",
    "devMode": true,
    "components": [
      {
        "name": "myViz",
        "description": "My first Community Visualization",
        "iconUrl": "https://url",
        "resource": {
          "js": "gs://peekri/myViz.js",
          "config": "gs://peekri/myViz.json",
          "css": "gs://peekri/myViz.css"
        }
      }
    ]
  }
  
  myViz.json
  
  
           {
                "data": [
                  {
                    "id": "concepts",
                    "label": "Concepts",
                    "elements": [
                      {
                        "id": "barDimension",
                        "label": "Dimension",
                        "type": "DIMENSION",
                        "options": {
                          "min": 1,
                          "max": 1
                        }
                      },
                      {
                        "id": "barMetric",
                        "label": "Metric",
                        "type": "METRIC",
                        "options": {
                          "min": 1,
                          "max": 2
                        }
                      }
                    ]
                  }
                ],
                "style": [
                  {
                    "id": "color",
                    "label": "Colors",
                    "elements": [
                      {
                        "type": "FONT_COLOR",
                        "id": "barColor",
                        "label": "Bar Color",
                        "defaultValue": "black"
                      }
                    ]
                  }
                ]
              }
  </code></pre>
  
  <p>myViz.css</p>
  
  <pre><code>      #myVizTitle {
            color: black;
            font-size: 24px;
            text-align: center;
            margin: 0 auto;
          }
  
  myViz.js
  
  var titleElement = document.createElement('div');
  titleElement.id = 'myVizTitle';
  document.body.appendChild(titleElement);
  
  function drawViz(data) {
      let rowData = data.tables.DEFAULT;
  
      // set margins + canvas size
      const margin = {
          top: 10,
          bottom: 50,
          right: 10,
          left: 10
      };
      const padding = {
          top: 15,
          bottom: 15
      };
      const height = dscc.getHeight() - margin.top - margin.bottom;
      const width = dscc.getWidth() - margin.left - margin.right;
  
      const fillColor = data.style.barColor.value ?
          data.style.barColor.value.color :
          data.style.barColor.defaultValue;
  
      // remove the svg if it already exists
      if (document.querySelector("svg")) {
          let oldSvg = document.querySelector("svg");
          oldSvg.parentNode.removeChild(oldSvg);
      }
  
      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttribute("height", `${height}px`);
      svg.setAttribute("width", `${width}px`);
  
      const maxBarHeight = height - padding.top - padding.bottom;
      const barWidth = width / (rowData.length * 2);
  
      // obtain the maximum bar metric value for scaling purposes
      let xlargestMetric = 0;
      let ylargestMetric = 0;
  
      rowData.forEach(function(row) {
          xlargestMetric = Math.max(xlargestMetric, row["barMetric"][0]);
      });
  
      rowData.forEach(function(row) {
          ylargestMetric = Math.max(ylargestMetric, row["barMetric"][1]);
      });
  
      console.log(xlargestMetric);
      console.log(ylargestMetric);
  
      rowData.forEach(function(row, i) {
          // 'barDimension' and 'barMetric' come from the id defined in myViz.json
          // 'dimId' is Data Studio's unique field ID, used for the filter interaction
          const barData = {
              dim: row["barDimension"][0],
              met: row["barMetric"][0],
              met2: row["barMetric"][1],
              dimId: data.fields["barDimension"][0].id
          };
  
          /*// calculates the height of the bar using the row value, maximum bar
          // height, and the maximum metric value calculated earlier
          let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
  
          // normalizes the x coordinate of the bar based on the width of the convas
          // and the width of the bar
          let barX = (width / rowData.length) * i + barWidth / 2;*/
  
          // create the "circle"
          let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          circle.setAttribute("r", 3.5);
          circle.setAttribute("cx", barData["met"]);
          circle.setAttribute("cy", barData["met2"]);
          circle.style.fill = fillColor;
  
          /*rect.setAttribute("x", barX);
          rect.setAttribute("y", maxBarHeight - barHeight);
          rect.setAttribute("width", barWidth);
          rect.setAttribute("height", barHeight);
          rect.setAttribute("data", JSON.stringify(barData));
          // use style selector from Data Studio
          rect.style.fill = fillColor;*/
          svg.appendChild(circle);
  
  
          /* // add text labels
           let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
           let textX = barX + barWidth / 2;
           text.setAttribute("x", textX);
           text.setAttribute("text-anchor", "middle");
           let textY = maxBarHeight + padding.top;
           text.setAttribute("y", textY);
           text.setAttribute("fill", fillColor)
           text.innerHTML = barData["dim"];
           svg.appendChild(text);*/
      });
  
      document.body.appendChild(svg);
  }
  
  
  
  
   dscc.subscribeToData(drawViz, {
          transform: dscc.objectTransform
      });
  </code></pre>