octavio - assignment 4

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        
        <style type="text/css">
			
			body {
				background-color: #ffffff;
			}

svg {
				background-color: white;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
            rect:hover {
				fill: #adff2f;
			}
            
            .y.axis path,
			.y.axis line {
				opacity: 0;
			}

</style>
        
	</head>
	<body>
        <h1>Some databases used to test different machine learning algorithms</h1>
        <p>In machine learning there are many types of classifiers. A performance evaluation
        of 179 classifiers using 121 datasets was performed </p>
        <p>All information can be found here:
        https://machinelearningmastery.com/use-random-forest-testing-179-classifiers-121-datasets/</p>

rect=svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            
            rect.attr("y",function(d){
                return heightScale(d.RelationName);
            })
            .attr("height",heightScale.rangeBand())
            .attr("x",padding[3])
            .attr("width",function(d){
                return widthScale(d.nVars);
            })
            .attr("fill","green")
            .append("title")
            .text(function(d){
                return d.RelationName + "'s study used " + d.nVars + " features";
            })
            
            	svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);
                
                	svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

});
            
            d3.select("body")
            .append("p")
            .text("Each bar corresponds to an experiment (scroll over for experiment title) and the height of the bar corresponds to the number of features being studied in that experiment")
		</script>

</body>
</html>

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

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