InteractiveDataWeb

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
         
		<style type="text/css">
		 div.bar {
			display: inline-block;
			width: 20px;
			height: 75px;   /* We'll override height later */
			background-color: pink; }
			
		
		.inactive, .tentative {
       	stroke: darkgray;
		stroke-width: 2px;
		stroke-dasharray: 5 5;
		}
		.tentative {
		 opacity: .5;
		}
		.active {
		 stroke: black;
		 stroke-width: 4px;
		 stroke-dasharray: 1;
		}
		
		
		
		</style>
		
		<script src="https://d3js.org/d3.v3.js"></script>
		
		<script>
		var dataset = [ 5, 10, 15, 20, 25 ];
		
		
		function draw_simple_bar_inSVG(){
		//Width and height
		var w = 500;
		var h = 100;
		var barPadding =1;
		//Create SVG element
		var svg = d3.select("body")
            .append("svg")
            .attr("width", w/2)
            .attr("height", h);
		
		var svg2 = d3.select("body")
            .append("svg")
			.attr("width", w/2)
            .attr("height", h)
			
		   
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x", function(d,i){ return i*(w/dataset.length)})
		   .attr("y", function(d){return  h-d*4})
		   .attr("width", w/dataset.length-barPadding)
		   .attr("height", function(d){return d*4 })
		   .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";})
		   
		svg2
		.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x", function(d,i){ return i*(w/dataset.length)})
		   .attr("y", function(d){return  h-d*4})
		   .attr("width", w/dataset.length-barPadding)
		   .attr("height", function(d){return d*4 })
		   .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";})
				
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")		   
		   .text(function(d) {
            return d;   })
			.attr("x", function(d, i) {   return i * (w / dataset.length)+5;  })
		   .attr("y", function(d) {	return h - (d * 4)+15; })
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "11px")
		    .attr("fill", "red");
					
		   
		 
		   
		
		};		
		function draw_simple_bar_in_div(){
		
		var div = d3.select("body").selectAll("div");	
        
		div.data(dataset)
            .enter()
			.append("div")
			.attr("class", "bar")
			.style("height", function(d) {
        var barHeight = d * 5;
        return barHeight + "px";
		}); 	
		};
		
		function making_scatterplot(){
		
		var w = 1000;
		var h = 200;
		var barPadding =1;
		var padding=20;
		//Dynamic, random dataset
		var dataset = [];
		var numDataPoints = 50;
		var xRange = Math.random() * 1000;
		var yRange = Math.random() * 1000;
		for (var i = 0; i < numDataPoints; i++) {
			var newNumber1 = Math.floor(Math.random() * xRange);
			var newNumber2 = Math.floor(Math.random() * yRange);
			dataset.push([newNumber1, newNumber2]);
}	  
		// Setting Up Dynamic Scales
		var xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                     .range([0, w-padding*2]);
		var yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([h-padding,padding]);			 
		var rScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([2, 5]);			 
		
		//Create SVG element
		var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
		
		svg.selectAll("circle")  // <-- No longer "rect"
		.data(dataset)
		.enter()
		.append("circle")     // <-- No longer "rect"
		.attr("cx", function(d) {
        return xScale(d[0]);
		})
		.attr("transform", "translate(25,0)")
		.attr("cy", function(d) {
        return yScale(d[1]);
		})
		.attr("r", function(d) {
        return rScale(d[1]);
		});
		
		svg.selectAll("text")  // <-- Note "text", not "circle" or "rect"
		.data(dataset)
		.enter()
		.append("text")     // <-- Same here!
		 .text(function(d) {
        return d[0] + "," + d[1];  })
		 .attr("x", function(d) {
        return xScale(d[0]);   })
		.attr("transform", "translate(25,0)")
		.attr("y", function(d) {
        return yScale(d[1]);  })
		.attr("font-family", "sans-serif")
		.attr("font-size", "11px")
		.attr("fill", "red");
		
		// add the x Axis
		svg.append("g")
		.attr("transform", "translate(25,180)")
      .call(d3.axisBottom(xScale));
		svg.append("g")
	   .attr("transform", "translate(25,0)")		
      .call(d3.axisLeft(yScale));
		}
		
		</script>
		
    </head>
    <body>
	
	<p x="10">Drawing a single div!</p><br>
	<button type="button" onclick="draw_simple_bar_in_div()">Insert div_bar!</button><br>
	<p>Drawing a single bar in a SVG!</p>
	<button type="button" onclick="draw_simple_bar_inSVG()">draw_simple_bar_inSVG!</button><br>
	<p>Making a Scatterplot!</p>
	<button type="button" onclick="making_scatterplot()">making_scatterplot!</button><br>
	
	
    </body>
</html>

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