Menu

L'année 2016 a été médiocre pour Le Canard Enchainé avec un niveau de vente qui n'a pas été connu depuis plus de 20 ans. Les résultats devraient être tout autre en 2017 avec l'avènement du "Pénélopegate" et la période de campagnes.  

 

Ce graphe a été réalisé sous d3.js v6 :

<html>
<meta charset="utf-8">

    <style>
        div.tooltip {
            position: absolute;
            text-align: center;
            background-color: white;
            padding: 8px;
            pointer-events: none;
            border-radius: 5px;
            max-width: 80px;
            max-height: 60px;
            }
    </style>

<body>
    <svg id="container" height="400" width="800" , style="border:none"></>
    <g id="body" style="transform:translate(50px, 0px)"></g>

    <g id="yAxis"></g>
    <g id="xAxis"></g>
</svg>

    <script src="https://d3js.org/d3.v6.min.js"></script>
<script>

let body = d3.select("#body")
d3.csv("https://www.md-wip.fr/images/articles/Evolution_ventes_Canard_Enchaine_2.csv").then(showData)

var div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

    function showData(diff) {
    let max = d3.max(diff, d => d.vm)
    
    // Définition des axes

let ventes = d3.scaleLinear()
    .range([350, 30])
    .domain([0, max])

    let annee = d3.scaleBand()
    .range([0, 700])
    .domain(diff.map(d => d.year))
    .padding(0.3)

    let join = body.selectAll("rect")
    .data(diff)

    join.enter()
        .append("rect")
        .style("fill", "#CF462C")
        .style("y", d => ventes(d.vm))
        .style("height", d => ventes(0) - ventes(d.vm))
        .style("width", annee.bandwidth())
        .style("x", d => annee(d.year))

// Tooltip on mouseover

        .on("mouseover", function(event, d) {
            div.transition().duration(200).style("opacity", .9);

            div.html(d.year + ", diffusion : " + d.vm)
                .style("left", (event.pageX) + "px")
                .style("top", (event.pageY + 30) + "px");
        })
        .on("mouseout", function(d) {
            div.transition().duration(500).style("opacity", 0)
        })

    let xAxis = d3.axisBottom(annee)

    d3.select("#xAxis")
    .attr("transform", "translate(50, 350)")
    .call(xAxis)

    let yAxis = d3.axisLeft(ventes)

    d3.select("#yAxis")
    .attr("transform", "translate(50, 0)")
    .call(yAxis)

}
</script>

</html>