Old school D3 from simpler times

All examples By author By category About

manojchandrak

Full window Github gist

Visualization1

Manoj Chandra Kompalli Assignment 2 Visualization1

Embedding an image in Markdown:

R image

Embedding R code in Markdown:


 # Taking data for 15 values
data<-c(14, 11, 4, 15, 10, 4, 16, 20, 13, 4, 6, 15, 27, 34, 32)
 # Plotting a bargraph for the above vector in brown
barplot(data,col="brown")

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bar graph with Random numbers </title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
		div.bar 
		{
    		display: inline-block;
    		width: 20px;
		height: 75px;   /*Gets overriden by D3-assigned height below*/
		margin-right: 2px;
    		background-color: brown;
		}
		</style>
    </head>
    <body>
        <script type="text/javascript">
           var dataset = [];  						 //Initialize empty array
			for (var i = 0; i < 15; i++) {			 //Looping 15 times
				var newNumber = Math.round(Math.random() * 35);  //New random integer (0-35)
				dataset = dataset.concat(newNumber); //Add new number to array
			}
d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
	.style("height", function(d) {
    var barHeight = d * 3;  //Scale up by factor of 3
    return barHeight + "px";
});
        </script>
    </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bar graph with Random numbers </title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
        div.bar 
        {
            display: inline-block;
            width: 20px;
        height: 75px;   /*Gets overriden by D3-assigned height below*/
        margin-right: 2px;
            background-color: brown;
        }
        </style>
    </head>
    <body>
        <script type="text/javascript">
           var dataset = [];                         //Initialize empty array
            for (var i = 0; i < 15; i++) {           //Looping 15 times
                var newNumber = Math.round(Math.random() * 35);  //New random integer (0-35)
                dataset = dataset.concat(newNumber); //Add new number to array
            }
d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
    var barHeight = d * 3;  //Scale up by factor of 3
    return barHeight + "px";
});
        </script>
    </body>
</html>  
    

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

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