D3 Examples - Popping Effect

Popping Effect

This example shows a "popping effect" from having a semi-transparent fill color and an opaque stroke. This can be achieved using a little-known CSS keyword currentColor, which uses the value from the color attribute on visual marks. This is a convenient way to compute the data-driven color once, but use it as both the fill and stroke color of marks.

Another advantage of this technique is that you can see where there are overlapping circles (which would occlude each other if marks were opaque).

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <style>
      
      .mark {
        fill: currentColor;
        stroke: currentColor;
        fill-opacity: 0.3;
      }
​
    </style>
  </head>
  <body>
    <script>
    
      var outerWidth = 960,
          outerHeight = 500,
          margin = { left: -174, top: 10, right: 26, bottom: -236 },
          rMin = 2, // "r" stands for radius
          rMax = 33,
          strokeWeight = 0.1,
          xColumn = "sepal_length",
          yColumn = "petal_length",
          rColumn = "sepal_width",
          colorColumn = "species";
​
      var innerWidth  = outerWidth  - margin.left - margin.right,
          innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var svg = d3.select("body").append("svg")
            .attr("width", outerWidth)
            .attr("height", outerHeight),
          g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
      var xScale = d3.scaleLinear().range([0, innerWidth]),
          yScale = d3.scaleLinear().range([innerHeight, 0]),
          rScale = d3.scaleLinear().range([rMin, rMax]),
          colorScale = d3.scaleOrdinal().range(d3.schemeDark2);
​
      var xAxis = d3.axisBottom()
                .scale(xScale),
          yAxis = d3.axisLeft()
                .scale(yScale)
            .ticks(5);
​
      function render(data){
        
        xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
        rScale.domain(d3.extent(data, function (d){ return d[rColumn]; }));
​
        var circles = g.selectAll("circle")
            .data(data);
        circles.exit().remove();
        circles.enter()
          .append("circle")
            .attr("class", "mark")
          .merge(circles)
            .attr("cx", function (d){ return xScale(d[xColumn]); })
            .attr("cy", function (d){ return yScale(d[yColumn]); })
            .attr("r",  function (d){ return rScale(d[rColumn]); })
            .attr("stroke-width", function (d){
              return rScale(d[rColumn]) * strokeWeight;
            })
            .attr("color", function (d){ return colorScale(d[colorColumn]); });
      }
​
      function type(d){
        d.sepal_length = +d.sepal_length;
        d.sepal_width  = +d.sepal_width;
        d.petal_length = +d.petal_length;
        d.petal_width  = +d.petal_width;
        return d;
      }
​
      d3.csv("iris.csv", type, render);
​
    </script>
  </body>
</html>
​
    