Forked from Daniel Griffin's Pen 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.
Forked from Daniel Griffin's Pen d3js tutorial.
Forked from Daniel Griffin's Pen d3js tutorial.
<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; |