Old school D3 from simpler times

All examples By author By category About

LouisKraemer

Full window Github gist

Scatter plot

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

.label {
    font-family: roboto;
}

</style>
</head>

<body>
  <script>
    
const width = 900;
var height = 400;
    
d3.csv('iris.csv', function(data) {
    const dataset = data;
    const length = dataset.length;

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

var zone = svg.append("rect")
        .attr('x', 0)
        .attr('y', 0)
        .attr("width", width)
        .attr("height", height)
        .attr("fill", "#FFFFFF");

var x_min = d3.min(dataset, function(d) {
        return parseFloat(d["sepal_length"]);
    })
    var x_max = d3.max(dataset, function(d) {
        return parseFloat(d["sepal_length"]);
    })
    var xScale = d3.scaleLinear()
        .domain([x_min, x_max])
        .range([40, width - 20]);
    var yScale = d3.scaleLinear()
        .domain([d3.min(dataset, function(d) {
            return parseFloat(d["sepal_width"]);
        }), d3.max(dataset, function(d) {
            return parseFloat(d["sepal_width"]);
        })])
        .range([height - 40, 20]);

var xAxis = d3.axisBottom()
        .scale(xScale);
    var yAxis = d3.axisLeft()
        .scale(yScale);
    svg.append("g")
        .call(xAxis)
        .attr("transform", "translate(0," + (height - 40) + ")");
    svg.append("g")
        .call(yAxis)
        .attr("transform", "translate(" + 40 + ",0)");
    
    var point = svg.selectAll(".point").data(dataset).enter().append("path")
        .attr("d", d3.symbol().type(function(d) {
            return forme(d["species"]);
        }).size(30))
        .attr("transform", function(d) {
            return "translate(" + xScale(parseFloat(d["sepal_length"])) + "," + yScale(parseFloat(d["sepal_width"])) + ")";
        })
        .attr("fill", function(d) {
            return color(d["species"]);
        });
  
    function regression(data, species_to_plot) {
        var xr = 0;
        var yr = 0;
        var x_mean = 0;
        var y_mean = 0;
        var term1 = 0;
        var term2 = 0;
        var x_gauche = x_min;
        var x_droite = x_max;
        var n = data[0].length;
        for (var i = 0; i < n; i++) {
            x_mean += data[0][i];
            y_mean += data[1][i];
        }
        x_mean /= n;
        y_mean /= n;
        for (var i = 0; i < n; i++) {
            xr = data[0][i] - x_mean;
            yr = data[1][i] - y_mean;
            term1 += xr * yr;
            term2 += xr * xr;
        }
        var b1 = term1 / term2;
        var b0 = y_mean - (b1 * x_mean);
        console.log(yScale(b0));
        return [{
            "x": x_gauche,
            "y": b0 + x_gauche * b1
        }, {
            "x": x_droite,
            "y": b0 + x_droite * b1
        }, species_to_plot];
    };

function format_data_regression(data_to_convert, species) {
        var clean_data = [
            [],
            []
        ]
        var n = data_to_convert.length
        for (var i = 0; i < n; i++) {
            if (data_to_convert[i]["species"] === species) {
                clean_data[0].push(parseFloat(data_to_convert[i]["sepal_length"]));
                clean_data[1].push(parseFloat(data_to_convert[i]["sepal_width"]));
            }
        }
        return clean_data;
    }

//Creation d'un veteur qui regroupe les couples d'extreme 
  	//de la droite de regression par espèce
    var lineData = [regression(format_data_regression(dataset, "setosa"), "setosa"),
        regression(format_data_regression(dataset, "virginica"), "virginica"),
        regression(format_data_regression(dataset, "versicolor"), "versicolor")
    ]

var line = svg.selectAll(".droite").data(lineData).enter().append("path")
        .attr("class", "line")
        .attr("d", d3.line().x(function(d) {
            return xScale(d.x);
        }).y(function(d) {
            return yScale(d.y);
        }))
        .attr("stroke", function(d) {
            return color(d[2])
        })
        .attr("stroke-width", "3");

function forme(type) {
        if (type === "setosa") {
            return d3.symbolCircle;
        } else if (type === "versicolor") {
            return d3.symbolSquare;
        } else if (type === "virginica") {
            return d3.symbolTriangle;
        } else {
            return "error";
        }
    };

function color(type) {
        if (type === "setosa") {
            return "#B71C1C";
        } else if (type === "versicolor") {
            return "#673AB7";
        } else if (type === "virginica") {
            return "#009688";
        } else {
            return "black";
        };
    }
});  </script>
</body>

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