nuviun's Wearable Health Innovation Scoring - test

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

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

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