Skip to content

Instantly share code, notes, and snippets.

@tomgp

tomgp/README.md

Forked from mbostock/.block
Last active December 23, 2015 10:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomgp/6623377 to your computer and use it in GitHub Desktop.
Save tomgp/6623377 to your computer and use it in GitHub Desktop.
Download ZIP
Growth chart
Raw
README.md

vertical slider brushs

input rate of change - output values

we could also add sliders to the value chart and reverse the calculation to get growth rate...

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
font-family: sans-serif;
}
svg{
border: solid 1px #eee;
}
.axis {
font: 10px sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.axis .domain {
fill: none;
stroke: #000;
shape-rendering:crispEdges;
}
.axis .halo {
fill: none;
stroke-width: 8px;
}
.slider .handle {
fill: #fff;
stroke: #000;
stroke-opacity: .5;
stroke-width: 1.25px;
pointer-events: none;
}
#growth-line{
stroke:#333;
fill:none;
}
#value-line{
stroke:#333;
fill:none;
}
</style>
<body>
<h2>Set growth rate:</h2>
<div id="input"></div>
<h2>Value:</h2>
<div id="output"></div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var sliderCount = 0;
function nextID(){
sliderCount ++;
return 'slider-'+sliderCount;
}
var width = 750;
var height = 350;
var sliderHeight = 300;
var initialValue = 45;
var growthData = [
{
label:'jan2001',
growthPct:70},
{
label:'jan2002',
growthPct:50},
{
label:'jan2003',
growthPct:30},
{
label:'jan2004',
growthPct:10},
{
label:'jan2005',
growthPct:0}];
var startValue = 200;
growthData = calculateValues(growthData, startValue);
console.log(growthData);
//basic SVG structure
var marginTransform = 'translate(0,20)';
var inputSVG = d3.select('#input').append('svg').attr('width',width).attr('height',height);
var growthChart = inputSVG.append('g').attr('id','growthChart').attr('transform', marginTransform);
var sliders = inputSVG.append('g').attr('id','ui').attr('transform', marginTransform);
var outputSVG = d3.select('#output').append('svg').attr('width',width).attr('height',height);
var valueChart = outputSVG.append('g').attr('id','valueChart').attr('transform', marginTransform);
var growthRateScale = d3.scale.linear()
.domain([0,100])
.range([sliderHeight,0])
.clamp(true);
var valueScale = d3.scale.linear()
.domain([0, 2000])
.range([sliderHeight,0]);
var valueAxis = d3.svg.axis()
.scale(valueScale)
.orient('left')
.tickSize(-5)
.tickPadding(12);
valueChart.append('g').attr('class','y axis').attr('transform','translate(100,0)')
.call(valueAxis);
var xScale = d3.scale.linear()
.domain([0,growthData.length])
.range([100,width]);
var growthLine = d3.svg.line()
.x(function(d,i) { return xScale(i); })
.y(function(d) { return growthRateScale(d.growthPct); });
var valueLine = d3.svg.line()
.x(function(d,i) { return xScale(i); })
.y(function(d) { return valueScale(d.value); });
var lookup = {};
for(var i=0; i<growthData.length;i++){
lookup[growthData[i].label] = i;
addVerticalSlider(sliders, {x:xScale(i), y:0}, growthRateScale, setGrowth, growthData[i].label, growthData[i].growthPct);
}
addGrowthChart(growthChart, growthData);
addValueChart(valueChart, growthData);
function setGrowth(id,value){
growthData[ lookup[id] ].growthPct = value;
growthData = calculateValues(growthData,100);
updateGrowthChart();
updateValueChart();
}
function addValueChart(parent, data){
parent.append('path').datum(data).attr('id','value-line')
.attr('d',valueLine);
}
function updateValueChart(){
valueChart.select('#value-line')
.transition().duration(10).attr("d", valueLine);
}
function updateGrowthChart(){
growthChart.select('#growth-line')
.transition().duration(10).attr("d", growthLine);
}
function addGrowthChart(parent, data){
parent.append('path').datum(data).attr('id','growth-line')
.attr('d',growthLine);
}
function addVerticalSlider( parent, position, scale, callback, id, defaultValue ){
if(!id){
id = nextID();
}
var sliderID = id;
var sliderHitWidth = 100;
function brushed(){
var value = sliderBrush.extent()[0];
if (d3.event.sourceEvent) { // not a programmatic event
value = scale.invert(d3.mouse(this)[1]);
sliderBrush.extent([value, value]);
}
callback(sliderID,value);
handle.attr('cy',scale(value));
}
var sliderBrush = d3.svg.brush()
.y(scale)
.extent([0,0])
.on('brush', brushed);
var sliderAxis = d3.svg.axis()
.scale(scale)
.orient('left')
.tickFormat(function(d){return d+'%'})
.tickSize(0)
.tickPadding(12);
var sliderRoot = sliders.append('g')
.attr('class','vslider-container')
.attr('id',sliderID)
.attr('transform','translate(' + position.x + ',' + position.y + ')');
sliderRoot.append('g').attr('class','y axis')
.call(sliderAxis)
.select('.domain')
.select(function(){ return this.parentNode.appendChild(this.cloneNode(true)) })
.attr('class','halo');
var slider = sliderRoot.append("g")
.attr("class", "slider")
.call(sliderBrush);
slider.selectAll(".extent,.resize")
.remove();
slider.select('.background')
.attr('width', sliderHitWidth)
.attr('x',-sliderHitWidth/2);
var handle = slider.append('circle')
.attr('class','handle')
.attr('r',10);
slider
.call(sliderBrush.event)
.transition() // gratuitous intro!
.duration(750)
.call(sliderBrush.extent([defaultValue, defaultValue]))
.call(sliderBrush.event);
};
function calculateValues(data, first){
if(!first){
first = 100;
}
if(!data[0].value && first){
data[0].value = first;
}
for (var i=1;i<data.length;i++){
data[i].value = data[i-1].value * ( data[i-1].growthPct/100 + 1 );
}
return data;
}
d3.select(self.frameElement).style("height", "775px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment