Skip to content

Instantly share code, notes, and snippets.

@thole

thole/index.html

Last active November 1, 2015 18:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thole/8370bc66333416c3c663 to your computer and use it in GitHub Desktop.
Save thole/8370bc66333416c3c663 to your computer and use it in GitHub Desktop.
Download ZIP
yearly bar chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<style>
rect {
fill: steelblue;
}
text {
font-size : 6pt;
font-family:sans-serif;
fill:steelblue;
}
.month {
float: left;
}
.monthcontainer {
display: inline-block;
width: 880px;
}
</style>
</head>
<body>
<div class="monthcontainer">
<div class="month" id="bc_jan"></div>
<div class="month" id="bc_feb"></div>
<div class="month" id="bc_mar"></div>
<div class="month" id="bc_apr"></div>
<div class="month" id="bc_sep"></div>
<div class="month" id="bc_oct"></div>
<div class="month" id="bc_nov"></div>
<div class="month" id="bc_dec"></div>
</div>
</body>
<script>
function generateMonthlyData(size){
var objects = [];
for(var i=0; i < size;i++){
var object = {};
object.value = Math.round(Math.random()*10+5);
objects.push(object)
}
return objects;
}
function insertDailyBarChart(element, month, data){
var svg = element.append("svg");
svg.attr("width","220")
svg.attr("height","120")
var chart = svg.append("g")
.attr("class", "chart")
.attr("width", 20 * data.length)
.attr("height", 50);
var x = d3.scale.linear()
.domain([0, d3.max(data,function(d){return d.value;})])
.range([0, 50]);
chart.attr("transform","matrix(1 0 0 -1 0 100)");
svg.append("text")
.attr("x",15)
.attr("y",110)
.text(month + " - " + d3.sum(data,function(d){return d.value}) + " Mails");
chart.append("rect")
.attr("x",7)
.attr("width",31*7-7)
.attr("height",1.5)
.style("fill-opacity",0.5);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", 5)
.attr("x", function(d, i) { return i * 7; })
.attr("width", 3)
.attr("height", 0)
.transition()
.delay(function(d, i) { return i * 15; })
.attr("height", function(d) {return x(d.value);})
}
insertDailyBarChart(d3.select("#bc_jan"),"Januar", generateMonthlyData(31));
insertDailyBarChart(d3.select("#bc_feb"),"Februar", generateMonthlyData(29));
insertDailyBarChart(d3.select("#bc_mar"),"März", generateMonthlyData(31));
insertDailyBarChart(d3.select("#bc_apr"),"April", generateMonthlyData(30));
insertDailyBarChart(d3.select("#bc_may"),"Mai", generateMonthlyData(31));
insertDailyBarChart(d3.select("#bc_jun"),"Juni", generateMonthlyData(30));
insertDailyBarChart(d3.select("#bc_jul"),"Juli", generateMonthlyData(31));
insertDailyBarChart(d3.select("#bc_aug"),"August", generateMonthlyData(31));
insertDailyBarChart(d3.select("#bc_sep"),"September", generateMonthlyData(30));
insertDailyBarChart(d3.select("#bc_oct"),"Oktober", generateMonthlyData(31));
insertDailyBarChart(d3.select("#bc_nov"),"November", generateMonthlyData(30));
insertDailyBarChart(d3.select("#bc_dec"),"Dezember", generateMonthlyData(31));
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment