集成 d3.js 趋势图（区域 + 线）作为数据工作室社区可视化

Question

我是一名数据科学家。主要使用 python 和 SQL 作为代码。我正在使用数据工作室 visualizations.So 我不熟悉 JS。我知道如何data studio community visualizations works. I want to make this chart(without markers). I follow this。我尝试过但没有成功。有人可以和我一起吗？或向我推荐 d3.js Data Studio 集成资源。

Answer 1

我真的不确定你想要什么但是对于这里没有标记的图表我认为你想要什么：

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>

集成 d3.js 趋势图（区域 + 线）作为数据工作室社区可视化

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

javascript

charts

d3.js

google-data-studio

data-studio-custom-visuals