Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active June 29, 2017 01:54
Show Gist options
  • Save tomshanley/7d44f584c5ea591a80f07da33c72dcc1 to your computer and use it in GitHub Desktop.
Save tomshanley/7d44f584c5ea591a80f07da33c72dcc1 to your computer and use it in GitHub Desktop.
Download ZIP
Offset cy
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
circle {
fill: tomato
}
</style>
</head>
<body>
<script>
let w = 300,
h = 400;
let dataset = [2.3, 5.2, 2.8, 0.31, 0.41, 12, 0.064, 15, 0.033, 13, 17, 0.034, 14, 0.23, 18, 13, 14, 0.049, 0.038];
dataset = dataset.sort(d3.descending);
let offset = 0;
let padding = 2
let stackedData = []
dataset.forEach(function (d, i) {
let datum = {};
datum.id = i;
datum.value = d;
datum.sqrtValue = Math.sqrt(d); //radius will be based on this
offset = offset + Math.sqrt(d) + padding; //set the cy offset down by padding + radius of this circle
datum.offset = offset; //record offset, ie centre of this circle
offset = offset + Math.sqrt(d); //move offset again to bottom of this circle
stackedData.push(datum);
});
console.log(stackedData);
offset = offset + padding; //add last bit of padding, before using for scales
let yScale = d3.scaleLinear()
.domain([0, offset])
.range([0, h]);
let rScale = d3.scaleLinear()
.domain([0, offset])
.range([0, h]);
let svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
let circles = svg.selectAll('circle')
.data(stackedData)
.enter()
.append('circle')
.attr('cx', w / 2)
.attr('cy', function (d) {
return yScale(d.offset);
})
.attr('r', function (d) {
return rScale(d.sqrtValue);
})
.attr("fill", function (d) {
return "rgb(0, 0, " + Math.round((d * 20)) + ")";
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment