Skip to content

Instantly share code, notes, and snippets.

@gelicia
Created February 11, 2013 19:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gelicia/4756902 to your computer and use it in GitHub Desktop.
Stealing Enjalot's code from a year ago
{"description":"Stealing Enjalot's code from a year ago","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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
/* Originally from https://gist.github.com/enjalot/1320232 */
var data = [
{"key":"FL", "pop":10000 },
{"key":"CA", "pop":20000 },
{"key":"NY", "pop":30000 },
{"key":"NC", "pop":40000 },
{"key":"SC", "pop":50000 },
{"key":"AZ", "pop":60000 },
{"key":"TX", "pop":70000 }
];
var svg = d3.select("svg")
//.attr("width", "1000")
//.attr("height", "700")
.attr("width", "500")
.attr("height", "350")
.attr("viewBox", "0 0 1000 700")
.attr("preserveAspectRatio", "xMinYMin meet");
var xp= 214;
var yp = 195;
var w = 800;
var h = 468;
x = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([ 0, w ], .2)
var data_max = d3.max(data, function(d)
{return d.pop
});
y = d3.scale.linear()
.domain([ 0, data_max ])
.range([ 0, h ])
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("fill", '#000000')
.attr("fill-opacity", .6)
.attr("x", function(d,i) { return x(i) + xp})
.attr("y", function(d,i) { return (h - y(d.pop)) + yp })
.attr("width", function(d,i) { return x.rangeBand() })
.attr("height", function(d,i) { return y(d.pop) })
.on("mouseover", function(d, i)
{
d3.select(this)
.attr("fill-opacity", 1);
})
.on("mouseout", function(d, i)
{
d3.select(this)
.attr("fill-opacity", .6);
});
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function (d) { return d.key;})
.attr({
x: function(d,i) { return x(i) + xp + 25},
y: function(d,i) { return (h) + yp + 15 }
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment