Skip to content

Instantly share code, notes, and snippets.

@jikkujose

jikkujose/.block

Forked from mbostock/.block
Last active January 10, 2017 22:09
Show Gist options
  • Save jikkujose/e401c29216b273e6906ed1f7582f976c to your computer and use it in GitHub Desktop.
Save jikkujose/e401c29216b273e6906ed1f7582f976c to your computer and use it in GitHub Desktop.
Download ZIP
Diamonds II
Raw
.block
license: gpl-3.0
height: 960
Raw
diamonds.tsv
carat price
0.23 326
0.21 326
0.23 327
0.29 334
0.31 335
0.24 336
0.24 336
0.26 337
0.22 337
0.23 338
0.3 339
0.23 340
0.22 342
0.31 344
0.2 345
0.32 345
0.3 348
0.3 351
0.3 351
0.3 351
0.3 351
0.23 352
0.23 353
0.31 353
0.31 353
0.23 354
0.24 355
0.3 357
0.23 357
0.23 357
0.23 402
0.23 402
0.23 402
0.23 402
0.23 402
0.23 402
0.23 402
0.31 402
0.26 403
0.33 403
0.33 403
0.33 403
0.26 403
0.26 403
0.32 403
0.29 403
0.32 403
0.32 403
0.25 404
0.29 404
0.24 404
0.23 404
0.32 404
0.22 404
0.22 404
0.3 405
0.3 405
0.3 405
0.3 405
0.3 405
0.35 552
0.3 552
0.3 552
0.3 552
0.42 552
0.28 553
0.32 553
0.31 553
0.31 553
0.24 553
0.24 553
0.3 554
0.3 554
0.3 554
0.3 554
0.26 554
0.26 554
0.26 554
0.26 554
0.26 554
0.26 554
0.26 554
0.26 554
0.38 554
0.26 554
0.24 554
0.24 554
0.24 554
0.24 554
0.32 554
0.7 2757
0.86 2757
0.7 2757
0.71 2759
0.78 2759
0.7 2759
0.7 2759
0.96 2759
0.73 2760
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
canvas,
svg {
position: absolute;
}
.grid .tick line {
stroke: #fff;
}
.grid--x .domain {
fill: #e7e7e7;
stroke: none;
}
.grid--y .domain,
.axis .domain {
display: none;
}
</style>
<svg width="960" height="960"></svg>
<canvas width="960" height="960"></canvas>
<script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script>
<script>
var canvas = d3.select("canvas").node(),
context = canvas.getContext("2d");
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
var svg = d3.select("svg").append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLog()
.rangeRound([0, width - 2]);
var y = d3.scaleLog()
.rangeRound([height - 2, 0]);
context.translate(margin.left, margin.top);
context.globalCompositeOperation = "multiply";
context.fillStyle = "rgba(60,180,240,0.6)";
d3.tsv("diamonds.tsv", type, function(error, diamonds) {
if (error) throw error;
x.domain(d3.extent(diamonds, function(d) { return d.carat; }));
y.domain(d3.extent(diamonds, function(d) { return d.price; }));
svg.append("g")
.attr("class", "grid grid--x")
.call(d3.axisLeft(y)
.tickSize(-width)
.tickFormat(""));
svg.append("g")
.attr("class", "grid grid--y")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickSize(-height)
.tickFormat(""));
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y)
.ticks(20, ".1s"))
.append("text")
.attr("x", 10)
.attr("y", 10)
.attr("dy", ".71em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Price (US$)");
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.ticks(20, ".1f"))
.append("text")
.attr("x", width - 10)
.attr("y", -10)
.attr("dy", "-.35em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text("Mass (carats)");
d3.shuffle(diamonds);
var t = d3.timer(function() {
for (var i = 0, n = 500, d; i < n; ++i) {
if (!(d = diamonds.pop())) return t.stop();
context.fillRect(x(d.carat), y(d.price), Math.max(2, x(d.carat + 0.01) - x(d.carat)), 2);
}
});
});
function type(d) {
d.carat = +d.carat;
d.price = +d.price;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment