beemyfriend/index.html

## index.html
<body></body>
<script src="https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>

////////////////////////////////////////////
//    LETS CREATE THE DOM WITH D3.jetpack
////////////////////////////////////////////
    var data = [{text: 'this', num: 150},
                {text: 'data', num: 125},
                {text: "doesnt", num: 100},
                {text: 'really', num: 75},
                {text: 'exist', num: 25}
               ],
        width = 600,
        height = width/2,
        margin = {top: 50, right: 50, bottom: 50, left: 50}

    var svg = d3.select('body')
        .append('svg')
        .at({width: width, height: height});

    var y = d3.scaleLinear()
        .domain([0, d3.max(data, (d)=>d.num)])
        .range([height-margin.bottom, margin.top]);

    var x = d3.scaleBand()
        .domain(data.map((d,i)=> i))
        .range([margin.left, width-margin.right]);

    var chart = svg.appendMany('g', data)
        .translate((d,i)=>[x(i), y(d.num)]);

    var bars = chart.append('rect')
        .at({x: 0, y: 0, width: x.bandwidth(), height: (d)=> y(0) - y(d.num)})
        .st({fill: '#5D8AA8', stroke: 'black'});

    var text = chart.append('text')
        .translate([x.bandwidth()/2, 0])
        .at({x: 0, y: -25})
        .st({fill: 'black', fontSize: 15, textAnchor: 'middle'})
        .text(d=>d.text)

//////////////////////////////////////////
//    LET'S ANIMATE THE DOM WITH GSAP
/////////////////////////////////////////

// D3 SELECTIONS NEED TO BE CREATED INTO NODES

    var animate_text = text.nodes(),
        animate_bars = bars.nodes(),
        animate_chart = chart.nodes();

// CREATE A TIMELINE OBJECT.
// The new Object can accept an object as a parameter
// The object we will use containsa a command to reverse the animation onComplete

    var tl = new TimelineMax({ onComplete: ()=> {tl.reverse()}})

    tl
//       we are going to the selection's current state from one we are creating on the fly
//       here it is the entire chart, the animation will last 1.5 seconds, and we the opacity
//       will start from 0 and end to the current chart opacity of 1
        .from(animate_chart, 2, {opacity: 0})
//      here we will make an animation where the bars take 1.5 seconds to go to an opacity of 0
        .to(animate_bars, 2, {opacity: 0})
//      we will create a seperate animation for each item in the bar selection
//      Each animation will last one second, the animation will change the bars' opacity, and each
//      animation will start .5 seconds after the previous one
        .staggerTo(animate_bars, 1, {opacity: 1}, .5)
//      if you want to do multiple animations at the same time, then create an instance with .add()
        .add('finale')
//      Then append the instance at the end of the simulatneous aniimations
        .staggerTo(animate_text, 1, {y: 100, opacity: 0}, .5, 'finale')
//      we can individualize what we do to each item within a selection by creating the 'cycle' key
//      The cycle key accepts anonymous functions with an index parameter
//      Here cycle to move the y position of each bar as we scale down their y dimension
        .staggerTo(animate_bars, 1, {scaleY: 0, cycle: {y: (i)=> animate_bars[i].height.baseVal.value}}, .5, 'finale')

</script>
	<body></body>
	<script src="https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
	<script>

	////////////////////////////////////////////
	// LETS CREATE THE DOM WITH D3.jetpack
	////////////////////////////////////////////
	var data = [{text: 'this', num: 150},
	{text: 'data', num: 125},
	{text: "doesnt", num: 100},
	{text: 'really', num: 75},
	{text: 'exist', num: 25}
	],
	width = 600,
	height = width/2,
	margin = {top: 50, right: 50, bottom: 50, left: 50}

	var svg = d3.select('body')
	.append('svg')
	.at({width: width, height: height});

	var y = d3.scaleLinear()
	.domain([0, d3.max(data, (d)=>d.num)])
	.range([height-margin.bottom, margin.top]);

	var x = d3.scaleBand()
	.domain(data.map((d,i)=> i))
	.range([margin.left, width-margin.right]);

	var chart = svg.appendMany('g', data)
	.translate((d,i)=>[x(i), y(d.num)]);

	var bars = chart.append('rect')
	.at({x: 0, y: 0, width: x.bandwidth(), height: (d)=> y(0) - y(d.num)})
	.st({fill: '#5D8AA8', stroke: 'black'});

	var text = chart.append('text')
	.translate([x.bandwidth()/2, 0])
	.at({x: 0, y: -25})
	.st({fill: 'black', fontSize: 15, textAnchor: 'middle'})
	.text(d=>d.text)

	//////////////////////////////////////////
	// LET'S ANIMATE THE DOM WITH GSAP
	/////////////////////////////////////////

	// D3 SELECTIONS NEED TO BE CREATED INTO NODES

	var animate_text = text.nodes(),
	animate_bars = bars.nodes(),
	animate_chart = chart.nodes();

	// CREATE A TIMELINE OBJECT.
	// The new Object can accept an object as a parameter
	// The object we will use containsa a command to reverse the animation onComplete

	var tl = new TimelineMax({ onComplete: ()=> {tl.reverse()}})

	tl
	// we are going to the selection's current state from one we are creating on the fly
	// here it is the entire chart, the animation will last 1.5 seconds, and we the opacity
	// will start from 0 and end to the current chart opacity of 1
	.from(animate_chart, 2, {opacity: 0})
	// here we will make an animation where the bars take 1.5 seconds to go to an opacity of 0
	.to(animate_bars, 2, {opacity: 0})
	// we will create a seperate animation for each item in the bar selection
	// Each animation will last one second, the animation will change the bars' opacity, and each
	// animation will start .5 seconds after the previous one
	.staggerTo(animate_bars, 1, {opacity: 1}, .5)
	// if you want to do multiple animations at the same time, then create an instance with .add()
	.add('finale')
	// Then append the instance at the end of the simulatneous aniimations
	.staggerTo(animate_text, 1, {y: 100, opacity: 0}, .5, 'finale')
	// we can individualize what we do to each item within a selection by creating the 'cycle' key
	// The cycle key accepts anonymous functions with an index parameter
	// Here cycle to move the y position of each bar as we scale down their y dimension
	.staggerTo(animate_bars, 1, {scaleY: 0, cycle: {y: (i)=> animate_bars[i].height.baseVal.value}}, .5, 'finale')

	</script>