Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active March 17, 2017 01:59
Show Gist options
  • Save tomshanley/80ecb43a518f148243ba64f0f4115a3e to your computer and use it in GitHub Desktop.
Save tomshanley/80ecb43a518f148243ba64f0f4115a3e to your computer and use it in GitHub Desktop.
Download ZIP
bar chart matrix
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/d3-scale-cluster.min.js"></script>
<style>
body { margin:0;top:0;right:0;bottom:0;left:0;font-family:sans-serif }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
const data = [
{
"familyType": "Couple over 50",
"disadvantage": "Health",
"percentage": 0.15
},
{
"familyType": "Couple under 50",
"disadvantage": "Health",
"percentage": 0.04
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Health",
"percentage": 0
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Health",
"percentage": 0.04
},
{
"familyType": "Couple over 50",
"disadvantage": "Education",
"percentage": 0.17
},
{
"familyType": "Couple under 50",
"disadvantage": "Education",
"percentage": 0.13
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Education",
"percentage": 0.09
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Education",
"percentage": 0.18
},
{
"familyType": "Couple over 50",
"disadvantage": "Housing",
"percentage": 0.19
},
{
"familyType": "Couple under 50",
"disadvantage": "Housing",
"percentage": 0.11
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Housing",
"percentage": 0.13
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Housing",
"percentage": 0.12
},
{
"familyType": "Couple over 50",
"disadvantage": "Employment",
"percentage": 0.15
},
{
"familyType": "Couple under 50",
"disadvantage": "Employment",
"percentage": 0.11
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Employment",
"percentage": 0.07
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Employment",
"percentage": 0.17
},
{
"familyType": "Couple over 50",
"disadvantage": "Income",
"percentage": 0.17
},
{
"familyType": "Couple under 50",
"disadvantage": "Income",
"percentage": 0.19
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Income",
"percentage": 0.16
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Income",
"percentage": 0.09
},
{
"familyType": "Couple over 50",
"disadvantage": "Connectedness",
"percentage": 0.24
},
{
"familyType": "Couple under 50",
"disadvantage": "Connectedness",
"percentage": 0.18
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Connectedness",
"percentage": 0.24
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Connectedness",
"percentage": 0.21
},
{
"familyType": "Couple over 50",
"disadvantage": "Material disadvantage",
"percentage": 0.13
},
{
"familyType": "Couple under 50",
"disadvantage": "Material disadvantage",
"percentage": 0.14
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Material disadvantage",
"percentage": 0.11
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Material disadvantage",
"percentage": 0.11
},
{
"familyType": "Couple over 50",
"disadvantage": "Crime",
"percentage": 0.17
},
{
"familyType": "Couple under 50",
"disadvantage": "Crime",
"percentage": 0.18
},
{
"familyType": "Single parent, child under 18",
"disadvantage": "Crime",
"percentage": 0.01
},
{
"familyType": "Couples, child under 18",
"disadvantage": "Crime",
"percentage": 0.08
}
];
const width = 400;
const height = width;
const margin = {"top": 150, "left": 200, "right": 150, "bottom": 50};
var nestByFamilyType = d3.nest()
.key(function(d){ return d.familyType; })
.sortKeys(d3.ascending)
.entries(data);
var columnWidth = width/nestByFamilyType.length;
var maxPercentage = d3.max(data, function(d){ return d.percentage; });
var scale = d3.scaleLinear()
.domain([0,maxPercentage]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
var chart = svg.append("g")
.attr("transform", "translate(" + (margin.left) + "," + margin.top + ")");
var columnHeader = chart.append("g")
.attr("transform", "translate(0,0)");
var columnLabels = columnHeader.selectAll("g")
.data(nestByFamilyType)
.enter()
.append("g")
.attr("transform", function(d, i) {return "translate(" + (columnWidth * i) +",0)"; });
columnLabels.append("text")
.text(function(d) { return d.key })
.attr("transform", "translate(20)rotate(-45)")
var nestByDisadvantage = d3.nest()
.key(function(d){ return d.disadvantage; })
.sortKeys(d3.ascending)
.sortValues(function(a,b) { return a.familyType < b.familyType; })
.entries(data);
console.log(nestByDisadvantage.length);
var rowHeight = height/nestByDisadvantage.length
scale.range([0,rowHeight]);
nestByDisadvantage.forEach(function(d, i) {
var rowG = chart.append("g")
.attr("transform", "translate(0," + (i * rowHeight) + ")");
var percentages = []
d.values.forEach(function(d,i){
percentages[i] = d.percentage;
})
percentages.sort();
var colour = d3.scaleOrdinal()
.range(['#f1eef6','#d7b5d8','#df65b0','#ce1256'])
.domain(percentages);
rowG.append("text")
.text(d.key)
.attr("x", 0)
.attr("y", rowHeight - 7)
.style("text-anchor", "end");
var boxes = rowG.selectAll("g")
.data(d.values)
.enter()
.append("g")
.attr("transform", function(d, i) {return "translate(" + (columnWidth * i) +",0)"; });
var barWidth = columnWidth * 0.9;
boxes.append("rect")
.attr("x", (columnWidth - barWidth)/2)
.attr("y", function(d) { return rowHeight - scale(d.percentage); })
.attr("width", barWidth)
.attr("height", function(d) { return scale(d.percentage); })
.style("fill", function(d){ return colour(d.percentage); })
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment