All examples By author By category About

pmariac

Full window Github gist

The console wars

forked from anonymous's block: Test

<!DOCTYPE html>
<html>
<head>
    <title>The Console Wars - Hardware Sales</title>
    <link href="slider.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
    
    <script src="force-cluster.js"></script>
    <script src="d3-tip.js"></script>
    <style>
        body {
            font-family: 'Catamaran', sans-serif;
            margin: 20px;
            top: 20px;
            right: 20px;
            bottom: 20px;
            left: 20px;
        }

.d3-tip {
            line-height: 1;
            padding: 12px;
            background: rgba(220, 220, 220, 0.97);
            color: #444;
            border-radius: 8px;
        }

/* Creates a small triangle extender for the tooltip */
        .d3-tip:after {
            box-sizing: border-box;
            display: inline;
            font-size: 10px;
            width: 100%;
            line-height: 1;
            color: rgba(220, 220, 220, 0.97);
            content: "\25BC";
            position: absolute;
            text-align: center;
        }

/* Style northward tooltips differently */
        .d3-tip.n:after {
            margin: -1px 0 0 0;
            top: 100%;
            left: 0;
        }

.d3-tip img {
            display: block;
            max-width: 300px;
            max-height: 200px;
            width: auto;
            height: auto;
            margin: auto;
        }
    </style>
</head>

<body>
<div id="explain"><h1>The console wars - hardware sales</h1>
    <p>Only consoles which sold over 3M units worldwide are presented.</p>
    <p>
        <button id="groupButton" onclick="groupBy()">Group by Generation / Release date</button>
    </p>
</div>
<svg id="slider" width="1600" height="70"></svg>
<div id="chart"></div>

var width = 1600,
        height = 700,
        rightLegendPadding = 200,
        padding = 7; // separation between nodes

var animated = false;
    var currentYear = 0;
    var totalSales = 0;
    var groupedByGeneration = false;
    var colorByGeneration = d3.scaleSequential(d3.interpolateBlues);
    var clusterForce;

// The largest node for each cluster.
    var clusters = new Array(10);
    var nodes;
    var simulation;
    var node;
    var text;
    var svg;

var consoleGenerations = [
        {year: 1972, name: '1st Gen.'},
        {year: 1976, name: '2nd Gen.'},
        {year: 1983, name: '3rd Gen.'},
        {year: 1987, name: '4th Gen.'},
        {year: 1993, name: '5th Gen.'},
        {year: 1998, name: '6th Gen.'},
        {year: 2005, name: '7th Gen.'},
        {year: 2012, name: '8th Gen.'},
        {year: 2017, name: ''}
    ];

var consoleManufacturers = [
        {name: 'Others', color: "#ff6724"},
        {name: 'Nintendo', color: "#e60012"},
        {name: 'Sega', color: "#0060a8"},
        {name: 'Sony', color: "#9100d7"},
        {name: 'Microsoft', color: "#107c0f"}
    ];

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function (d) {
            return "<strong>" + d.name + "</strong>"
                + "<br/><br/>Manufacturer: <span style='color: " + consoleManufacturers[d.manufacturer].color + "'>" + d.manufacturerName + "</span>"
                + "<br/>Total sales: " + d.totalSales + " millions units"
                + "<br/>Retailed: " + d.yearFrom + "-" + d.yearTo
                + "<br/>Generation: " + consoleGenerations[d.generation - 1].name
                + "<br/><br/><img src='" + d.image + "'/>";
        });

function strokeWidth(d) {
        return (currentYear > d.yearTo) ? "0" : "3";
    }

function salesInTime(t) {
        return 1 - (Math.pow(1 - t, 2))
    }

function recomputeClusters(nbClusters) {
        clusterForce.strength(groupedByGeneration ? 0 : 1);
        clusters = new Array(nbClusters);
        for (i = 0; i < nodes.length; i++) {
            var index = (groupedByGeneration ? nodes[i].generation : nodes[i].manufacturer) - 1;
            if (!clusters[index] || (nodes[i].totalSales > clusters[index].totalSales)) clusters[index] = nodes[i];
        }
    }

function getCluster(d) {
        return groupedByGeneration ? clusters[d.generation - 1] : clusters[d.manufacturer - 1];
    }

d3.csv("data.csv", function (error, data) {
            if (error) {
                throw error;
            }

nodes = d3.range(data.length).map(function (index) {
                var dat = data[index];
                var i = +dat.man,
                    r = (+dat.TOTAL);
                return {
                    shortName: dat.shortName,
                    image: dat.image,
                    name: dat.Platform,
                    generation: +dat.gen,
                    manufacturer: +dat.man,
                    manufacturerName: dat.Manufacturer,
                    yearFrom: dat.Launch,
                    yearTo: dat.End,
                    totalSales: +(dat.TOTAL),
                    radius: 0,
                    x: Math.cos(i / 5 * 2 * Math.PI) * 200 + (width - rightLegendPadding) / 2,
                    y: Math.sin(i / 5 * 2 * Math.PI) * 200 + height / 2
                };
            });

clusterForce = forceCluster()
                .centers(function (d) {
                    return getCluster(d);
                })
                .strength(1)
                .centerInertia(0);

recomputeClusters(5);

simulation = d3.forceSimulation()

// keep entire simulation balanced around screen center
                .force('x', d3.forceX().x(function (d) {
                    return groupedByGeneration ? xTime(new Date(d.yearFrom, 1, 1)) + marg.left + (Math.sqrt(d.radius) * 6) : (width - rightLegendPadding) / 2;
                }).strength(function (d) {
                    return groupedByGeneration ? 2 : 0.1;
                }))
                .force('y', d3.forceY().y(height / 2).strength(function (d) {
                    return groupedByGeneration ? 0 : 0.1;
                }))

// cluster by section
                .force('cluster', clusterForce)

// apply collision with padding
                .force('collide', d3.forceCollide(function (d) {
                    return d.radius + padding;
                })
                    .strength(3))

.velocityDecay(0.8)
                .on('tick', layoutTick)
                .nodes(nodes);

var group = svg.selectAll('.consoleGroup')
                .data(nodes)
                .enter().append('g').attr('class', 'consoleGroup');

node = group.append('circle')
                .attr("class", "consoleSale")
                .style('fill', function (d) {
                    return color(d);
                })
                .style('stroke', '#000')
                .style('stroke-width', '2')
                .call(d3.drag()
                    .on('start', dragstarted)
                    .on('drag', dragged)
                    .on('end', dragended)
                )
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide);

text = group.append('text')
                .text(function (d) {
                    return d.shortName;
                })
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px")
                //.attr("cursor", "default")
                .attr("pointer-events", "none");

// PRELOADING IMAGEs
            group.append('image')
                .attr("href", function (d) {
                    return d.image;
                })
                .attr("visibility", "hidden");

// ramp up collision strength to provide smooth transition
            var transitionTime = 3000;
            var t = d3.timer(function (elapsed) {
                var dt = elapsed / transitionTime;
                simulation.force('collide').strength(Math.pow(dt, 2) * 0.7);
                if (dt >= 1.0) t.stop();
            });

svg.call(tip);
            animated = true;
        }
    );

svg = d3.select('#chart').append('svg')
        .attr('width', width)
        .attr('height', height);

var g = svg.append('g').attr('class', 'manufacturersLegend');
    for (i = 0; i < consoleManufacturers.length; i++) {
        g.append('circle')
            .style('fill', d3.color(consoleManufacturers[i].color))
            .attr('cx', width - rightLegendPadding)
            .attr('cy', i * 40 + 320)
            .attr('r', '15');
        g.append("text")
            .text(consoleManufacturers[i].name)
            .attr('x', width - rightLegendPadding + 30)
            .attr('y', i * 40 + 325);
    }

g = svg.append('g').attr('class', 'generationsLegend');
    for (i = 0; i < consoleGenerations.length - 1; i++) {
        g.append('circle')
            .style('fill', colorByGeneration(i / 8))
            .attr('cx', width - rightLegendPadding)
            .attr('cy', i * 40 + 320)
            .attr('r', '15');
        g.append("text")
            .text(consoleGenerations[i].name)
            .attr('x', width - rightLegendPadding + 30)
            .attr('y', i * 40 + 325);
    }
    g.attr('opacity', '0');

g = svg.append('g');
    /*g.append('circle')
        .style('fill', "#ccc")
        .attr('cx', width - rightLegendPadding)
        .attr('cy', 30)
        .attr('r', '15')
        .style('stroke', '#000')
        .style('stroke-width', '3');
    g.append("text")
        .text("Retail still available")
        .attr('x', width - rightLegendPadding + 30)
        .attr('y', 35);*/

g.append('circle')
        .style('fill', "#ccc")
        .attr('cx', width - rightLegendPadding)
        .attr('cy', 70)
        .attr('r', '15');
    g.append("text")
        .text("Retail unavailable")
        .attr('x', width - rightLegendPadding + 30)
        .attr('y', 78);

g.append("text")
        .text("World sales (in million units)")
        .attr("text-anchor", "middle")
        .attr('x', width - rightLegendPadding + 70)
        .attr('y', 125);
    g.append('circle')
        .style('fill', "#ccc")
        .attr('cx', width - rightLegendPadding + 70)
        .attr('cy', 215)
        .style('stroke', '#000')
        .attr('r', Math.sqrt(150) * 6);
    g.append("text")
        .text("150")
        .attr("text-anchor", "middle")
        .attr('x', width - rightLegendPadding + 70)
        .attr('y', 162);
    g.append('circle')
        .style('fill', "#ccc")
        .attr('cx', width - rightLegendPadding + 70)
        .attr('cy', 215)
        .style('stroke', '#000')
        .attr('r', Math.sqrt(50) * 6);
    g.append("text")
        .text("50")
        .attr("text-anchor", "middle")
        .attr('x', width - rightLegendPadding + 70)
        .attr('y', 192);
    g.append('circle')
        .style('fill', "#ccc")
        .attr('cx', width - rightLegendPadding + 70)
        .attr('cy', 215)
        .style('stroke', '#000')
        .attr('r', Math.sqrt(5) * 6);
    g.append("text")
        .text("5")
        .attr("text-anchor", "middle")
        .attr('x', width - rightLegendPadding + 70)
        .attr('y', 218);

function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.1).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

var sliderSVG = d3.select("#slider"),
        marg = {right: 50, left: 50},
        sliderWidth = +sliderSVG.attr("width") - marg.left - marg.right - rightLegendPadding,
        sliderHeight = +sliderSVG.attr("height");

var handle;
    var playPauseButton = sliderSVG.append("svg:image")
        .attr('x', 0)
        .attr('y', 10)
        .attr('width', 32)
        .attr('height', 32)
        .attr("xlink:href", "https://i.imgur.com/GQYRQQv.png")
        .on("click", playPause);

var xTime = d3.scaleTime()
        .domain([new Date(1972, 0, 1), new Date(2017, 11, 1)])
        .range([0, sliderWidth])
        .clamp(true);

var xGenerations = d3.scaleOrdinal()
        .domain(consoleGenerations.map(function (d) {
            return d.name
        }))
        .range(consoleGenerations.map(function (d) {
            return ((d.year - 1972) / 45) * sliderWidth
        }));

var slider = sliderSVG.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + marg.left + "," + sliderHeight / 2 + ")");

var track = slider.append("line")
        .attr("class", "track")
        .attr("x1", xTime.range()[0])
        .attr("x2", xTime.range()[1]);

for (i = 0; i < 9; i++) {
        slider.append("line")
            .attr("class", "trackGeneration")
            .attr("x1", xGenerations.range()[i - 1])
            .attr("x2", xGenerations.range()[i])
            .attr("stroke", "" + colorByGeneration(i / 8));
    }

track.select(function () {
        return this.parentNode.appendChild(this.cloneNode(true));
    })
        .attr("class", "track-overlay")
        .call(d3.drag()
            .on("start.interrupt", function () {
                slider.interrupt();
            })
            .on("start drag", function () {
                if (animated) playPause();
                handle.transition()
                    .ease(d3.easeCubicOut)
                    .duration(2 * Math.abs(d3.event.x - handle.attr("cx")))
                    .attr("cx", Math.min(sliderWidth, Math.max(0, d3.event.x)))
                    .tween("attr.fill", function () {
                        var node = this;
                        return function (t) {
                            dateChange(xTime.invert(node.getAttribute("cx")));
                        }
                    });
            }));

slider.insert("g", ".track-overlay")
        .attr("class", "ticks")
        .attr("transform", "translate(0," + 18 + ")")
        .selectAll("text")
        .data(xTime.ticks(d3.timeYear.filter(function (d) {
            return d.getYear() % 5 === 2
        })))
        .enter().append("text")
        .attr("x", xTime)
        .attr("text-anchor", "middle")
        .text(function (d) {
            return d.getFullYear();
        });

slider.insert("g", ".track-overlay")
        .attr("class", "ticks")
        .attr("transform", "translate(0," + -10 + ")")
        .selectAll("text")
        .data(consoleGenerations)
        .enter().append("text")
        .attr("x", function (d) {
            return xGenerations(d.name);
        })
        .attr("text-anchor", "middle")
        .text(function (d) {
            return d.name;
        });

handle = slider.insert("circle", ".track-overlay")
        .attr("class", "handle")
        .attr("r", 9)
        .attr("cx", 80);

slider.append("text")
        .attr("class", "currentYearDisplay")
        .attr("x", handle.attr('cx'))
        .attr("text-anchor", "middle")
        .attr("y", 30)
        .text("" + currentYear);

d3.interval(function (elapsed) {
        if (animated && (+handle.attr("cx") < sliderWidth)) {
            handle.attr("cx", Math.min(+handle.attr("cx") + sliderWidth / 500, sliderWidth));
            dateChange(xTime.invert(handle.attr("cx")));
        }
    }, 50);

function playPause() {
        animated = !animated;
        playPauseButton.attr("xlink:href", animated ? "https://i.imgur.com/GQYRQQv.png" : "https://i.imgur.com/twrr0MN.png");
        //d3.event.stopPropagation();
    }

function dateChange(h) {
        currentYear = h.getFullYear();
        var month = h.getMonth();
        totalSales = 0;

for (i = 0; i < nodes.length; i++) {

// console not appeared
            if (nodes[i].yearFrom > currentYear) {
                nodes[i].radius = 0;
                nodes[i].x = getCluster(nodes[i]).x;
                nodes[i].y = getCluster(nodes[i]).y;
            }

// console no more retailed
            else if (currentYear > nodes[i].yearTo) {
                nodes[i].radius = nodes[i].totalSales;

// console currently in retail
            } else {
                var fullMonthsOfRetail = (nodes[i].yearTo - nodes[i].yearFrom + 1) * 12;
                var currentMonthsOfRetail = ((currentYear - nodes[i].yearFrom) * 12) + month + 1;
                var timeRatio = currentMonthsOfRetail / fullMonthsOfRetail;
                nodes[i].radius = nodes[i].totalSales * salesInTime(timeRatio);
            }
            totalSales += nodes[i].radius;
        }
        //var radiusRatio = Math.sqrt(maxRadius / totalSales) * 15;
        var radiusRatio = 6;

// sales are represented by a surface so you need to sqrt the radius
        for (i = 0; i < nodes.length; i++) {
            nodes[i].radius = Math.sqrt(nodes[i].radius) * radiusRatio;
        }

simulation.nodes(nodes.filter(function (d) {
            return d.radius > 0
        })).alpha(.1).restart();

repaintCircles();

d3.select(".currentYearDisplay")
            .text("" + currentYear)
            .attr('x', handle.attr('cx'));
    }

function groupBy() {
        groupedByGeneration = !groupedByGeneration;
        d3.select(".generationsLegend").attr('opacity', groupedByGeneration ? '1' : '0');
        d3.select(".manufacturersLegend").attr('opacity', groupedByGeneration ? '0' : '1');
        d3.select("#groupButton").text(groupedByGeneration ? "Group by Manufacturer" : "Group by Generation / Release date");
        recomputeClusters(groupedByGeneration ? 8 : 5);

simulation.nodes(nodes.filter(function (d) {
            return d.radius > 0
        })).alpha(.5).restart();

repaintCircles();
    }

</script>
</body>
</html>

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

https://d3js.org/d3-scale-chromatic.v0.3.min.js