JJJ Hottest 100 Artists

README.md

Triple-J Hottest 100 Artists

This chart visualizes tracks by artists who have appeared most often in the Hottest 100. Each circle represents a track. Mouse-over a circle to see more information about the track. Mouse-over year/artist labels to highlight tracks for the year/artist. More...

Data Source

Wikipedia

Tools

• KNIME
• D3.js

License

This work is licensed under a Creative Commons Attribution 4.0 International License

chart.js

// The top-100 artist chart.
// Reusable chart definition - see http://bost.ocks.org/mike/chart/.
//
function artistChart() {
    var margin = {top: 30, right: 40, bottom: 30, left: 200},
        width = 1400,
        height = 1400,
        dataValues = function (d) {
            return d;
        },
        yearScale = d3.time.scale(),
        artistScale = d3.scale.ordinal(),
        positionScale = d3.scale.linear().domain([1, 100]),
        colourScale = d3.scale.linear().domain([1, 50, 100]).range(["red", "yellow", "white"]),
        summary = [],
        xAxis1 = d3.svg.axis().scale(yearScale).orient("top").ticks(d3.time.year, 1),
        xAxis2 = d3.svg.axis().scale(yearScale).orient("bottom").ticks(d3.time.year, 1),
        glyph = d3.svg.symbol(),
        radius = 5;

    function chart(selection) {
        selection.each(function (data) {

            // Convert data to standard representation greedily;
            // this is needed for non-deterministic accessors.
            data = data.map(function (d, i) {
                return dataValues.call(data, d, i);
            });

            // Calculate counts and medians.
            summary = d3.nest()
                .key(function (d) {
                    return d.Artist;
                })
                .rollup(function (d) {
                    return {
                        count: d.length, median: d3.median(d, function (d) {
                            return d.Position;
                        })
                    };
                })
                .entries(data);

            // Update the year scale.
            yearScale
                .domain(d3.extent(data, function (d) {
                    return d.Year;
                }))
                .range([width - margin.left - margin.right, 0]);

            // Update the positionScale.
            var diff = Math.abs(yearScale(new Date(2000, 1, 1)) - yearScale(new Date(2001, 1, 1))) * 0.9;
            positionScale
                .range([-diff / 2, diff / 2]);

            // Update the artist scale.
            var artists = summary.map(function (d) {
                return d.key;
            });
            artistScale
                .domain(artists)
                .rangePoints([0, height - margin.top - margin.bottom]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter().append("svg").append("g");
            gEnter.append("g").attr("class", "legend");
            gEnter.append("g").attr("class", "x axis top");
            gEnter.append("g").attr("class", "x axis bottom");
            gEnter.append("g").attr("class", "y axis");
            gEnter.append("g").attr("class", "glyphs");

            // Update the outer dimensions.
            svg.attr("width", width)
                .attr("height", height);

            // Update the inner dimensions.
            var g = svg.select("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            // X-axis.
            g.select(".x.axis.top")
                .attr("transform", "translate(0," + artistScale.range()[0] + ")")
                .call(xAxis1)
                .on("mouseover", yearMouseOver)
                .on("mouseout", axisMouseOut);
            g.select(".x.axis.bottom")
                .attr("transform", "translate(0," + artistScale.range()[artists.length - 1] + ")")
                .call(xAxis2)
                .on("mouseover", yearMouseOver)
                .on("mouseout", axisMouseOut);

            // Y-axis: use a custom axis as d3.axis doesn't work well with mouse-over.
            g.select(".y.axis")
                .attr("transform", "translate(" + yearScale.range()[1] + ",0)")
                .selectAll("text")
                .data(artists)
                .enter()
                .append("text")
                .text(function (d) {
                    return d;
                })
                .attr("x", -30)
                .attr("y", function (d) {
                    return artistScale(d)
                })
                .attr("dy", "0.3em")
                .on("mouseover", artistMouseOver)
                .on("mouseout", axisMouseOut);

            // Plot glyphs.
            g.select(".glyphs")
                .selectAll("path")
                .data(function (d) {
                    return d;
                })
                .enter()
                .append("path")
                .attr("transform", function (d) {
                    return "translate(" + X(d) + "," + Y(d) + ")";
                })
                .attr("d", glyph)
                .attr("class", function (d) {
                    return "artist" + artistScale.domain().indexOf(d.Artist) + " year" + d.Year.getFullYear();
                })
                .style("fill", function (d) {
                    return colourScale(d.Position)
                })
                .on("mouseover", glyphMouseOver)
                .on("mouseout", glyphMouseOut);

            // Legend: text.
            g.select(".legend")
                .attr("transform", "translate(-170,-20)")
                .selectAll("text")
                .data(colourScale.domain())
                .enter()
                .append("text")
                .text(function (d) {
                    return d;
                })
                .attr("x", function (d) {
                    return d;
                })
                .attr("dx", "0.3em")
                .attr("dy", "0.3em");

            // Legend: glyphs.
            g.select(".legend")
                .selectAll("circle")
                .data(colourScale.domain())
                .enter()
                .append("circle")
                .attr("cx", function (d) {
                    return d - radius;
                })
                .attr("cy", 0)
                .attr("r", radius)
                .style("fill", function (d) {
                    return colourScale(d)
                });
        });
    }

    // Display tooltip on mouse over glyph.
    function glyphMouseOver(d) {

        // Create and display tooltip.
        var x = d3.event.pageX + 5;
        var y = d3.event.pageY + 5;
        d3.select("#tooltip.track")
            .style("left", x + "px")
            .style("top", y + "px");
        d3.select("#tooltip.track #title")
            .text(d.Title);
        d3.select("#tooltip.track #artist")
            .text(d.Artist);
        d3.select("#tooltip.track #posyr")
            .text('#' + d.Position + ' (' + d.Year.getFullYear() + ')');
        d3.select("#tooltip.track").classed("hidden", false);
    }

    // Hide tooltip on mouse exit from glyph.
    function glyphMouseOut() {
        d3.select("#tooltip.track").classed("hidden", true);
    }

    // Handle mouse-over year axis label.
    function yearMouseOver() {

        // Get the year.
        var date = yearScale.invert(d3.mouse(this)[0]);
        var year = date.getMonth() > 6 ? date.getFullYear() + 1 : date.getFullYear();

        // Highlight this year's glyphs.
        d3.select(".glyphs")
            .selectAll("path")
            .style("opacity", 0.1);
        d3.selectAll(".year" + year)
            .style("opacity", 1.0);
    }

    // Handle mouse-over artist axis.
    function artistMouseOver(d, i) {

        // Highlight glyphs.
        d3.select(".glyphs")
            .selectAll("path")
            .style("opacity", 0.1);
        d3.selectAll(".artist" + i)
            .style("opacity", 1.0);

        // Create and display tooltip.
        var x = d3.event.pageX + 5;
        var y = d3.event.pageY + 20;
        var s = summary[i];
        d3.select("#tooltip.artist")
            .style("left", x + "px")
            .style("top", y + "px");
        d3.select("#tooltip.artist #artist")
            .text('#' + (i + 1) + ' ' + s.key);
        d3.select("#tooltip.artist #entries")
            .text(s.values.count + " entries");
        d3.select("#tooltip.artist #median")
            .text(s.values.median + " median");
        d3.select("#tooltip.artist").classed("hidden", false);
    }

    function axisMouseOut() {

        // Reset glyph opacity.
        d3.select(".glyphs")
            .selectAll("path")
            .style("opacity", null);

        // Hide tooltips.
        d3.select("#tooltip.artist").classed("hidden", true);
    }

    // The x-accessor for the path generator; yearScale ∘ xValue.
    function X(d) {
        return yearScale(d.Year) + positionScale(d.Position);
    }

    // The x-accessor for the path generator; artistScale ∘ yValue.
    function Y(d) {
        return artistScale(d.Artist);
    }

    chart.margin = function (_) {
        if (!arguments.length) return margin;
        margin = _;
        return chart;
    };

    chart.width = function (_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
    };

    chart.height = function (_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
    };

    chart.x = function (_) {
        if (!arguments.length) return xValue;
        xValue = _;
        return chart;
    };

    chart.y = function (_) {
        if (!arguments.length) return yValue;
        yValue = _;
        return chart;
    };

    chart.tracks = function (_) {
        if (!arguments.length) return dataValues;
        dataValues = _;
        return chart;
    };

    return chart;
}

// Process raw data.
function transformData(data) {
    var format = d3.time.format("%Y");
    data.forEach(function (d) {
        d.Year = format.parse(d.Year);
        d.Position = +d.Position;
    });

    return data;
}

// Call-back function after loading data.
function display(error, data) {

    if (error) {
        console.log(error);
        return;
    }

    var chart = artistChart()
        .tracks(function (d) {
            return d;
        });
    d3.select("#chart").datum(transformData(data)).call(chart);
}

// Read the data file.
queue()
    .defer(d3.csv, "jjj_hottest_100_artists.csv")
    .await(display);

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Triple-J's Hottest 100 Artists 1993 – 2015</title>

    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
</head>
<body>

<h1>Triple-J's Hottest 100 Artists 1993 – 2015</h1>

<p class="instructions">
    This chart visualizes tracks by artists who have appeared most often in the Hottest 100. Each circle represents
    a track. Mouse-over a circle to see more information about the track. Mouse-over year/artist labels to highlight
    tracks for the year/artist. <a href="http://www.vislives.com/2015/02/triple-j-hottest-100-artists-1993-2014.html"
                                   target="_blank">More...</a>
</p>

<div id="chart"></div>

<p><a href="http://vislives.com/" target="_blank">Chris Pudney</a>, 2015<br/>
    This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons
        Attribution 4.0 International License</a><br/>
    <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License"
                                                                             style="border-width:0"
                                                                             src="http://i.creativecommons.org/l/by/4.0/80x15.png"/></a>
</p>

<div id="tooltip" class="hidden track">
    <p><strong id="title"></strong></p>

    <p><span id="artist"></span></p>

    <p><span id="posyr"></span></p>

</div>

<div id="tooltip" class="hidden artist">
    <p><strong id="artist"></strong></p>

    <p><span id="entries"></span></p>

    <p><span id="median"></span></p>


</div>

<script src="chart.js" type="text/javascript"></script>

</body>

jjj_hottest_100_artists.csv

style.css

body {
    background-color: black;
    color: #eeeeee;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

/* unvisited link */
a:link {
    color: orange;
}

/* visited link */
a:visited {
    color: red;
}

/* mouse over link */
a:hover {
    color: yellow;
}

/* selected link */
a:active {
    color: darkorange;
}

p.instructions {
    width: 500px;
}

.axis path,
.axis line {
    fill: none;
    stroke: none;
}

text {
    fill: #eeeeee;
}

.y.axis text {
    text-anchor: end;
}

#tooltip {
    position: absolute;
    width: auto;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

#tooltip.hidden {
    display: none;
}

#tooltip p {
    margin: 0;
    color: black;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
}