D3 Examples - Sortable Heatmap Table & Bar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable Heatmap and Bar Chart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
    <script type="text/javascript" src="stupidtable.min.js"></script>
​
​
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
​
    <style>
​
​
​
        #chart {
​
            margin-top: 38px;
            font-family: Lato, arial, sans-serif;
            font-size: 11px;
            font-style: normal;
            font-weight: 300;
            letter-spacing: normal;
            line-height: 29.450000762939453px;
            text-transform: none;
            color: #7A7A7A !important;
        }
​
​
        th {
            cursor: pointer;
            text-align: left;
            font-family: Montserrat;
            font-size: 10px;
            font-style: normal;
            font-weight: normal;
            letter-spacing: -0.5px;
            line-height: 29.25px;
            text-transform: uppercase;
            color: darkred;
            text-decoration: underline;
        }
​
        td {
            font-family: Lato, arial, sans-serif;
            font-size: 11px;
            font-style: normal;
            font-weight: 300;
            letter-spacing: normal;
            line-height: 29.450000762939453px;
            text-transform: none;
            color: #7A7A7A;
​
        }
​
        h1 {
            text-align: center;
            font-family: Lato, sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 300;
            letter-spacing: 6px;
            line-height: 58px;
            text-transform: uppercase;
            color: #B0925A;
        }
​
        p {
            font-family: Lato, sans-serif;
            font-size: 13px;
            font-style: normal;
            font-weight: bold;
            letter-spacing: 2px;
            line-height: 24px;
            text-transform: none;
            color: #B0925A !important;
​
        }
​
        a {
            text-decoration: none !important;
​
        }
​
​
        div.tooltip {
            position: absolute;
            text-align: left;
            padding: 4px;
            font-family: Lato, arial, sans-serif;
            font-size: 14px;
            background: #eee;
            border-radius: 2px;
            border: 1px solid gray;
            pointer-events: none;
        }
​
​
​
    </style>
</head>
<body>
<h1>Worldwide Smartphone Sales to End Users by Vendor 2015-2016</h1>
<p>SORTABLE HEATMAP:</p>
<div id="table"></div>
<p>BAR CHART:</p>
<div id="chart"></div>
<a href="https://www.gartner.com/newsroom/id/3609817"><p><span style="font-size: 9px; color: #7A7A7A">Source: Gartner Press Release (2017)</span></p></a>
<script type="text/javascript">
​
​
​
    var margin = {
        top: 1,
        right: 25,
        bottom: 10,
        left: 110
    };
​
    var w = 550 - margin.left - margin.right;
    var h = 220 - margin.top - margin.bottom;
​
    var widthScale = d3.scaleLinear()
        .range([0, w]);
​
    var heightScale = d3.scaleBand()
        .rangeRound([0, h])
        .paddingInner(0.05);
​
​
​
    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
​
​
​
​
​
    d3.csv("smartphones-statistics.csv", function (error, data) {
        if (error) {
            console.log("An error occured while loading data");
        }
​
        console.log(data);
​
​
        widthScale.domain([0, d3.max(data, function (d) {
            return +d.Share2016;
        })]);
​
        heightScale.domain(data.map(function (d) {
            return d.Vendor;
        }));
​
​
        var myArray = [];
​
        data.forEach(function (d, i) {
​
            d.unitsDifference = parseInt(d.Units2016, 10) - parseInt(d.Units2015, 10);
            d.marketShareDifference = parseInt(d.Share2016, 10) - parseInt(d.Share2015, 10);
​
​
            console.log("This is units difference: ", d.unitsDifference);
            console.log("This is market share difference: ", d.marketShareDifference);
​
            myArray.push([d.Vendor, d.Share2015, d.Share2016, d.marketShareDifference, d.Units2015, d.Units2016, d.unitsDifference]);
            console.log(myArray);
​
        });
​
        myArray.sort(function (a, b) {                 //This will sort data
            return a[2] - b[2];         //in descending order
        })
​
​
        var table = d3.select("#table").append("table");
        var header = table.append("thead").append("tr");
​
​
        header
            .selectAll("th")
            .data(["Vendor", "Market Share 2015", "Market Share 2016",
                "Difference", "Units sold in 2015 (000's)", "Units Sold in 2016 (000's)",
                "Difference"])
            .enter()
            .append("th")
            .text(function (d) {
                return d;
            });
​
        var tBody = table.append("tbody");
​
        var rows = tBody.selectAll("tr")
            .data(myArray)
            .enter()
            .append("tr")
​
​
        var maxShare2016 = d3.max(myArray, function (d) {
            return +d[2];
        })
​
​
        var color = d3.scaleLinear()
            .domain([0, maxShare2016])
            .range(["#E6F5FF", "#0099FF"])
            .interpolate(d3.interpolateHcl);
​
​
​
​
        var cells = rows
            .selectAll("td")
            .data(function (d) {
                return d;
            })
            .enter()
            .append("td")
            .style("background-color", function (d, i) {
                if (i === 2) {
                    return color(d);
                }
            })
            .text(function (d) {
                return d;
            })
​
        d3.select("#table")
            .selectAll("th")
            .data(["string", "int", "int", "int", "int", "int", "int",])
            .attr("data-sort", function (d) {
                return d;
            })
​
​
        $("table").stupidtable();
​
        var mean = d3.mean(myArray, function (d) {
            return +d[2];
        });
​
        console.log(mean)
​
        var div = d3.select("body")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);
​
        var barGroup = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + "0)")
​
​
        var bars = barGroup.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", 0)
            .attr("y", function (d) {
                return heightScale(d.Vendor);
            })
            .attr("width", function (d) {
                return widthScale(+d.Share2016)
            })
            .attr("height", heightScale.bandwidth() / 1.1)
            .style("fill", function (d, i) {
                return color(i);
            })
            .on("mouseover",function (d){
​
                div.transition()
                    .duration(200)
                div
                    .style("opacity", .9)
                    .html("Vendor: " + "<strong>" + d.Vendor + "</strong>" + "<br>" + "Market share in 2016: " + d.Share2016 + "%")
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
                
                d3.select(this)
                    .style("fill", "#93ceff")
            })
            .on("mouseout", function(){
                d3.select(this)
                    .transition()
                    .duration(50)
                    .style("fill", function(d,i){
                        return color(i);
                    })
​
                d3.select(div).remove()
​
            })
​
​
        var textGroupY = svg.append("g")
            .attr("transform", "translate(-95,16)")
​
​
        var textY = textGroupY.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function (d) {
                return d.Vendor;
            })
            .attr("x", 100)
            .attr("y", function (d) {
                return heightScale(d.Vendor);
            })
            .attr("text-anchor", "start")
            .style("fill", "#7A7A7A");
​
​
​
        var xAxis = d3.axisBottom(widthScale)
            .ticks(4)
​
            .tickSizeOuter(0)
            .tickSizeInner(0)
​
​
​
        barGroup.append("g")
            .attr("class", "x axis")
            .attr("shape-rendering", "crispEdges")
            .attr("transform", "translate(" + 0+ "," + h + ")")
            .call(xAxis)
​
​
    })
​
​
​
</script>
​
</body>
</html>
    