[ Launch: bar colors ] 6382868 by agconti
Some pretty colors in D3
[ Launch: bar colors ] 6382868 by agconti
Some pretty colors in D3
| {"description":"bar colors","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,"thumbnail":"http://i.imgur.com/WUArvkA.png"} |
| var svg = d3.select('svg'); | |
| var h = 418; | |
| var w = 700; | |
| var bar_padding = 1; | |
| var scale = 10; | |
| svg.attr({height: h, | |
| width: w, | |
| }); | |
| //var data = d3.range(23); | |
| //random data | |
| var data = []; | |
| for (var i=0; i<30; i++){ | |
| var num = Math.random() * 30; | |
| data = data.concat(num); | |
| } | |
| // color scales | |
| var colorscale = d3.scale.linear() | |
| .domain([d3.min(data), d3.max(data)]) | |
| .interpolate(d3.interpolateHcl) | |
| .range(["#59E294", "#214592"]); | |
| var rects = svg.selectAll('rects').data(data); | |
| rects.enter() | |
| .append('rect') | |
| .attr({ | |
| width: (w / data.length), | |
| height:function(d){ | |
| return (d*scale); | |
| }, | |
| y: function(d){ | |
| return (h - (d * scale)); | |
| }, | |
| x: function(d,i){ | |
| return ((i * w) / data.length) + 30;}, //plus 30 for sapcing need in Tributary | |
| //fill: "#51C283" | |
| fill: function(d,i){ | |
| return colorscale(d);} // plus 79 to morph color scale. | |
| }); | |