Ploting Scales and Axes using d3.js code in Google Datastudio for scatter plot

Question

Iam trying to setup a scatter plot in google datastudio and the traditional d3.js dont work in google data studio visualization js file. i have been able to get the circles to load however iam struggling with plotting the circles on scales using d3.js code.

How do i use the below d3.js code to work in google data studio

xScale = d3.scale.linear().range([0, width]),
xAxis = d3.svg.axis().scale(xScale).orient("bottom");

I have been able to get the data and plot the circles using the below code, however the scales and axes are missing.

/// create a title element
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]);
  });


  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
    };

    // 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;

    svg.appendChild(circle);
  });

  document.body.appendChild(svg);


}

dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

Answer 1

In the d3 code you provided, you created scales and axes, but the axis function wasn't called. For example:

svg
  .append("g")
    .call(xAxis);

Ref: d3-axis API reference

More broadly - if you want to use d3.js code in Data Studio community visualizations, you need to include the d3.js code in the JavaScript you upload to Data Studio. You can either concatenate the files using a bash script, or use build them using npm. This heatmap uses npm and webpack to include d3.js and use it in the community visualization.