Created
July 24, 2014 04:49
-
-
Save aditeyapandey/f10befa4d9e756460cd3 to your computer and use it in GitHub Desktop.
HeatMap With Categorical Axis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
x1 | x2 | y1 | y2 | count | xlabel | ylabel | |
---|---|---|---|---|---|---|---|
D1 | *** | 3 – 9 | *** | 119 | labelX | labelY | |
D2 | *** | 9 – 25 | *** | 110 | |||
D3 | *** | 25 – 100 | *** | 123 | |||
D4 | *** | 100 – 180 | *** | 173 | |||
D5 | *** | 180 – 600 | *** | 226 | |||
D6 | *** | 600 – 1200 | *** | 284 | |||
D7 | *** | 1200 – 1500 | *** | 257 | |||
D8 | *** | 1500 - 2000 | *** | 268 | |||
D9 | *** | 2000 – 3500 | *** | 244 | |||
D10 | *** | 3500 - 6000 | *** | 191 | |||
D11 | *** | 6000 – 9000 | *** | 204 | |||
D3 | *** | 3 – 9 | *** | 222 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.label { | |
font-weight: bold; | |
} | |
.tile { | |
shape-rendering: crispEdges; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.grid .tick { | |
stroke: lightgrey; | |
opacity: 0.2; | |
} | |
.grid path { | |
stroke-width: 0; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 90, bottom: 30, left: 120}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var parseDate = d3.time.format("%Y-%m-%d").parse, | |
formatDate = d3.time.format("%b %d"); | |
var x = d3.scale.ordinal().rangeBands([0, width]); | |
y = d3.scale.ordinal().rangeBands([height, 0]), | |
z = d3.scale.linear().range(["white", "steelblue"]); | |
// The size of the buckets in the CSV data file. | |
// This could be inferred from the data if it weren't sparse. | |
var xStep; | |
var yStep ; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("data4.csv", function(buckets) { | |
//******************* | |
//Assuming that the bin ranges are continous values | |
// We are assinging step size from the data | |
//xStep=buckets[0].x2-buckets[0].x1; | |
//yStep=buckets[0].y2-buckets[0].y1; | |
// Coerce the CSV data to the appropriate types. | |
buckets.forEach(function(d) { | |
d.date = +d.x1; | |
d.bucket = +d.y1; | |
d.count = +d.count; | |
}); | |
//*************************** | |
//Finding the Extents of Values on the X axis and the Y axis | |
// Data to be passed in axis scales to determine tick interval and labels | |
//var extentX=d3.extent(buckets, function(d) { return d.date; }); | |
//var extentY=d3.extent(buckets, function(d) { return d.bucket;}); | |
// Compute the scale domains. | |
// x.domain(d3.extent(buckets, function(d) { return d.date; })); | |
x.domain(buckets.map(function(d) { return d.x1; })); | |
y.domain(buckets.map(function(d) { return d.y1; })); | |
//y.domain(d3.extent(buckets, function(d) { return d.bucket; })); | |
z.domain([0, d3.max(buckets, function(d) { return d.count; })]); | |
//console.log(x.domain()[1]); | |
// Extend the x- and y-domain to fit the last bucket. | |
// For example, the y-bucket 3200 corresponds to values [3200, 3300]. | |
// x.domain([x.domain()[0], x.domain()[1] + xStep]); | |
//y.domain([y.domain()[0], y.domain()[1] + yStep]); | |
// Display the tiles for each non-zero bucket. | |
// See http://bl.ocks.org/3074470 for an alternative implementation. | |
svg.selectAll(".tile") | |
.data(buckets) | |
.enter().append("rect") | |
.attr("class", "tile") | |
.attr("x", function(d) { | |
console.log(d.x1+"haha"+x(d.x1)); | |
console.log(x.rangeBand(x.x1)); | |
return x(d.x1); }) | |
.attr("y", function(d) { | |
return y(d.y1); }) | |
.attr("width", x.rangeBand(x.x1)) | |
.attr("height", y.rangeBand(y.y1)) | |
.style("fill", function(d) { return z(d.count); }) | |
.append("title") | |
.text(function(d){return d.count}); | |
// Add a legend for the color values. | |
var legend = svg.selectAll(".legend") | |
.data(z.ticks(6).slice(1).reverse()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; }); | |
legend.append("rect") | |
.attr("width", 20) | |
.attr("height", 20) | |
.style("fill", z); | |
legend.append("text") | |
.attr("x", 26) | |
.attr("y", 10) | |
.attr("dy", ".35em") | |
.text(String); | |
svg.append("text") | |
.attr("class", "label") | |
.attr("x", width + 20) | |
.attr("y", 10) | |
.attr("dy", ".35em") | |
.text("Count"); | |
//Appending the grid lines | |
function make_x_axis() { | |
return d3.svg.axis() | |
.scale(x) | |
.tickValues(d3.range(893, 1793, 100)) | |
.orient("bottom") | |
} | |
function make_y_axis() { | |
return d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
} | |
/* | |
// Extend the ticks to make a grid | |
svg.append("g") | |
.attr("class", "grid") | |
.attr("transform", "translate(0," + height + ")") | |
.call(make_x_axis() | |
.tickSize(-height, 0, 0) | |
.tickValues(d3.range(extentX[0], extentX[1]+(2*xStep), xStep)) | |
.ticks(20) | |
.tickFormat("") | |
) | |
svg.append("g") | |
.attr("class", "grid") | |
.call(make_y_axis() | |
.tickSize(-width, 0, 0) | |
.tickValues(d3.range(extentY[0], extentY[1]+(2*yStep), yStep)) | |
.tickFormat("") | |
) | |
*/ | |
// Add an x-axis with label. | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.svg.axis().scale(x).orient("bottom"))//2x because taking extent from x1 column | |
.append("text") | |
.attr("class", "label") | |
.attr("x", width) | |
.attr("y", -6) | |
.attr("text-anchor", "end") | |
.text("Value"); | |
// Add a y-axis with label. | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(d3.svg.axis().scale(y).orient("left")) | |
.append("text") | |
.attr("class", "label") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.attr("text-anchor", "end") | |
.attr("transform", "rotate(-90)") | |
.text("Value"); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment