Skip to content

Instantly share code, notes, and snippets.

@bricedev

bricedev/README.md

Last active January 31, 2024 18:31
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save bricedev/0d95074b6d83a77dc3ad to your computer and use it in GitHub Desktop.
Save bricedev/0d95074b6d83a77dc3ad to your computer and use it in GitHub Desktop.
Download ZIP
Grouped bar chart
Raw
data.json
[
{
"categorie": "Student",
"values": [
{
"value": 0,
"rate": "Not at all"
},
{
"value": 4,
"rate": "Not very much"
},
{
"value": 12,
"rate": "Medium"
},
{
"value": 6,
"rate": "Very much"
},
{
"value": 0,
"rate": "Tremendously"
}
]
},
{
"categorie": "Liberal Profession",
"values": [
{
"value": 1,
"rate": "Not at all"
},
{
"value": 21,
"rate": "Not very much"
},
{
"value": 13,
"rate": "Medium"
},
{
"value": 18,
"rate": "Very much"
},
{
"value": 6,
"rate": "Tremendously"
}
]
},
{
"categorie": "Salaried Staff",
"values": [
{
"value": 3,
"rate": "Not at all"
},
{
"value": 22,
"rate": "Not very much"
},
{
"value": 6,
"rate": "Medium"
},
{
"value": 15,
"rate": "Very much"
},
{
"value": 3,
"rate": "Tremendously"
}
]
},
{
"categorie": "Employee",
"values": [
{
"value": 12,
"rate": "Not at all"
},
{
"value": 7,
"rate": "Not very much"
},
{
"value": 18,
"rate": "Medium"
},
{
"value": 13,
"rate": "Very much"
},
{
"value": 6,
"rate": "Tremendously"
}
]
},
{
"categorie": "Craftsman",
"values": [
{
"value": 6,
"rate": "Not at all"
},
{
"value": 15,
"rate": "Not very much"
},
{
"value": 9,
"rate": "Medium"
},
{
"value": 12,
"rate": "Very much"
},
{
"value": 3,
"rate": "Tremendously"
}
]
},
{
"categorie": "Inactive",
"values": [
{
"value": 6,
"rate": "Not at all"
},
{
"value": 6,
"rate": "Not very much"
},
{
"value": 6,
"rate": "Medium"
},
{
"value": 2,
"rate": "Very much"
},
{
"value": 3,
"rate": "Tremendously"
}
]
}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x0)
.tickSize(0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var color = d3.scale.ordinal()
.range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);
var svg = d3.select('body').append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(error, data) {
var categoriesNames = data.map(function(d) { return d.categorie; });
var rateNames = data[0].values.map(function(d) { return d.rate; });
x0.domain(categoriesNames);
x1.domain(rateNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(categorie) { return d3.max(categorie.values, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style('opacity','0')
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style('font-weight','bold')
.text("Value");
svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');
var slice = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform",function(d) { return "translate(" + x0(d.categorie) + ",0)"; });
slice.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.rate); })
.style("fill", function(d) { return color(d.rate) })
.attr("y", function(d) { return y(0); })
.attr("height", function(d) { return height - y(0); })
.on("mouseover", function(d) {
d3.select(this).style("fill", d3.rgb(color(d.rate)).darker(2));
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.rate));
});
slice.selectAll("rect")
.transition()
.delay(function (d) {return Math.random()*1000;})
.duration(1000)
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
//Legend
var legend = svg.selectAll(".legend")
.data(data[0].values.map(function(d) { return d.rate; }).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
.style("opacity","0");
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d); });
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return d; });
legend.transition().duration(500).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment