Built with blockbuilder.org
Last active
January 11, 2017 17:23
-
-
Save MohamedZaki/694b378d5aad8e5694ae7000c4f57a0a to your computer and use it in GitHub Desktop.
Final Radar 01
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <title>Radar chart</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var RadarChart = { | |
| draw: function(id, d, options){ | |
| var cfg = { | |
| radius: 5, | |
| w: 600, | |
| h: 600, | |
| factor: 1, // le facteur de la taille | |
| factorLegend: .85, | |
| levels: 5, | |
| maxValue: 0, | |
| radians: 2* Math.PI, | |
| opacityArea: 0.5, | |
| ToRight: 5, | |
| TranslateX: 80, | |
| TranslateY: 40, | |
| ExtraWidthX: 100, | |
| ExtraWidthY: 100, | |
| color: d3.scale.category10() | |
| }; | |
| if('undefined' !== typeof options){ | |
| for(var i in options){ | |
| if('undefined' !== typeof options[i]){ | |
| cfg[i] = options[i]; | |
| } | |
| } | |
| } | |
| cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i){return d3.max(i.map(function(o){return o.value;}))})); | |
| var allAxis = (d[0].map(function(i, j){return i.axis})); | |
| var total = allAxis.length; | |
| var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2); | |
| var Format = d3.format('1n'); | |
| d3.select(id).select("svg").remove(); | |
| var g = d3.select(id) | |
| .append("svg") | |
| .attr("width", cfg.w+cfg.ExtraWidthX) | |
| .attr("height", cfg.h+cfg.ExtraWidthY) | |
| .append("g") | |
| .attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")"); | |
| ; | |
| var tooltip; | |
| //Circular segments | |
| for(var j=0; j<cfg.levels-1; j++){ | |
| var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); | |
| g.selectAll(".levels") | |
| .data(allAxis) | |
| .enter() | |
| .append("svg:line") | |
| .attr("x1", function(d, i){return levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) | |
| .attr("y1", function(d, i){return levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) | |
| .attr("x2", function(d, i){return levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total));}) | |
| .attr("y2", function(d, i){return levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total));}) | |
| .attr("class", "line") | |
| .style("stroke", "grey") | |
| .style("stroke-opacity", "0.75") | |
| .style("stroke-width", "0.3px") | |
| .attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")"); | |
| } | |
| //Afficher le nombre dans chaque niveau | |
| for(var j=0; j<cfg.levels; j++){ | |
| var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); | |
| g.selectAll(".levels") | |
| .data([1]) //dummy data | |
| .enter() | |
| .append("text") | |
| .attr("x", function(d){return levelFactor*(1-cfg.factor*Math.sin(0));}) | |
| .attr("y", function(d){return levelFactor*(1-cfg.factor*Math.cos(0));}) | |
| .attr("class", "legend") | |
| .style("font-family", "sans-serif") | |
| .style("font-size", "10px") | |
| .attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")") | |
| .attr("fill", "#737373") | |
| .text(Format((j+1)*cfg.maxValue/cfg.levels)); | |
| } | |
| series = 0; | |
| var axis = g.selectAll(".axis") | |
| .data(allAxis) | |
| .enter() | |
| .append("g") | |
| .attr("class", "axis"); | |
| axis.append("line") | |
| .attr("x1", cfg.w/2) | |
| .attr("y1", cfg.h/2) | |
| .attr("x2", function(d, i){return cfg.w/2*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) | |
| .attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) | |
| .attr("class", "line") | |
| .style("stroke", "grey") | |
| .style("stroke-width", "1px"); | |
| axis.append("text") | |
| .attr("class", "legend") | |
| .text(function(d){return d}) | |
| .style("font-family", "sans-serif") | |
| .style("font-size", "11px") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", "1.5em") | |
| .attr("transform", function(d, i){return "translate(0, -10)"}) | |
| .attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total);}) | |
| .attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);}); | |
| d.forEach(function(y, x){ | |
| dataValues = []; | |
| g.selectAll(".nodes") | |
| .data(y, function(j, i){ | |
| dataValues.push([ | |
| cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), | |
| cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) | |
| ]); | |
| }); | |
| dataValues.push(dataValues[0]); | |
| g.selectAll(".area") | |
| .data([dataValues]) | |
| .enter() | |
| .append("polygon") | |
| .attr("class", "radar-chart-serie"+series) | |
| .style("stroke-width", "2px") | |
| .style("stroke", cfg.color(series)) | |
| .attr("points",function(d) { | |
| var str=""; | |
| for(var pti=0;pti<d.length;pti++){ | |
| str=str+d[pti][0]+","+d[pti][1]+" "; | |
| } | |
| return str; | |
| }) | |
| .style("fill", function(j, i){return cfg.color(series)}) | |
| .style("fill-opacity", cfg.opacityArea) | |
| .on('mouseover', function (d){ | |
| z = "polygon."+d3.select(this).attr("class"); | |
| g.selectAll("polygon") | |
| .transition(200) | |
| .style("fill-opacity", 0.1); | |
| g.selectAll(z) | |
| .transition(200) | |
| .style("fill-opacity", .7); | |
| }) | |
| .on('mouseout', function(){ | |
| g.selectAll("polygon") | |
| .transition(200) | |
| .style("fill-opacity", cfg.opacityArea); | |
| }); | |
| series++; | |
| }); | |
| series=0; | |
| d.forEach(function(y, x){ | |
| g.selectAll(".nodes") | |
| .data(y).enter() | |
| .append("svg:circle") | |
| .attr("class", "radar-chart-serie"+series) | |
| .attr('r', cfg.radius) | |
| .attr("alt", function(j){return Math.max(j.value, 0)}) | |
| .attr("cx", function(j, i){ | |
| dataValues.push([ | |
| cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), | |
| cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) | |
| ]); | |
| return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)); | |
| }) | |
| .attr("cy", function(j, i){ | |
| return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)); | |
| }) | |
| .attr("data-id", function(j){return j.axis}) | |
| .style("fill", cfg.color(series)).style("fill-opacity", .9) | |
| .on('mouseover', function (d){ | |
| newX = parseFloat(d3.select(this).attr('cx')) - 10; | |
| newY = parseFloat(d3.select(this).attr('cy')) - 5; | |
| tooltip | |
| .attr('x', newX) | |
| .attr('y', newY) | |
| .text(Format(d.value)) | |
| .transition(200) | |
| .style('opacity', 1); | |
| z = "polygon."+d3.select(this).attr("class"); | |
| g.selectAll("polygon") | |
| .transition(200) | |
| .style("fill-opacity", 0.1); | |
| g.selectAll(z) | |
| .transition(200) | |
| .style("fill-opacity", 0.7); | |
| }) | |
| .on('mouseout', function(){ | |
| tooltip | |
| .transition(200) | |
| .style('opacity', 0); | |
| g.selectAll("polygon") | |
| .transition(200) | |
| .style("fill-opacity", cfg.opacityArea); | |
| }) | |
| .append("svg:title") | |
| .text(function(j){return Math.max(j.value, 0)}); | |
| series++; | |
| }); | |
| //Tooltip | |
| tooltip = g.append('text') | |
| .style('opacity', 0) | |
| .style('font-family', 'sans-serif') | |
| .style('font-size', '13px'); | |
| } | |
| }; | |
| </script> | |
| <style> | |
| body { | |
| overflow: hidden; | |
| margin: 0; | |
| font-size: 14px; | |
| font-family: "Helvetica Neue", Helvetica; | |
| } | |
| #chart { | |
| position: absolute; | |
| top: 50px; | |
| left: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <div id="chart"></div> | |
| </div> | |
| <h2> Radar Chart de comparaison des differents clusters</h2> | |
| <script> | |
| var w = 500, | |
| h = 500; | |
| var colorscale = d3.scale.category10(); | |
| //Legend titles | |
| var LegendOptions = ['cluster 1','cluster 2','cluster 3', 'cluster 4']; | |
| /* | |
| */ | |
| //Data | |
| var d = [ | |
| [ | |
| {axis:"taille bilan",value:0.6}, | |
| {axis:"total depot",value:0.47}, | |
| {axis:"capitaux propres",value:0.10}, | |
| {axis:"total credit",value:0.51}, | |
| {axis:"credit conso par",value:0.04}, | |
| {axis:"credit habitat",value:0.23}, | |
| {axis:"credit snf",value:0.41}, | |
| {axis:"credit bail snf",value:0.05}, | |
| {axis:"credit bail par",value:0}, | |
| {axis:"actif titre",value:0.11}, | |
| {axis:"actif interbancaire",value:0.27}, | |
| {axis:"passif interbancaire",value:0.32}, | |
| ], | |
| [ | |
| {axis:"taille bilan",value:0.48}, | |
| {axis:"total depot",value:0.18}, | |
| {axis:"capitaux propres",value:0.12}, | |
| {axis:"total credit",value:0.63}, | |
| {axis:"credit conso par",value:0.71}, | |
| {axis:"credit habitat",value:0.02}, | |
| {axis:"credit snf",value:0.07}, | |
| {axis:"credit bail snf",value:0.05}, | |
| {axis:"credit bail par",value:0.17}, | |
| {axis:"actif sur titre",value:0.07}, | |
| {axis:"actif interbancaire",value:0.18}, | |
| {axis:"passif interbancaire",value:0.59} | |
| ], | |
| [ | |
| {axis:"taille bilan",value:0.32}, | |
| {axis:"total depot",value:0.1}, | |
| {axis:"capitaux propres",value:0.45}, | |
| {axis:"total credit",value:0.07}, | |
| {axis:"credit conso par",value:0}, | |
| {axis:"credit habitat",value:0.03}, | |
| {axis:"credit snf",value:0}, | |
| {axis:"credit bail snf",value:0}, | |
| {axis:"credit bail par",value:0}, | |
| {axis:"actif sur titre",value:0.36}, | |
| {axis:"actif interbancaire",value:0.46}, | |
| {axis:"passif interbancaire",value:0.11}, | |
| ], | |
| [ | |
| {axis:"taille bilan",value:0.47}, | |
| {axis:"total depot",value:0.18}, | |
| {axis:"capitaux propres",value:0.13}, | |
| {axis:"total credit",value:0.68}, | |
| {axis:"credit conso par",value:0}, | |
| {axis:"credit habitat",value:0}, | |
| {axis:"credit snf",value:0.05}, | |
| {axis:"credit bail snf",value:0.85}, | |
| {axis:"credit bail par",value:0.06}, | |
| {axis:"actif sur titre",value:0.03}, | |
| {axis:"actif interbancaire",value:0.08}, | |
| {axis:"passif interbancaire",value:0.64}, | |
| ] | |
| ]; | |
| console.log(d); | |
| //Options for the Radar chart, other than default | |
| var mycfg = { | |
| w: w, | |
| h: h, | |
| maxValue: 1, | |
| levels: 10, | |
| ExtraWidthX:300 | |
| } | |
| //Call function to draw the Radar chart | |
| RadarChart.draw("#chart", d, mycfg); | |
| //the legend squares creation | |
| var svg = d3.select('#body') | |
| .selectAll('svg') | |
| .append('svg') | |
| .attr("width", w+300) | |
| .attr("height", h) | |
| //Initiate Legend | |
| var legend = svg.append("g") | |
| .attr("class", "legend") | |
| .attr("height", 100) | |
| .attr("width", 200) | |
| .attr('transform', 'translate(90,20)') | |
| ; | |
| //Create squares | |
| legend.selectAll('rect') | |
| .data(LegendOptions) | |
| .enter() | |
| .append("rect") | |
| .attr("x", w - 40) | |
| .attr("y", function(d, i){ return i * 20 +15;}) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", function(d, i){ return colorscale(i);}) | |
| ; | |
| //Create text next to squares | |
| legend.selectAll('text') | |
| .data(LegendOptions) | |
| .enter() | |
| .append("text") | |
| .attr("x", w - 28) | |
| .attr("y", function(d, i){ return i * 20+25;}) | |
| .attr("font-size", "11px") | |
| .attr("fill", "#737373") | |
| .text(function(d) { return d; }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment