wearable health rating final

<!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 are most (if not all) of the wearable health players or products in the western 2015 marketplace. We plan to update this scoring continuously, and want to integrate your opinion, so please leave comments below.
		<br> The list (which can be downloaded below the article) gives our readers a great overview of the variety of solutions out there.

But we felt that wasn’t useful enough. We added a scoring system and gave each of the tech company a score according to how innovative we feel their solutions are towards achieving and sustaining health. The score expresses our editor's subjective assessment.</br> 
	
	<li>The scoring ranges from 1 to 6: </li>

<li>1 means 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 = 500;
			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