Skip to content

Instantly share code, notes, and snippets.

@ramnathv
Last active August 29, 2015 14:09
Show Gist options
  • Save ramnathv/2ad53421cdb310195a77 to your computer and use it in GitHub Desktop.
Save ramnathv/2ad53421cdb310195a77 to your computer and use it in GitHub Desktop.
Tributary inlet
.axis path,
.axis line{
fill: none;
stroke: none;
}
g.tick line {
stroke: transparent;
}
.axis text {
font-size: 14px;
text-rendering: optimizeLegibility;
}
.cell {
fill-opacity: 0.5;
stroke: #ffffff;
stroke-width: 0.5;
}
{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/loN1oNK.png"}
var width = 400, height = 200;
var canvas = d3.select("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(65, 45)")
var data = [{"x":"A","y":"a"},{"x":"B","y":"a"},{"x":"C","y":"a"},{"x":"D","y":"a"},{"x":"E","y":"a"},{"x":"F","y":"a"},{"x":"G","y":"a"},{"x":"H","y":"a"},{"x":"I","y":"a"},{"x":"J","y":"a"},{"x":"A","y":"b"},{"x":"B","y":"b"},{"x":"C","y":"b"},{"x":"D","y":"b"},{"x":"E","y":"b"},{"x":"F","y":"b"},{"x":"G","y":"b"},{"x":"H","y":"b"},{"x":"I","y":"b"},{"x":"J","y":"b"},{"x":"A","y":"c"},{"x":"B","y":"c"},{"x":"C","y":"c"},{"x":"D","y":"c"},{"x":"E","y":"c"},{"x":"F","y":"c"},{"x":"G","y":"c"},{"x":"H","y":"c"},{"x":"I","y":"c"},{"x":"J","y":"c"},{"x":"A","y":"d"},{"x":"B","y":"d"},{"x":"C","y":"d"},{"x":"D","y":"d"},{"x":"E","y":"d"},{"x":"F","y":"d"},{"x":"G","y":"d"},{"x":"H","y":"d"},{"x":"I","y":"d"},{"x":"J","y":"d"},{"x":"A","y":"e"},{"x":"B","y":"e"},{"x":"C","y":"e"},{"x":"D","y":"e"},{"x":"E","y":"e"},{"x":"F","y":"e"},{"x":"G","y":"e"},{"x":"H","y":"e"},{"x":"I","y":"e"},{"x":"J","y":"e"},{"x":"A","y":"f"},{"x":"B","y":"f"},{"x":"C","y":"f"},{"x":"D","y":"f"},{"x":"E","y":"f"},{"x":"F","y":"f"},{"x":"G","y":"f"},{"x":"H","y":"f"},{"x":"I","y":"f"},{"x":"J","y":"f"},{"x":"A","y":"g"},{"x":"B","y":"g"},{"x":"C","y":"g"},{"x":"D","y":"g"},{"x":"E","y":"g"},{"x":"F","y":"g"},{"x":"G","y":"g"},{"x":"H","y":"g"},{"x":"I","y":"g"},{"x":"J","y":"g"},{"x":"A","y":"h"},{"x":"B","y":"h"},{"x":"C","y":"h"},{"x":"D","y":"h"},{"x":"E","y":"h"},{"x":"F","y":"h"},{"x":"G","y":"h"},{"x":"H","y":"h"},{"x":"I","y":"h"},{"x":"J","y":"h"},{"x":"A","y":"i"},{"x":"B","y":"i"},{"x":"C","y":"i"},{"x":"D","y":"i"},{"x":"E","y":"i"},{"x":"F","y":"i"},{"x":"G","y":"i"},{"x":"H","y":"i"},{"x":"I","y":"i"},{"x":"J","y":"i"},{"x":"A","y":"j"},{"x":"B","y":"j"},{"x":"C","y":"j"},{"x":"D","y":"j"},{"x":"E","y":"j"},{"x":"F","y":"j"},{"x":"G","y":"j"},{"x":"H","y":"j"},{"x":"I","y":"j"},{"x":"J","y":"j"}]
var data2 = [{"x":"A","y":"a","z":""},{"x":"B","y":"a","z":"1"},{"x":"C","y":"a","z":""},{"x":"D","y":"a","z":""},{"x":"E","y":"a","z":"2"},{"x":"F","y":"a","z":""},{"x":"G","y":"a","z":"3"},{"x":"H","y":"a","z":"1"},{"x":"I","y":"a","z":"1"},{"x":"J","y":"a","z":"1"},{"x":"A","y":"b","z":""},{"x":"B","y":"b","z":"1"},{"x":"C","y":"b","z":"2"},{"x":"D","y":"b","z":"3"},{"x":"E","y":"b","z":""},{"x":"F","y":"b","z":"1"},{"x":"G","y":"b","z":""},{"x":"H","y":"b","z":"1"},{"x":"I","y":"b","z":"2"},{"x":"J","y":"b","z":"3"},{"x":"A","y":"c","z":"3"},{"x":"B","y":"c","z":"1"},{"x":"C","y":"c","z":""},{"x":"D","y":"c","z":"1"},{"x":"E","y":"c","z":"3"},{"x":"F","y":"c","z":"2"},{"x":"G","y":"c","z":"2"},{"x":"H","y":"c","z":"1"},{"x":"I","y":"c","z":"2"},{"x":"J","y":"c","z":"1"},{"x":"A","y":"d","z":"1"},{"x":"B","y":"d","z":"1"},{"x":"C","y":"d","z":""},{"x":"D","y":"d","z":"3"},{"x":"E","y":"d","z":""},{"x":"F","y":"d","z":"2"},{"x":"G","y":"d","z":"1"},{"x":"H","y":"d","z":"2"},{"x":"I","y":"d","z":"1"},{"x":"J","y":"d","z":"2"},{"x":"A","y":"e","z":"1"},{"x":"B","y":"e","z":"3"},{"x":"C","y":"e","z":""},{"x":"D","y":"e","z":"1"},{"x":"E","y":"e","z":"3"},{"x":"F","y":"e","z":"1"},{"x":"G","y":"e","z":"3"},{"x":"H","y":"e","z":""},{"x":"I","y":"e","z":"3"},{"x":"J","y":"e","z":"1"}]
var xvars = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
var yvars = ["a", "b", "c"]
var x = d3.scale.ordinal()
.domain(data2.map(f('x')))
.rangeBands([0, width - 100])
var y = d3.scale.ordinal()
.domain(data2.map(f('y')))
.rangeBands([0, height - 50])
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
canvas.append("g")
.attr("transform", "translate(0, -31)")
.attr("class", "x axis")
.attr("fill", "black")
.attr("stroke", "none")
.attr("stroke-width", 0.5)
.call(xAxis)
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
canvas.append("g")
.attr("transform", "translate(-31, 0)")
.attr("class", "y axis")
.attr("fill", "black")
.attr("stroke", "none")
.attr("stroke-width", 0.5)
.call(yAxis)
var cl = d3.scale.threshold()
.range(['#e7e1ef', '#c994c7', '#dd1c77', "#fff"])
.domain([1, 2, 3])
/*
var circles = canvas.append("circle")
.attr("r",5)
.attr("cx", 26)
.attr("cy", 15)
.attr("fill", "blue")
*/
var bars = canvas.selectAll(".bar")
.data(data2).enter()
.append("g")
.attr("class", "bar")
var cellWidth = x.rangeBand()
bars.append("text")
.attr("x", function(d){ return x(d.x) + cellWidth/2})
.attr("y", function(d){ return y(d.y) + cellWidth/2})
.style("text-anchor", "middle")
.attr("dy", "5")
.style("font-size", "14px")
.text(f("z"))
.attr("pointer-events", "none")
bars.append("rect")
.attr("class", "cell")
.attr("x", function(d){ return x(d.x)})
.attr("y", function(d){ return y(d.y)})
.attr("width", cellWidth)
.attr("height", cellWidth)
.attr("fill", function(d){ return cl(d.z)})
bars.on("mouseover", function(d){
d3.select(this).select("rect")
.attr("fill", "red")
.style("cursor", "crosshair")
}).on("mouseout", function(d){
d3.select(this)
.select("rect").attr("fill", function(d){ return cl(d.z)})
})
function f(x){
return function(d){return d[x]}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment