Skip to content

Instantly share code, notes, and snippets.

@ejfox
Created October 13, 2012 05:25
Show Gist options
  • Save ejfox/3883344 to your computer and use it in GitHub Desktop.
Save ejfox/3883344 to your computer and use it in GitHub Desktop.
just another inlet to tributary
{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.6777777777777788,"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}
// Responsive tributary example
// Resize the code panel to see the bar chart adjust
// Proof of concept for responsive dataviz in Tributary
//
// Next steps: changing visualization types between sizes
// using averages to turn 500 bars into 50 in small sizes
var sw = tributary.sw * 1.1;//parseInt(d3.select("svg").style("width"))
//make z sin waves extend past the width a little
//sw += .1 * sw
var sh = tributary.sh;//parseInt(d3.select("svg").style("height"))
var data = [14, 18, 15, 16, 23, 42, 25, 32, 21, 24, 43, 23, 21, 12, 10, 11, 23, 25, 21, 15,52, 11, 95, 10, 24, 25];
var chartpadding = { x: 12, y: -10 };
var barwidth = 20,
barpadding = 4;
var svg = d3.select("svg")
.append("svg:g")
var chart = svg.append("g").attr("id", "chart")
.attr("transform", "translate("+chartpadding.x+","+chartpadding.y+")")
var x = d3.scale.linear()
.domain([0, data.length])
.range([0, sw - 50]);
var color = d3.scale.linear()
.domain([0, 1300])
//.interpolate(d3.interpolateRgb)
.interpolate(d3.interpolateHsl)
.range(['#D40067', "#29B0FF"])
if (sw > 800) {
barwidth = 28;
}
if (sw < 630) {
barwidth = 15;
sh = 600;
}
if (sw < 460) {
barwidth = 10;
sh = 400;
}
if ( sw < 301) {
barwidth = 4;
sh = 300;
}
if (sw < 112) {
barwidth = 1;
sh = 100;
x = function(i) {
return i*2;
}
}
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.rangeRound([0, sh ]);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr({
x: function(d,i) {
return x(i);
},
y: function(d,i) {
return sh - y(d)
},
height: y,
width: barwidth
})
.attr("fill", function(){
return color(sw);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment