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>
Source: stackoverflow.com
Related Query
- Make overlapping d3.js radar chart elements transparent
- chart.js: How do I make the radar chart axis labels bigger?
- How can I make two of my lines in Chart JS thicker
- Can't make chart js responsive
- How can I make a stepline or stepped chart in chart.js or D3?
- Overlapping Bar Chart using Chart.js
- Is it possible to produce circular (round) shaped radar chart in Chart.js?
- Make pie chart smaller Chart JS
- Angular-chart.js - Make line chart does not curve
- Chart.js - Add text/label to bubble chart elements without using tooltips?
- Chartjs - show elements in all datasets on hover using bar chart
- ChartJS Radar Chart radar lines color?
- how to make a chart.js bar chart scrollable
- Charts.js tooltip overlapping text on chart
- Change labels colors for radar chart js
- Chart.js Radar Chart How to Remove Outer Labels
- how to programmatically make a line chart point active/highlighted
- impossible to remove scale from radar chart (chart.js)
- Chart.js Radar chart legend label font size doesn't work
- Remove radar chart labels in chart.js
- ChartJS V3 Radar chart Label Font Size
- Chart.js different scaleLine color of radar chart (angular)
- How to make Chart JS responsive?
- Make months on x-axis clickable on chart.js line chart
- How to make bar chart animation where all bars grow at the same speed?
- How to make a chart scroll horizontally (when using Chart.js)
- Show point values in Radar Chart using chart.js
- ChartJS - handling of overlapping points in line chart
- How can I make line on chart thinner?
- Use transparent stroke color with chartjs pie chart
More Query from same tag
- Is it possible to maintain two different font size in Chart.JS based on screen size?
- data from api not showing in chart.js (angular)
- ChartJs. How to stretch up line graph to the edges?
- Chart.js showing time (HH:MM:SS - 24 hour clock) on xAxis
- How to get the setState reassigned in react
- Echars can not render a smooth line when it process alot of data
- ChartJS keeps adding one day to X axis. I cannot find a reason. Any suggestion?
- How to change the Y-axis values from numbers to strings in Chart.js?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- Grouping by month with series of epoch timestamps in Chart.js
- Impossible to render multiple charts with chart.js
- Importing and using Echarts results in [object error] in Internet Explorer
- chart.js data wont update
- Update only Chart.js without animations and without refreshing the browser
- Editing Chart.js legend template
- Chart.js: Bar chart multiple colors
- multiple line charts with independent data Javascript (Chart.js or google-vizualisation)
- How to set responsive width and height of canvas?
- Why are these 2.9 ChartJS bar charts different?
- Chart js different background for y axis
- Chart.js V2.7.2 How to make Horizontal scroll bar without loosing Y-Axis
- Chart.JS removing data stuck in loop
- Chart.js - Formatting Y axis
- How to get rid of the line on top of every point on a line chart (Chart.js)
- Dynamically update values of a chartjs chart
- Properly scaling xAxis with time in chart.js
- how to hide 0 value on Yaxis in Chart.js with negative values
- Add data to dynamically created Chart.js dataset
- Why ChartJS's Bar Chart does not render bar for a specific value?
- add shadow for line in vue chartjs