Integrating d3.js Trend Chart (Area + Line) as data studio community visualisation

Question

I am a data scientist. Mostly use python and SQL for code. I am using data studio for visualizations.So I am unfamiliar to JS. I know-how data studio community visualizations works. I want to make this chart(without markers). I follow this. I tried but didn't get success. Can anybody with me on this? or refer me d3.js data studio integration resources.

Answer 1

I really not sure what you want but for the chart without markers here what I think you want:

function addAxesAndLegend(svg, xAxis, yAxis, margin, chartWidth, chartHeight) {
      var legendWidth = 200,
        legendHeight = 100;

      // clipping to make sure nothing appears behind legend
      svg
        .append("clipPath")
        .attr("id", "axes-clip")
        .append("polygon")
        .attr(
          "points",
          -margin.left +
            "," +
            -margin.top +
            " " +
            (chartWidth - legendWidth - 1) +
            "," +
            -margin.top +
            " " +
            (chartWidth - legendWidth - 1) +
            "," +
            legendHeight +
            " " +
            (chartWidth + margin.right) +
            "," +
            legendHeight +
            " " +
            (chartWidth + margin.right) +
            "," +
            (chartHeight + margin.bottom) +
            " " +
            -margin.left +
            "," +
            (chartHeight + margin.bottom)
        );

      var axes = svg.append("g").attr("clip-path", "url(#axes-clip)");

      axes
        .append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(xAxis);

      axes
        .append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Time (s)");

      var legend = svg
        .append("g")
        .attr("class", "legend")
        .attr("transform", "translate(" + (chartWidth - legendWidth) + ", 0)");

      legend
        .append("rect")
        .attr("class", "legend-bg")
        .attr("width", legendWidth)
        .attr("height", legendHeight);

      legend
        .append("rect")
        .attr("class", "outer")
        .attr("width", 75)
        .attr("height", 20)
        .attr("x", 10)
        .attr("y", 10);

      legend
        .append("text")
        .attr("x", 115)
        .attr("y", 25)
        .text("5% - 95%");

      legend
        .append("rect")
        .attr("class", "inner")
        .attr("width", 75)
        .attr("height", 20)
        .attr("x", 10)
        .attr("y", 40);

      legend
        .append("text")
        .attr("x", 115)
        .attr("y", 55)
        .text("25% - 75%");

      legend
        .append("path")
        .attr("class", "median-line")
        .attr("d", "M10,80L85,80");

      legend
        .append("text")
        .attr("x", 115)
        .attr("y", 85)
        .text("Median");
    }

    function drawPaths(svg, data, x, y) {
      var upperOuterArea = d3.svg
        .area()
        .interpolate("basis")
        .x(function(d) {
          return x(d.date) || 1;
        })
        .y0(function(d) {
          return y(d.pct95);
        })
        .y1(function(d) {
          return y(d.pct75);
        });

      var upperInnerArea = d3.svg
        .area()
        .interpolate("basis")
        .x(function(d) {
          return x(d.date) || 1;
        })
        .y0(function(d) {
          return y(d.pct75);
        })
        .y1(function(d) {
          return y(d.pct50);
        });

      var medianLine = d3.svg
        .line()
        .interpolate("basis")
        .x(function(d) {
          return x(d.date);
        })
        .y(function(d) {
          return y(d.pct50);
        });

      var lowerInnerArea = d3.svg
        .area()
        .interpolate("basis")
        .x(function(d) {
          return x(d.date) || 1;
        })
        .y0(function(d) {
          return y(d.pct50);
        })
        .y1(function(d) {
          return y(d.pct25);
        });

      var lowerOuterArea = d3.svg
        .area()
        .interpolate("basis")
        .x(function(d) {
          return x(d.date) || 1;
        })
        .y0(function(d) {
          return y(d.pct25);
        })
        .y1(function(d) {
          return y(d.pct05);
        });

      svg.datum(data);

      svg
        .append("path")
        .attr("class", "area upper outer")
        .attr("d", upperOuterArea)
        .attr("clip-path", "url(#rect-clip)");

      svg
        .append("path")
        .attr("class", "area lower outer")
        .attr("d", lowerOuterArea)
        .attr("clip-path", "url(#rect-clip)");

      svg
        .append("path")
        .attr("class", "area upper inner")
        .attr("d", upperInnerArea)
        .attr("clip-path", "url(#rect-clip)");

      svg
        .append("path")
        .attr("class", "area lower inner")
        .attr("d", lowerInnerArea)
        .attr("clip-path", "url(#rect-clip)");

      svg
        .append("path")
        .attr("class", "median-line")
        .attr("d", medianLine)
        .attr("clip-path", "url(#rect-clip)");
    }


    function startTransitions(svg, chartWidth, chartHeight, rectClip, x) {
      rectClip
        .transition()
        .duration(4000)
        .attr("width", chartWidth);
    }

    function makeChart(data) {
      var svgWidth = 960,
        svgHeight = 500,
        margin = { top: 20, right: 20, bottom: 40, left: 40 },
        chartWidth = svgWidth - margin.left - margin.right,
        chartHeight = svgHeight - margin.top - margin.bottom;

      var x = d3.time
          .scale()
          .range([0, chartWidth])
          .domain(
            d3.extent(data, function(d) {
              return d.date;
            })
          ),
        y = d3.scale
          .linear()
          .range([chartHeight, 0])
          .domain([
            0,
            d3.max(data, function(d) {
              return d.pct95;
            })
          ]);

      var xAxis = d3.svg
          .axis()
          .scale(x)
          .orient("bottom")
          .innerTickSize(-chartHeight)
          .outerTickSize(0)
          .tickPadding(10),
        yAxis = d3.svg
          .axis()
          .scale(y)
          .orient("left")
          .innerTickSize(-chartWidth)
          .outerTickSize(0)
          .tickPadding(10);

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // clipping to start chart hidden and slide it in later
      var rectClip = svg
        .append("clipPath")
        .attr("id", "rect-clip")
        .append("rect")
        .attr("width", 0)
        .attr("height", chartHeight);

      addAxesAndLegend(svg, xAxis, yAxis, margin, chartWidth, chartHeight);
      drawPaths(svg, data, x, y);
      startTransitions(svg, chartWidth, chartHeight, rectClip, x);
    }

    var parseDate = d3.time.format("%Y-%m-%d").parse;
    d3.json(
      "https://gist.githubusercontent.com/rkirsling/33a9e350516da54a5d4f/raw/100dde6bc011fa2604f2c0fb2c160501e220a201/data.json",
      function(error, rawData) {
        if (error) {
          console.error(error);
          return;
        }

        var data = rawData.map(function(d) {
          return {
            date: parseDate(d.date),
            pct05: d.pct05 / 1000,
            pct25: d.pct25 / 1000,
            pct50: d.pct50 / 1000,
            pct75: d.pct75 / 1000,
            pct95: d.pct95 / 1000
          };
        });

        makeChart(data);
      }
    );

@import url(//fonts.googleapis.com/css?family=Open+Sans:400, 700);

svg {
  font: 14px "Open Sans";
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  fill: #000;
}

.axis .tick line {
  stroke: rgba(0, 0, 0, 0.1);
}

.area {
  stroke-width: 1;
}

.area.outer,
.legend .outer {
  fill: rgba(230, 230, 255, 0.8);
  stroke: rgba(216, 216, 255, 0.8);
}

.area.inner,
.legend .inner {
  fill: rgba(127, 127, 255, 0.8);
  stroke: rgba(96, 96, 255, 0.8);
}

.median-line,
.legend .median-line {
  fill: none;
  stroke: #000;
  stroke-width: 3;
}

.legend .legend-bg {
  fill: rgba(0, 0, 0, 0.5);
  stroke: rgba(0, 0, 0, 0.5);
}

.marker.client .marker-bg,
.marker.client path {
  fill: rgba(255, 127, 0, 0.8);
  stroke: rgba(255, 127, 0, 0.8);
  stroke-width: 3;
}

.marker.server .marker-bg,
.marker.server path {
  fill: rgba(0, 153, 51, 0.8);
  stroke: rgba(0, 153, 51, 0.8);
  stroke-width: 3;
}

.marker path {
  fill: none;
}

.legend text,
.marker text {
  fill: #fff;
  font-weight: bold;
}

.marker text {
  text-anchor: middle;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Trend Chart (Area + Line)</title>
  </head>
  <body>
  </body>
  <script src="http://d3js.org/d3.v3.js"></script>
</html>