Built with blockbuilder.org
Last active
January 10, 2017 10:27
-
-
Save MohamedZaki/7c0368d27a393bc6a2b6414216e3a0bf to your computer and use it in GitHub Desktop.
Radar Final
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: 30, | |
| 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> | |
| <script> | |
| var w = 500, | |
| h = 500; | |
| var colorscale = d3.scale.category10(); | |
| //Legend titles | |
| var LegendOptions = ['Bank 01','Bank 02']; | |
| /* | |
| */ | |
| //Data | |
| var d = [ | |
| [ | |
| {axis:"taille bilan",value:0.15}, | |
| {axis:"total depot",value:0.04}, | |
| {axis:"capitaux propres",value:0.57}, | |
| {axis:"total credit",value:0.11}, | |
| {axis:"credit conso par",value:0}, | |
| {axis:"credit habitat",value:0}, | |
| {axis:"credit snf",value:0.01}, | |
| {axis:"credit bail snf",value:0}, | |
| {axis:"credit bail par",value:0}, | |
| {axis:"actif titre",value:0.38}, | |
| {axis:"actif interbancaire",value:0.4}, | |
| {axis:"passif interbancaire",value:0.05}, | |
| ],[ | |
| {axis:"taille bilan",value:0.51}, | |
| {axis:"total depot",value:0.33}, | |
| {axis:"capitaux propres",value:0.12}, | |
| {axis:"total credit",value:0.51}, | |
| {axis:"credit conso par",value:0.13}, | |
| {axis:"credit habitat",value:0.10}, | |
| {axis:"credit snf",value:0.28}, | |
| {axis:"credit bail snf",value:0.14}, | |
| {axis:"credit bail par",value:0.04}, | |
| {axis:"actif titre",value:0.11}, | |
| {axis:"actif interbancaire",value:0.25}, | |
| {axis:"passif interbancaire",value:0.43} | |
| ], | |
| [ | |
| {axis:"taille bilan",value:0.70}, | |
| {axis:"total depot",value:0.36}, | |
| {axis:"capitaux propres",value:0.08}, | |
| {axis:"total credit",value:0.38}, | |
| {axis:"credit conso par",value:0.06}, | |
| {axis:"credit habitat",value:0.22}, | |
| {axis:"credit snf",value:0.28}, | |
| {axis:"credit bail snf",value:0.02}, | |
| {axis:"credit bail par",value:0.01}, | |
| {axis:"actif titre",value:0.21}, | |
| {axis:"actif interbancaire",value:0.30}, | |
| {axis:"passif interbancaire",value:0.29}, | |
| ], | |
| [ | |
| {axis:"taille bilan",value:0.34}, | |
| {axis:"total depot",value:0.25}, | |
| {axis:"capitaux propres",value:0.36}, | |
| {axis:"total credit",value:0.28}, | |
| {axis:"credit conso par",value:0.09}, | |
| {axis:"credit habitat",value:0.05}, | |
| {axis:"credit snf",value:0.11}, | |
| {axis:"credit bail snf",value:0.06}, | |
| {axis:"credit bail par",value:0.00}, | |
| {axis:"actif titre",value:0.20}, | |
| {axis:"actif interbancaire",value:0.39}, | |
| {axis:"passif interbancaire",value:0.21}, | |
| ] | |
| ]; | |
| 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 | |
| //Will expect that data is in %'s | |
| RadarChart.draw("#chart", d, mycfg); | |
| //////////////////////////////////////////// | |
| /////////// Initiate legend //////////////// | |
| //////////////////////////////////////////// | |
| var svg = d3.select('#body') | |
| .selectAll('svg') | |
| .append('svg') | |
| .attr("width", w+300) | |
| .attr("height", h) | |
| //Create the title for the legend | |
| var text = svg.append("text") | |
| .attr("class", "title") | |
| .attr('transform', 'translate(90,0)') | |
| .attr("x", w - 70) | |
| .attr("y", 10) | |
| .attr("font-size", "12px") | |
| .attr("fill", "#404040") | |
| .text("Comparaison des caracteristiques "); | |
| //Initiate Legend | |
| var legend = svg.append("g") | |
| .attr("class", "legend") | |
| .attr("height", 100) | |
| .attr("width", 200) | |
| .attr('transform', 'translate(90,20)') | |
| ; | |
| //Create colour squares | |
| legend.selectAll('rect') | |
| .data(LegendOptions) | |
| .enter() | |
| .append("rect") | |
| .attr("x", w - 65) | |
| .attr("y", function(d, i){ return i * 20;}) | |
| .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 - 52) | |
| .attr("y", function(d, i){ return i * 20 + 9;}) | |
| .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