nuviun's Wearable Health Innovation Scoring 2

<!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 	{
				font-family:Georgia,serif;
	color: #e41c53;
	  font-size: 50px;
	font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 0;
			}
			
			p  	{
				font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        margin-top: .5em; color: #1d9ebf;
			}

li {
				font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        margin-top: .5em; color: #1d9ebf;
}

a {
font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 9px;
        margin-top: .5em; color: grey;

}

body{
			padding-left: 25px;
			margin-top: 10px;
			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: #646567;
		}

.hbar:hover text{
			opacity: 1;
		}

</style>
</head>
<body>

<h1>nuviun's Wearable Health Innovation Scoring</h1>

<p>Below, we tried to find most (if not all) of the wearable health players or products in the western 2015 marketplace. We plan to upldate this scoring continuously with your input (so please comment if we did forget to include you).
		<br> The list (which can be downloaded in this article) already gives our readers a great overview of the variety of solutions out there.

But we felt that wasn’t enough. We added a scoring system and gave each solution a score of our editor’s impression of how innovative the solutions are toward health. The score expresses our editor's subjective feeling of who will rule and drive the 2015 wearable health market.</br> 
	
	<li>The scoring ranges from 1 to 6: </li>

<li>1 says that our editorial team wasn’t impressed at all by the innovativeness of the wearable solution in question, </li>
	
	<li>6 means we are most intrigued by the solution's innovativeness towards health.</li>

<p>
		<a href="https://nuviun.com">Source: nuviun DataVision Unit</a>
		<br>
		<a href="https://benheubl.github.io">Data editor: Ben Heubl</a>
		<br>
		<a href="https://www.linkedin.com/profile/view?id=77766075&authType=NAME_SEARCH&authToken=QZYu&locale=en_US&trk=tyah&trkInfo=clickedVertical%3Amynetwork%2Cidx%3A2-1-2%2CtarId%3A1428656184353%2Ctas%3Aev">Research support: Evangelia Balanou</a></p>
	
	<script>
		window.onload = function(){
			var w = 600;
			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": 20,
			}

d3.csv("data3.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("right");

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)+10;
					}
				})
				.text(function(d){
					return d["innovationScore"];
				});

//add axis
				svg.append("g")
					.attr("class","x axis")
					.attr("transform","translate("+padding.left+","+(h-padding.bottom - 95) + ")")
					.attr("fill", "#1d9ebf")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding.left + ",0)")
					.attr("fill", "white")
					.call(yAxis);

})

};
	</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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