ricardo101289/d3js tutorial.markdown

## d3js tutorial.markdown

      
    Raw
  

              d3js tutorial.markdown
            
          
    d3js tutorial

Forked from Daniel Griffin's Pen d3js tutorial.
Forked from Daniel Griffin's Pen d3js tutorial.
Forked from Daniel Griffin's Pen d3js tutorial.
A Pen by rcardo on CodePen.
License.

  
## index.html
<body>
  <div class="container">
    <h1>Lynda.com D3 Graphics Tutorial</h1>
    <br />
    <div id="graphic"></div>
    <br/>
    <div id="forcechart"></div>
    <br/>
    <div id="piechart"></div>
    <script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>
  </div>
</body>

## script.js
//
// Bar Chart
//

var bardata = [100,200,300];


bardata.sort(function compareNumbers(a, b){
  return a - b;
})

var margin = { top: 30, right: 30, bottom: 40, left: 50 };

var height = 300 - margin.top - margin.bottom,
    width = 500 - margin.left - margin.right,
    barWidth = 50,
    barOffset = 5;

var tempColor;

var colors = d3.scale.linear()
  .domain([0, bardata.length * .33, bardata.length * .66, bardata.length])
  .range(['#B58929', '#C61C6F', '#268BD2', '#85992C'])
;

var yScale = d3.scale.linear()
  .domain([0, d3.max(bardata)])
  .range([0, height - 10]);

var xScale = d3.scale.ordinal()
  .domain(d3.range(0, bardata.length))
  .rangeBands([0, width], .2)

var myBarChart = d3.select('#graphic').append('svg')
  .style('background', '#E7E0CB')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left +', ' + margin.top + ')')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
    .style('fill', function(d, i){
      return colors(i);
    })
    .attr('width', xScale.rangeBand)
    .attr('x', function(d, i){
      return xScale(i);
    })
    .attr('height', 0)
    .attr('y', height)
  .on('mouseover', function(d){

    tooltip.transition()
        .style('opacity', .9);

    tooltip.html(d)
        .style('left', (d3.event.pageX - 5) + 'px')
        .style('top', (d3.event.pageY - 25) + 'px');

    tempColor = this.style.fill;
    d3.select(this)
      .style('opacity', .5)
      .style('fill', 'yellow');
  })
  .on('mouseout', function(){
    d3.select(this)
      .style('opacity', 1)
      .style('fill', tempColor);
  });

var tooltip = d3.select('body').append('div')
    .style('position', 'absolute')
    .style('padding', '0 10px')
    .style('background', 'white')
    .style('opacity', 0);

myBarChart.transition()
    .attr('height', function(d){
      return yScale(d);
    })
    .attr('y', function(d){
      return height - yScale(d);
    })
    .delay(function(d, i){
      return i*20;
    })
    .duration(1000)
    .ease('elastic');

var vGuideScale = d3.scale.linear()
    .domain([0, d3.max(bardata)])
    .range([height, 0])

var vAxis = d3.svg.axis()
    .scale(vGuideScale)
    .orient('left')
    .ticks(10);

var vGuide = d3.select('svg').append('g')
    vAxis(vGuide);

    vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    vGuide.selectAll('path')
        .style({ fill: 'none', stroke:'#000' });
    vGuide.selectAll('line')
        .style({stroke:'#000'});

var hAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .tickValues(xScale.domain().filter(function(d, i){
      return !(i % (bardata.length/5))
    }));

var hGuide = d3.select('svg').append('g')
    hAxis(hGuide)
    hGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
    hGuide.selectAll('path')
        .style({ fill: 'none', stroke:'#000' });
    hGuide.selectAll('line')
        .style({stroke:'#000'});

//
// Force Graph
//

var palette = {"lightgray": "#819090","gray": "#708284","mediumgray": "#536870",
               "darkgray": "#475B62","darkblue": "#0A2933","darkerblue": "#042029",
               "paleryellow": "#FCF4DC","paleyellow": "#EAE3CB","yellow": "#A57706",
               "orange": "#BD3613","red": "#D11C24","pink": "#C61C6F","purple": "#595AB7",
               "blue": "#2176C7","green": "#259286","yellowgreen": "#738A05"};

var forceWidth = 500,
    forceHeight = 300;

var nodeWidth = 5;

var nodes = [
  { name: 'Parent' },
  { name: 'Child 1' },
  { name: 'Child 2', target: [0]},
  { name: 'Child 3', target: [0]},
  { name: 'Child 4', target: [0]},
  { name: 'Child 5', target: [1]},
  { name: 'Child 6', target: [0, 1, 2, 3]}
];

var links = [];
for (var i = 0; i < nodes.length; i++ ){
  if (nodes[i].target !== undefined){
    for (var x = 0; x < nodes[i].target.length; x++){
      links.push({
        source: nodes[i],
        target: nodes[nodes[i].target[x]]
      })
    }
  }
};

var myForceChart = d3.select('#forcechart').append('svg')
    .attr('height', forceHeight).attr('width', forceWidth);

var force = d3.layout.force()
    .nodes(nodes).links([])
    .gravity(0.1)
    .charge(-300)
    .size([forceWidth, forceHeight]);

var link = myForceChart.selectAll('line')
    .data(links).enter().append('line')
    .attr('stroke', palette.gray);

var node = myForceChart.selectAll('circle')
    .data(nodes).enter()
    .append('g')
    .call(force.drag);

node.append('circle')
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
    .attr('r', nodeWidth)
    .attr('fill', function(d, i){
      if (i > 0) { return palette.mediumgray}
      else { return palette.yellowgreen}
    });

node.append('text')
    .text(function(d){
      return d.name
    })
    .attr('font-family','Roboto Slab')
    .attr('x', function(d, i){
      if (i > 0) { return (nodeWidth + 4) }
      else { return (nodeWidth - 15) }
    })
    .attr('y', function(d, i){
      if (i > 0) { return (nodeWidth) }
      else { return 8 }
    })
    .attr('fill', function(d, i){
      if (i > 0) { return palette.mediumgray}
      else { return palette.yellowgreen}
    })
    .attr('text-anchor', function(d, i){
      if (i > 0) { return 'beginning'}
      else { return 'end'}
    })
    .attr('font-size', function(d, i){
      if (i > 0) { return '1em'}
      else { return '1.5em'}
    })

force.on('tick', function(e){
    node.attr('transform', function(d, i){
      return 'translate(' + d.x + ', ' + d.y + ')';
    })
    link
      .attr('x1', function(d){ return d.source.x })
      .attr('y1', function(d){ return d.source.y })
      .attr('x2', function(d){ return d.target.x })
      .attr('y2', function(d){ return d.target.y })
})

force.start();

//
// Pie Chart
//

var pieChartWidth = 400,
    pieChartHeight = 400,
    pieRadius = 200
    pieColors = d3.scale.category20c();

var piedata = [
  {
    label: "Example",
    value: 20 + Math.round(Math.random()*5)
  },{
    label: "Byvoorbeeld",
    value: 20 + Math.round(Math.random()*5)
  },{
    label: "Shembull",
    value: 20 + Math.round(Math.random()*5)
  },{
    label: "Primjer",
    value: 20 + Math.round(Math.random()*5)
  },{
    label: "exemple",
    value: 20 + Math.round(Math.random()*5)
  },{
    label: "panig-ingnan",
    value: 20 + Math.round(Math.random()*5)
  }
];

var pie = d3.layout.pie()
    .value(function(d){
      return d.value;
    });

var arc = d3.svg.arc()
    .outerRadius(pieRadius)

var myPieChart = d3.select('#piechart').append('svg')
    .attr('width', pieChartWidth)
    .attr('height', pieChartHeight)
    .append('g')
    .attr('transform', 'translate(' + (pieChartWidth - pieRadius) + ', ' + (pieChartHeight - pieRadius) + ')')
    .selectAll('path').data(pie(piedata))
    .enter().append('g')
      .attr('class', 'slice')

var slices = d3.selectAll('g.slice')
.append('path')
    .attr('fill', function(d, i){
      return pieColors(i)
    })
    .attr('d', arc)

var pieText = d3.selectAll('g.slice')
    .append('text')
    .text(function(d, i){
      return d.data.label;
    })
    .attr('text-anchor', 'middle')
    .attr('fill', 'white')
    .attr('transform', function(d){
      d.innerRadius = 0;
      d.outerRadius = pieRadius;
      return 'translate(' + arc.centroid(d) + ')';
    })


## style.css
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700|Exo+2:300,600);

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Solarized Palette - http://ethanschoonover.com/solarized ---------
  lightgray      : #819090;
  gray           : #708284;
  mediumgray     : #536870;
  darkgray       : #475B62;
  darkblue       : #0A2933;
  darkerblue     : #042029;
  paleryellow    : #FCF4DC;
  paleyellow     : #EAE3CB;
  yellow         : #A57706;
  orange         : #BD3613;
  red            : #D11C24;
  pink           : #C61C6F;
  purple         : #595AB7;
  blue           : #2176C7;
  cyan           : #259286;
  green          : #738A05; */

body {
  font-family: "Exo 2", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.2em;
  background: #FDF6E3;
  color: #475B62;
}

strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  color: #CB4B19;
  font-size: 1.75em;
  margin-bottom: .4em;
}

p {
  margin-bottom: .5em;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top:10px;
}

@media all and (max-width: 500px) {
  h2 {
    padding-left: 10px;
    text-align: center;
  }
  .container {
    width: 100%;
  }
}

#graphic {
  margin: 0 auto;
	<body>
	<div class="container">
	<h1>Lynda.com D3 Graphics Tutorial</h1>
	<br />
	<div id="graphic"></div>
	<br/>
	<div id="forcechart"></div>
	<br/>
	<div id="piechart"></div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</div>
	</body>
	//
	// Bar Chart
	//

	var bardata = [100,200,300];



	bardata.sort(function compareNumbers(a, b){
	return a - b;
	})

	var margin = { top: 30, right: 30, bottom: 40, left: 50 };

	var height = 300 - margin.top - margin.bottom,
	width = 500 - margin.left - margin.right,
	barWidth = 50,
	barOffset = 5;

	var tempColor;

	var colors = d3.scale.linear()
	.domain([0, bardata.length * .33, bardata.length * .66, bardata.length])
	.range(['#B58929', '#C61C6F', '#268BD2', '#85992C'])
	;

	var yScale = d3.scale.linear()
	.domain([0, d3.max(bardata)])
	.range([0, height - 10]);

	var xScale = d3.scale.ordinal()
	.domain(d3.range(0, bardata.length))
	.rangeBands([0, width], .2)

	var myBarChart = d3.select('#graphic').append('svg')
	.style('background', '#E7E0CB')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', 'translate(' + margin.left +', ' + margin.top + ')')
	.selectAll('rect').data(bardata)
	.enter().append('rect')
	.style('fill', function(d, i){
	return colors(i);
	})
	.attr('width', xScale.rangeBand)
	.attr('x', function(d, i){
	return xScale(i);
	})
	.attr('height', 0)
	.attr('y', height)
	.on('mouseover', function(d){

	tooltip.transition()
	.style('opacity', .9);

	tooltip.html(d)
	.style('left', (d3.event.pageX - 5) + 'px')
	.style('top', (d3.event.pageY - 25) + 'px');

	tempColor = this.style.fill;
	d3.select(this)
	.style('opacity', .5)
	.style('fill', 'yellow');
	})
	.on('mouseout', function(){
	d3.select(this)
	.style('opacity', 1)
	.style('fill', tempColor);
	});

	var tooltip = d3.select('body').append('div')
	.style('position', 'absolute')
	.style('padding', '0 10px')
	.style('background', 'white')
	.style('opacity', 0);

	myBarChart.transition()
	.attr('height', function(d){
	return yScale(d);
	})
	.attr('y', function(d){
	return height - yScale(d);
	})
	.delay(function(d, i){
	return i*20;
	})
	.duration(1000)
	.ease('elastic');

	var vGuideScale = d3.scale.linear()
	.domain([0, d3.max(bardata)])
	.range([height, 0])

	var vAxis = d3.svg.axis()
	.scale(vGuideScale)
	.orient('left')
	.ticks(10);

	var vGuide = d3.select('svg').append('g')
	vAxis(vGuide);

	vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
	vGuide.selectAll('path')
	.style({ fill: 'none', stroke:'#000' });
	vGuide.selectAll('line')
	.style({stroke:'#000'});

	var hAxis = d3.svg.axis()
	.scale(xScale)
	.orient('bottom')
	.tickValues(xScale.domain().filter(function(d, i){
	return !(i % (bardata.length/5))
	}));

	var hGuide = d3.select('svg').append('g')
	hAxis(hGuide)
	hGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
	hGuide.selectAll('path')
	.style({ fill: 'none', stroke:'#000' });
	hGuide.selectAll('line')
	.style({stroke:'#000'});

	//
	// Force Graph
	//

	var palette = {"lightgray": "#819090","gray": "#708284","mediumgray": "#536870",
	"darkgray": "#475B62","darkblue": "#0A2933","darkerblue": "#042029",
	"paleryellow": "#FCF4DC","paleyellow": "#EAE3CB","yellow": "#A57706",
	"orange": "#BD3613","red": "#D11C24","pink": "#C61C6F","purple": "#595AB7",
	"blue": "#2176C7","green": "#259286","yellowgreen": "#738A05"};

	var forceWidth = 500,
	forceHeight = 300;

	var nodeWidth = 5;

	var nodes = [
	{ name: 'Parent' },
	{ name: 'Child 1' },
	{ name: 'Child 2', target: [0]},
	{ name: 'Child 3', target: [0]},
	{ name: 'Child 4', target: [0]},
	{ name: 'Child 5', target: [1]},
	{ name: 'Child 6', target: [0, 1, 2, 3]}
	];

	var links = [];
	for (var i = 0; i < nodes.length; i++ ){
	if (nodes[i].target !== undefined){
	for (var x = 0; x < nodes[i].target.length; x++){
	links.push({
	source: nodes[i],
	target: nodes[nodes[i].target[x]]
	})
	}
	}
	};

	var myForceChart = d3.select('#forcechart').append('svg')
	.attr('height', forceHeight).attr('width', forceWidth);

	var force = d3.layout.force()
	.nodes(nodes).links([])
	.gravity(0.1)
	.charge(-300)
	.size([forceWidth, forceHeight]);

	var link = myForceChart.selectAll('line')
	.data(links).enter().append('line')
	.attr('stroke', palette.gray);

	var node = myForceChart.selectAll('circle')
	.data(nodes).enter()
	.append('g')
	.call(force.drag);

	node.append('circle')
	.attr('cx', function(d) { return d.x; })
	.attr('cy', function(d) { return d.y; })
	.attr('r', nodeWidth)
	.attr('fill', function(d, i){
	if (i > 0) { return palette.mediumgray}
	else { return palette.yellowgreen}
	});

	node.append('text')
	.text(function(d){
	return d.name
	})
	.attr('font-family','Roboto Slab')
	.attr('x', function(d, i){
	if (i > 0) { return (nodeWidth + 4) }
	else { return (nodeWidth - 15) }
	})
	.attr('y', function(d, i){
	if (i > 0) { return (nodeWidth) }
	else { return 8 }
	})
	.attr('fill', function(d, i){
	if (i > 0) { return palette.mediumgray}
	else { return palette.yellowgreen}
	})
	.attr('text-anchor', function(d, i){
	if (i > 0) { return 'beginning'}
	else { return 'end'}
	})
	.attr('font-size', function(d, i){
	if (i > 0) { return '1em'}
	else { return '1.5em'}
	})

	force.on('tick', function(e){
	node.attr('transform', function(d, i){
	return 'translate(' + d.x + ', ' + d.y + ')';
	})
	link
	.attr('x1', function(d){ return d.source.x })
	.attr('y1', function(d){ return d.source.y })
	.attr('x2', function(d){ return d.target.x })
	.attr('y2', function(d){ return d.target.y })
	})

	force.start();

	//
	// Pie Chart
	//

	var pieChartWidth = 400,
	pieChartHeight = 400,
	pieRadius = 200
	pieColors = d3.scale.category20c();

	var piedata = [
	{
	label: "Example",
	value: 20 + Math.round(Math.random()*5)
	},{
	label: "Byvoorbeeld",
	value: 20 + Math.round(Math.random()*5)
	},{
	label: "Shembull",
	value: 20 + Math.round(Math.random()*5)
	},{
	label: "Primjer",
	value: 20 + Math.round(Math.random()*5)
	},{
	label: "exemple",
	value: 20 + Math.round(Math.random()*5)
	},{
	label: "panig-ingnan",
	value: 20 + Math.round(Math.random()*5)
	}
	];

	var pie = d3.layout.pie()
	.value(function(d){
	return d.value;
	});

	var arc = d3.svg.arc()
	.outerRadius(pieRadius)

	var myPieChart = d3.select('#piechart').append('svg')
	.attr('width', pieChartWidth)
	.attr('height', pieChartHeight)
	.append('g')
	.attr('transform', 'translate(' + (pieChartWidth - pieRadius) + ', ' + (pieChartHeight - pieRadius) + ')')
	.selectAll('path').data(pie(piedata))
	.enter().append('g')
	.attr('class', 'slice')

	var slices = d3.selectAll('g.slice')
	.append('path')
	.attr('fill', function(d, i){
	return pieColors(i)
	})
	.attr('d', arc)

	var pieText = d3.selectAll('g.slice')
	.append('text')
	.text(function(d, i){
	return d.data.label;
	})
	.attr('text-anchor', 'middle')
	.attr('fill', 'white')
	.attr('transform', function(d){
	d.innerRadius = 0;
	d.outerRadius = pieRadius;
	return 'translate(' + arc.centroid(d) + ')';
	})
	@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700\|Exo+2:300,600);

	/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

	/* Solarized Palette - http://ethanschoonover.com/solarized ---------
	lightgray : #819090;
	gray : #708284;
	mediumgray : #536870;
	darkgray : #475B62;
	darkblue : #0A2933;
	darkerblue : #042029;
	paleryellow : #FCF4DC;
	paleyellow : #EAE3CB;
	yellow : #A57706;
	orange : #BD3613;
	red : #D11C24;
	pink : #C61C6F;
	purple : #595AB7;
	blue : #2176C7;
	cyan : #259286;
	green : #738A05; */

	body {
	font-family: "Exo 2", "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.2em;
	background: #FDF6E3;
	color: #475B62;
	}

	strong {
	font-weight: 600;
	}

	h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 700;
	color: #CB4B19;
	font-size: 1.75em;
	margin-bottom: .4em;
	}

	p {
	margin-bottom: .5em;
	}

	.container {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	margin-top:10px;
	}

	@media all and (max-width: 500px) {
	h2 {
	padding-left: 10px;
	text-align: center;
	}
	.container {
	width: 100%;
	}
	}

	#graphic {
	margin: 0 auto;