D3 Examples - nuviun's Wearable Health Innovation Scoring

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nuviun's datavision unit</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
​
​
        h1  {
                color: #333333;
                font-size:30px;
                font-weight: bold;
                font-family: Helvetica;
                margin: 0;
            }
            
            p   {
                color:black;
                font-family: Georgia;
                font-size:14px;
                margin: 10px 0 10px 0;
            }
​
​
​
        body{
            padding-left: 25px;
            margin-top: 15px;
            font-family: Helvetica, Arial, sans-serif;
        }
    
        .axis path, .axis line{
            fill: none;
            stroke: grey;
        }
​
​
        text {
            font-family: Helvetica, Arial, sans-serif;
            font-size:10px;
        }
​
        .y path, .y line{
            opacity: 0;
        }
​
        .hbar{
            -webkit-transition: .5s all ease;
            -o-transition: .5s all ease;
            transition: .5s all ease;
        }
​
        .hbar text{
            opacity: 0.2;
            font-weight: none;
        }
​
        .hbar:hover rect {
            fill:white;
        }
​
        .hbar:hover text{
            opacity: 1;
        }
​
    </style>
</head>
<body>
​
    <h1>nuviun's Wearable Health Innovation Scoring</h1>
    
    <p>
        <a href="https://nuviun.com">Source: nuviun DataVision Unit</a>
        <br>
        <a href="https://benheubl.github.io">Editor: Ben Heubl</a> </p>
    
    <script>
        window.onload = function(){
            var w = 800;
            var h = 4000;
            var svg = d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);
            var padding = {
                "top": 0,
                "right": 80,
                "bottom": 0,
                "left": 250
            }
​
            d3.csv("data2.csv",function(data){
                console.log(data);
​
                data.sort(function(a,b){
                    return d3.descending(a["innovationScore"],b["innovationScore"]);
                })
​
                var xMax = d3.max(data,function(d){
                    return Number(d["innovationScore"]);
​
                })
​
​
                var xScale = d3.scale.linear()
                            .domain([1,xMax])
                            .range([0,w-padding["left"]-padding["right"]]);
​
                var yScale = d3.scale.ordinal()
                            .domain(data.map(function(d){
                                return d.names;
                            }))
                            .rangeRoundBands([padding.top,h-padding.bottom],0.1)
​
​
                var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(5);
​
                var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left");
​
                var bar = svg.selectAll("g")
                            .data(data)
                            .enter()
                            .append("g")
                            .attr("transform", function(d){
                                return "translate(0," + yScale(d.names)-10 + ")"
                            })
                            .attr("class","hbar")
​
                bar.append("rect")
                .attr({
                    "x":padding.left,
                    "y":function(d,i){
                        return yScale(d.names);
                    },
                    "width":function(d){
                        return xScale(d["innovationScore"]);
                    },
                    "height":yScale.rangeBand(),
                    "class":"bars",
                    "fill": function(d,i){
                        return "hsl(" + d["innovationScore2"] + ",100%,50%)";
                    }
                })
​
                bar.append("text")
                .attr({
                    "x":function(d){
                        return xScale(d["innovationScore"])+ padding.left+2;
                    },
                    "y":function(d,i){
                        return yScale(d.names)+12;
                    }
                })
                .text(function(d){
                    return d["innovationScore"];
                });
​
​
                //add axis
                svg.append("g")
                    .attr("class","x axis")
                    .attr("transform","translate("+padding.left+","+(h-padding.bottom - 110) + ")")
                    .attr("fill", "grey")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding.left + ",0)")
                    .call(yAxis);
​
​
            
​
​
            })
​
​
        };
    </script>
​
​
 
</body>
</html>
​
    