<body></body>
body {
background-color: #CCD1D1;
}
svg {
background-color: white;
// rect {
// fill: SteelBlue;
// transition: fill 0.2s ease-in;
// &:hover {
// fill: #82E0AA;
// }
// }
// .highlight {
// fill: DarkOrange;
// }
}
g.bar text {
font-family: sans-serif;
font-size: 11px;
fill: white;
font-style: bold;
text-anchor: middle;
}
.axis {
path, line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
text {
font-family: sans-serif;
font-size: 11px;
}
}
View Compiled
var dataset = [ 17.8, -2.0, 2.3, 9.4, 27.1, 8.7, 12.2, 8.2, 16.4];
//Width, height, padding
var w = 600;
var h = 250;
var padding = 25;
//Configure x and y scale functions
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([ padding, w - padding ], 0.15);
var yScale = d3.scale.linear()
.domain([ 0, d3.max(dataset) ])
.rangeRound([ h - padding, padding ]);
//Configure y axis generator
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create groups
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("class", "bar")
.attr("transform", function(d, i) {
return "translate(" + xScale(i) + ",0)";
})
.on("mouseover", function() {
d3.select(this).select("rect") //Selects the rect in this group
.attr("fill", "#82E0AA");
})
.on("mouseout", function() {
d3.select(this).select("rect") //Selects the rect in this group
.attr("fill", function(d) {
if (d > 20) {
return "DarkOrange";
}
return "#AED6F1";
});
});
//Add bar to each group
var rects = groups.append("rect")
.attr("x", 0) //All rects are at zero, relative to their groups
.attr("y", function(d) {
return h - padding;
})
.attr("width", xScale.rangeBand())
.attr("height", 0)
.attr("fill", "#AED6F1");
//Add label to each group
groups.append("text")
.attr("x", xScale.rangeBand() / 2)
.attr("y", function(d) {
return yScale(d) + 20;
})
.text(function(d) {
return d;
})
//Transition rects into place
rects.transition()
.delay(function(d, i) {
return i * 100;
})
.duration(1200)
.attr("y", function(d) {
return yScale(d);
})
.attr("height", function(d) {
return h - padding - yScale(d);
})
// .filter(function(d) {
// if (d > 20) {
// return true;
// }
// return false;
// })
// .attr("fill", "DarkOrange")
;
//Create y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.attr("opacity", 0)
.call(yAxis)
.transition()
.delay(2000)
.duration(1500)
.attr("opacity", 1.0);
This Pen doesn't use any external CSS resources.