score:1

Accepted answer

your description implies you will always have two charts ("before -> after").

this solution uses svg masks. while it would be doable with more charts, it gets more complicated. you would have to construct the <mask> elements dynamically.

/* original radar chart design created by nadieh bremer - visualcinnamon.com */
        
////////////////////////// data ////////////////////////////// 

var data = [
    [//before - red
    {axis:"first",value:0.49},
    {axis:"banana",value:0.79},
    {axis:"scratch",value:0.70},
    {axis:"wheelie",value:0.09},
    {axis:"pantalon",value:0.37},
    ],[//after - green
    {axis:"first",value:0.64},
    {axis:"banana",value:0.44},
    {axis:"scratch",value:0.37},
    {axis:"wheelie",value:0.84},
    {axis:"pantalon",value:0.81},
    ]
];
      
//////////////////////// setup //////////////////////////////// 

var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 300,
    height = 300;
var color = d3.scale.ordinal().range(["#cc333f","#53e87d"]);
var radarchartoptions = {
    w: width,                //width of the circle
    h: height,                //height of the circle
    margin: margin,         //the margins of the svg
    opacityarea: 0.7,     //the opacity of the area of the blob
    color: color    //color function
};

//////////////////////// radarchart ///////////////////////////
  
radarchart("radarchart", data, radarchartoptions);

function radarchart(id, data, options) {

    var cfg = radarchartoptions;
    var allaxis = (data[0].map(function(i, j){return i.axis})),    //names of each axis
        total = allaxis.length,                                //the number of different axes
        radius = math.min(cfg.w/2, cfg.h/2),           //radius of the outermost circle
        format = d3.format('%'),                          //percentage formatting
        angleslice = math.pi * 2 / total;              //the width in radians of each "slice"
    var rscale = d3.scale.linear()                  //scale for the radius
       .range([0, radius]);
  
    var svg = d3.select('#' + id)     //initiate the radar chart svg
        .attr("width",  cfg.w + cfg.margin.left + cfg.margin.right)
        .attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
        .attr("class", "radar"+id);

    svg.select('#bg').attr('r', radius);

    var dx = cfg.w/2 + cfg.margin.left,
        dy = cfg.h/2 + cfg.margin.top;

    svg.selectall('mask')
        .attr('x', -dx)
        .attr('y', -dy);

    var source = svg.select('#radarsource')
    var wrapper = svg.select('#radarwrapper')
        .attr("transform", "translate(" + dx + "," + dy + ")");

    //the radial line function
    var radarline = d3.svg.line.radial()
        .interpolate("cardinal-closed")
        .radius(function(d) { return rscale(d.value); })
        .angle(function(d,i) {    return i*angleslice; });


    //draw the blobs    
    source.selectall("path")
        .data(data)
        .enter().append("path")
        .attr("id", function(d,i) {return 'area' + i;})
        .attr("d", function(d,i) { return radarline(d); });

    //render and apply masks
    wrapper.selectall("use")
        .data(data)
        .enter().append("use")
        .attr("xlink:href", function(d,i) {return '#area' + i;})
        .attr("mask", function(d,i) {return 'url(#mask' + i + ')';})
        .style("fill", function(d,i) { return cfg.color(i);})
        .style("fill-opacity", cfg.opacityarea);


}//radarchart function
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- radar chart -->
<svg id="radarchart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <circle id="bg" />
    <g id="radarsource" />
    <mask id="mask0" maskunits="userspaceonuse">
      <use xlink:href="#bg" fill="white" />
      <use xlink:href="#area1" fill="black" />
    </mask>
    <mask id="mask1" maskunits="userspaceonuse">
      <use xlink:href="#bg" fill="white" />
      <use xlink:href="#area0" fill="black" />
    </mask>
  </defs>
  <g id="radarwrapper" />
</svg>


Related Query

More Query from same tag