Skip to content

Instantly share code, notes, and snippets.

@psychometry

psychometry/.block

Last active June 19, 2018 16:29
Show Gist options
  • Save psychometry/aa56a7dfe850e07da30854b1098c09a9 to your computer and use it in GitHub Desktop.
Save psychometry/aa56a7dfe850e07da30854b1098c09a9 to your computer and use it in GitHub Desktop.
Download ZIP
grouped bar
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="chart"></div>
<script>
// Feel free to change or delete any of the code you see in this editor!
var data2 = [
{
cat: "Student",
"Tremendously":0,
"Very much":6,
"Medium":12,
"Not very much":4,
"Not at all":0
},
{
cat: "Liberal Profession",
"Tremendously":6,
"Very much":18,
"Medium":13,
"Not very much":21,
"Not at all":1
}
];
var data = [
{
cat: "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"
}
]
},
{
cat: "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"
}
]
}
]
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.scaleBand().rangeRound([0,width]).paddingInner(0.1);
var x1 = d3.scaleBand();
var y = d3.scaleLinear().rangeRound([height, 0]);
var xAxis = d3.axisBottom(x0);
var yAxis = d3.axisLeft(y);
var categoriesNames = data2.map(function(d) { return d.cat; });
var rateNames = Object.keys(data2[0]).slice(1);
x0.domain(categoriesNames);
x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data2, function(cat) { return d3.max(Object.values(cat).slice(1)); })]);
var color =d3.scaleOrdinal(d3.schemeBlues[rateNames.length]);
var svg = d3.select('#chart').append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 500");
var chart= svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
chart.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "axis")
.call(yAxis.ticks(null, "s"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style('font-weight','bold')
.text("Value");
chart.append("g")
.selectAll("g")
.data(data2)
.enter().
append("g")
.attr("transform", function(d) { return "translate(" + x0(d.cat) + ",0)"; })
.selectAll("rect")
.data(function(d) {
console.log(Object.entries(d).slice(1));
return Object.entries(d).slice(1);})
.enter().append("rect")
.attr("x", function(d) { return x1(d[0]); })
.attr("y", function(d) { return y(d[1]); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height - y(d[1]); })
.attr("fill", function(d) { return color(d[0]); });
// chart.append("g")
// .selectAll("g")
// .data(data)
// .enter().
// append("g")
// .attr("transform", function(d) { return "translate(" + x0(d.cat) + ",0)"; })
// .selectAll("rect")
// .data(function(d) { return d.values;})
// .enter().append("rect")
// .attr("x", function(d) { return x1(d.rate); })
// .attr("y", function(d) { return y(d.value); })
// .attr("width", x1.bandwidth())
// .attr("height", function(d) { return height - y(d.value); })
// .attr("fill", function(d) { return color(d.rate); });
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment