Link to the D3 random barchart generation : /meysamabl/a949c2c7876b19723bfa
Link to the web page: Click here
Embedding Bar chart from R:
Embedding R code in Markdown:
# Define dataset
mydata <- c(25,7,5,26,11,8,25,14,23,19,14,11,22,29,11,13,12,17,18,10,24,18,25,9,3)
# command for generating a png file
png(filename="C:/Users/meysamabl/Desktop/barchart.png", height=295, width=300, bg="white")
# generate the bar chart into the png file
barplot(mydata);
# Turn off device driver (to flush output to png)
dev.off()
xxxxxxxxxx
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>InfoVis-Meysam by meysamabl</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="d3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">InfoVis-Meysam</h1>
<h2 class="project-tagline">Information Visualization</h2>
</section>
<strong>R generated Image: </strong>
<img height="150" width="300" src="barchart.png">
<div class="container">
<div class="row">
<div class="col-md-4">
<script type="text/javascript">
var dataset = []; //Initialize empty array
for (var i = 0; i < 25; i++) { //Loop 25 times
var newNumber = Math.random() * 30; //New random number (0-30)
dataset.push(newNumber); //Add new number to array
}
d3.select("body").append("a")
.text(" Click here to refresh page")
.attr("href", "index.html");
d3.select("body").append("h3")
.text("Random Bar chart")
.style("margin", 10);
d3.select("body").selectAll("span")
.data(dataset)
.enter()
.append("span")
.attr("class", "bar")
.style("height", function(d) {
return (d *5) + "px";
});
d3.select("body").append("div").style("margin-bottom", 50);
</script>
</div>
</div>
</div>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js