<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } svg { width: 100%; height: 100%; } .axis { shape-rendering: crispEdges; } .axis path { fill: none; stroke: #000; } </style> </head> <body> <script> var margin = { top: 20, right: 20, bottom: 30, left: 30 }; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var scolor = d3.scale.category20b(), sweight = d3.scale.sqrt().range([0, width]).domain([0, 5000]), sheight = d3.scale.linear().range([height, 0]).domain([0, 40]), xaxis = d3.svg.axis().scale(sweight).orient('bottom') .tickValues([0, 10, 50, 100, 200, 500, 1000, 2000, 4000, 5000]), yaxis = d3.svg.axis().scale(sheight).orient('left'); svg .append('g') .attr({ class: 'x axis', transform: 'translate(0,' + height + ')' }) .call(xaxis); svg .append('g') .attr({ class: 'y axis' }) .call(yaxis); var pokemons_url = 'pokemon.csv'; d3.csv(pokemons_url, function (poke) { svg.selectAll('circle') .data(poke) .enter() .append('circle') .attr({ r: function (d) { return 1 + 0.5 * Math.sqrt(d.base_experience); }, cx: function (d, i) { return sweight(d.weight); }, cy: function (d) { return sheight(d.height); }, stroke: function (d) { return scolor(d.species_id); }, fill: function (d) { return scolor(d.species_id); }, 'fill-opacity': 0.1, title: function (d) { return d.identifier.toUpperCase(); }, }); function imc(poke) { return poke.weight / (poke.height * poke.height); } var mediane_imc = d3.median(poke.map(imc)), petit = 10, taille_petit = Math.sqrt(petit / mediane_imc) gros = 4500, taille_gros = Math.sqrt(gros / mediane_imc); svg.append('line') .attr({ x1: sweight(petit), y1: sheight(taille_petit), x2: sweight(gros), y2: sheight(taille_gros), stroke: '#fee', 'stroke-width': 2, }); }); </script> </body>