Pokemons

Pokemon chart shows height (y axis), weight (x axis, sqrt scale), experience (dot size) and species (color).

Data from the PokeAPI.

<!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>

https://d3js.org/d3.v3.min.js