A Pen by Daniel Griffin on CodePen.
-
-
Save groundrace/4571cb671afcc40c9545 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // Bar Chart | |
| // | |
| var bardata = []; | |
| for (var i = 0; i < 50; i++){ | |
| bardata.push(Math.round(Math.random()*50)); | |
| } | |
| 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) + ')'; | |
| }) | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment