All examples By author By category About

andressarg

Full window Github gist

Sortable Heatmap Table & Bar Chart

forked from edkiljak's block: Sortable Heatmap Table & Bar Chart

<!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>

<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);

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>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

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