Skip to content

Instantly share code, notes, and snippets.

@alandunning

alandunning/.block

Last active March 4, 2017 16:18
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 alandunning/51c76ec99c3ffee2fde6923ac14a4dd4 to your computer and use it in GitHub Desktop.
Save alandunning/51c76ec99c3ffee2fde6923ac14a4dd4 to your computer and use it in GitHub Desktop.
Download ZIP
Bubble Matrix Chart V4
Raw
.block
license: mit
Raw
data.csv
Deal Type 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016
Growth/Expansion £0.50M £17.4M £0.60M £9.5M £10.8M £3.0M £2.7M £135.4M £192.0M £287.3M
Pre/Accelerator/Incubator £0.02M £0.42M £0.21M £0.44M £0.31M £0.24M
Angel £1.1M £1.5M £0.63M £4.2M £10.4M £2.8M
Seed £0.42M £0.50M £0.31M £0.03M £0.30M £0.97M £1.7M £2.8M £3.6M £1.5M
Early stage VC £11.6M £18.0M £12.9M £5.5M £5.8M £11.0M £15.2M £10.0M £22.9M £18.1M
Later stage VC £7.3M £16.0M £0.85M £44.5M £17.9M £2.8M £14.9M £3.6M £16.8M
Grants £0.35M £0.10M £0.03M £2.0M £0.10M £0.03M £0.32M £0.19M
Corporate £0.05M £4.0M £0.20M £0.50M £1.5M
Acquisition Financing £2.4M £0.60M £23.4M £6.3M £155.2M
Recapitalization £15.0M
Raw
data.tsv
Deal Type Early Stage VC Later Stage VC Growth/Expansion Seed Recapitalization Acquisition Financing Grants Corporate Angel Pre/Accelerator/Incubator
2016 18.1 16.8 287.3 1.5 0 155.2 0.19 0 2.8 0.24
2015 22.9 3.6 192 3.6 0 6.3 0 0 10.4 0.31
2014 10 14.9 135.4 2.8 0 0 0.32 1.5 4.2 0.44
2013 15.2 2.8 2.7 1.7 0 0 0.03 0.5 0.63 0.21
2012 11 17.9 3 0.97 0 0 0.1 0 1.5 0.42
2011 5.8 0 10.8 0.3 0 0 2 0.2 0 0.02
2010 5 44.5 9.5 0.03 0 23.4 0.03 0 1.1 0
2009 12.9 0.85 0.6 0.31 0 0.6 0.1 4 0 0
2008 18 16 17.4 0.5 15 2.4 0.35 0.05 0 0
2007 11.6 7.3 0.5 0.42 0 0 0 0 0 0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background-color: #F1F3F3;
}
text {
font-family: 'Open Sans', sans-serif;
font-size: 10px;
font-weight: 900;
pointer-events: none;
}
circle {
cursor: pointer;
fill-opacity: 0.9;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path,
.x.axis line {
display: none;
}
.y.axis path,
.y.axis line {
display: none;
}
</style>
<div class="chart"></div>
<script src="http://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
var margin = { top: 10, right: 20, bottom: 20, left: 40 };
var width = 400 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
var clickToggle = false;
var color = d3.scaleOrdinal(["#FA8334", "#AFFC41", "#19647E", "#7FDDDD", "#949396", "#DCF763", "#00C6D0", "#C1C1C1", "#666666", "#FDCDAE"]);
var radius = d3.scaleLinear()
.domain([0, 280])
.range([15, 23]);
var svg = d3.select(".chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(responsivefy)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand().rangeRound([0, width]);
var y = d3.scaleBand().rangeRound([height, 0]);
d3.tsv("data.tsv", function (error, data) {
var grpNames = d3.keys(data[0]).filter(function (key) { return key !== "Deal Type"; });
data.forEach(function (d) {
d.groups = grpNames.map(function (name) { return { name: name, value: +d[name] }; });
d.groups.sort(function (x, y) { return d3.ascending(y.value, x.value); });
});
y.domain(data.map(function (d) { return d["Deal Type"]; }));
x.domain(grpNames);
color.domain(grpNames);
var rows = svg.selectAll(".row")
.data(data)
.enter()
.append("g")
.attr("class", "row")
.attr("transform", function (d) { return "translate(0," + y(d["Deal Type"]) + ")"; });
var cells = rows.selectAll(".cell")
.data(function (d) { return d.groups; })
.enter()
.append("g")
.attr("transform", function (d, i) { return "translate(" + i * x.bandwidth() + ",0)"; })
.attr("class", "cell");
var circle = cells.append("circle")
.attr("class", function (d) { return d.className = d.name.replace(/[\ ,/-]+/g, "-").toLowerCase(); })
.style('fill', function (d, i) { return color(d.name); })
.attr("cx", x.bandwidth() / 2)
.attr("cy", y.bandwidth() / 2)
.attr("r", function (d) { return d.value === 0 ? 0 : radius(d.value); })
.on("click", highlightCircles);
var text = cells.append("text")
.attr("class", function (d) { return d.className = d.name.replace(/[\ ,/-]+/g, "-").toLowerCase(); })
.attr("text-anchor", "middle")
.style("fill", "#ffffff")
.attr("dx", x.bandwidth() / 2)
.attr("dy", y.bandwidth() / 2 + 4)
.text(function (d) { return d.value !== 0 ? d.value : ''; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.remove();
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
var legend = d3.select(".legend")
.append("svg")
.attr("height", height)
.append("g")
.attr("transform", "translate(0," + margin.top + ")");
var legendG = legend.selectAll(".legendRow")
.data(data[0].groups)
.enter()
.append("g")
.attr("class", "legendRow")
.attr("transform", function (d, i) { return "translate(0," + i * y.bandwidth() + ")"; });
legendG.append("circle")
.style('fill', function (d) { return color(d.name); })
.attr("cx", 20)
.attr("cy", 20)
.attr("r", 15)
.on("click", highlightCircles);
legendG.append("text")
.attr("dx", x.bandwidth() + 10)
.attr("dy", y.bandwidth() / 2)
.attr("text-anchor", "start")
.text(function (d) { return d.name });
});
function highlightCircles(d) {
if (!clickToggle) {
var className = d.name.replace(/[\ ,/-]+/g, "-").toLowerCase();
d3.selectAll("circle, text").transition().style("fill-opacity", function (elem) {
if (elem.className !== className) return 0.07;
})
} else {
d3.selectAll("circle, text").transition().style("fill-opacity", 1);
}
clickToggle = !clickToggle;
}
function responsivefy(svg) {
var container = d3.select(svg.node().parentNode);
var width = parseInt(svg.style("width"));
var height = parseInt(svg.style("height"));
var aspect = width / height;
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("perserveAspectRatio", "xMinYMid")
.call(resize);
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
d3.select(window).on("resize." + container.attr("id"), resize);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment