├── .gitignore ├── css ├── styles.css └── barchart.css ├── js ├── general │ ├── app.js │ ├── animations.js │ ├── svgExample.js │ ├── visualizeOranges.js │ ├── enterExample.js │ ├── scaling.js │ ├── paths.js │ ├── axis_groups.js │ ├── importData.js │ ├── transitions.js │ └── donutChart.js ├── d3jsGraph.js ├── graph │ └── init.js ├── d3jsBarGraph.js ├── bargraph │ └── bargraph.js └── d3jsTutorial.js ├── bower.json ├── graph.html ├── package.json ├── bargraph.html ├── LICENSE ├── index.html ├── data └── suicide-squad.json ├── gulpfile.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | node_modules/ 3 | docs/ 4 | bin/ 5 | .sass-cache/ 6 | .idea/ -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | svg { 2 | border: 1px solid #000000; 3 | } 4 | 5 | .arc text { 6 | font: 10px Arial, Georgia, sans-serif; 7 | text-anchor: middle; 8 | } 9 | 10 | .arc path { 11 | stroke: #ffffff; 12 | } -------------------------------------------------------------------------------- /js/general/app.js: -------------------------------------------------------------------------------- 1 | /** this is how we start d3js with javascript **/ 2 | function start () 3 | { 4 | d3.select("body") 5 | .append("p") 6 | .text("Load text with d3.js! today"); 7 | 8 | console.log(d3); 9 | } -------------------------------------------------------------------------------- /css/barchart.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0 auto; 5 | } 6 | 7 | .graph { 8 | width: auto; 9 | } 10 | 11 | .tooltip { 12 | text-decoration: underline; 13 | } 14 | 15 | .axis { 16 | font: 10px Georgia, Arial, sans-serif; 17 | } 18 | 19 | .axis path, .axis line { 20 | fill: none; 21 | stroke: #dadada; 22 | shape-rendering: crispEdges; 23 | } -------------------------------------------------------------------------------- /js/general/animations.js: -------------------------------------------------------------------------------- 1 | function animations () 2 | { 3 | var data = [200, 100], 4 | w = 800, 5 | h = 600; 6 | 7 | var canvas = d3.select(".graphContainer") 8 | .append("svg") 9 | .attr("width", w) 10 | .attr("height", h); 11 | 12 | var box = canvas.append("rect") 13 | .attr("width", 300) 14 | .attr("height", 300) 15 | .attr("fill", "red"); 16 | 17 | box.transition() 18 | .duration(3000) 19 | .attr("width", 100) 20 | .attr("height", 100); 21 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3js", 3 | "version": "0.0.1", 4 | "authors": [ 5 | "Accio Code (cartondonofrio@gmail.com)" 6 | ], 7 | "description": "d3js tutorial series", 8 | "main": "index.html", 9 | "keywords": [ 10 | "d3js", 11 | "d3", 12 | "Accio Code", 13 | "beginners", 14 | "tutorial", 15 | "javascript" 16 | ], 17 | "license": "MIT", 18 | "private": true, 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ], 26 | "dependencies": { 27 | "gulp": "^3.9.1" 28 | }, 29 | "devDependencies": { 30 | "foundation": "^5.5.3" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /graph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Our D3js Graph 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 |
19 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /js/general/svgExample.js: -------------------------------------------------------------------------------- 1 | function svgExample() 2 | { 3 | var canvas = d3.select("body") 4 | .append("svg") 5 | .attr("width", 700) 6 | .attr("height", 700); 7 | 8 | var circle = canvas.append("circle") 9 | .attr("cx", 10) 10 | .attr("cy", 10) 11 | .attr("r", 10) 12 | .attr("fill", "blue"); 13 | 14 | var rectangle = canvas.append("rect") 15 | .attr("width", 100) 16 | .attr("height", 100); 17 | 18 | var line = canvas.append("line") 19 | .attr("x1", 0) 20 | .attr("x2", 200) 21 | .attr("y1", 100) 22 | .attr("y2", 300) 23 | .attr("stroke", "grey") 24 | .attr("stroke-width", 3); 25 | 26 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3js", 3 | "version": "0.0.1", 4 | "description": "D3js Tutorial for Accio Code", 5 | "main": "index.html", 6 | "repository": "https://github.com/colorfest/d3js", 7 | "keywords": [ 8 | "d3", 9 | "javascript", 10 | "Accio Code", 11 | "tutorial", 12 | "beginners" 13 | ], 14 | "author": "Accio Code", 15 | "license": "MIT", 16 | "dependencies": { 17 | "gulp": "~3.9.1" 18 | }, 19 | "devDependencies": { 20 | "gulp-clean": "~0.3.2", 21 | "gulp-concat": "~2.6.0", 22 | "gulp-sass": "~2.2.0", 23 | "gulp-uglify": "~1.5.3", 24 | "del": "~2.2.0", 25 | "browser-sync": "~2.11.2", 26 | "run-sequence": "~1.1.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /bargraph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Accio Code D3js Tutorial - Bar Graph 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 |
19 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /js/general/visualizeOranges.js: -------------------------------------------------------------------------------- 1 | function visualizeOranges () 2 | { 3 | var orangeData = [10, 30, 50, 100]; 4 | 5 | var canvas = d3.select(".orangeContainer") 6 | .append("svg") 7 | .attr("width", 768) 8 | .attr("height", 1024); 9 | 10 | var oranges = canvas.selectAll("circle") 11 | .data(orangeData) 12 | .enter() 13 | .append("circle") 14 | .attr("fill", "orange") 15 | .attr("cx", function (d,i) 16 | { 17 | return d + (i * 100); 18 | }) 19 | .attr("cy", function (d) 20 | { 21 | return d; 22 | }) 23 | .attr("r", function (d) 24 | { 25 | return d; 26 | }); 27 | 28 | } -------------------------------------------------------------------------------- /js/general/enterExample.js: -------------------------------------------------------------------------------- 1 | function enterExamples () 2 | { 3 | var data = [200, 100], 4 | w = 800, 5 | h = 600; 6 | 7 | var canvas = d3.select(".graphContainer") 8 | .append("svg") 9 | .attr("width", w) 10 | .attr("height", h); 11 | 12 | var box = canvas.append("rect") 13 | .attr("width", 300) 14 | .attr("height", 300) 15 | .attr("fill", "red"); 16 | 17 | var boxes = canvas.selectAll("rect") 18 | .data(data) 19 | .exit() 20 | /*.enter() 21 | .append("rect") 22 | .attr("width", function (d) { return d;}) 23 | .attr("height", function (d) { return d;}) 24 | .attr("fill", "grey") 25 | .attr("stroke", "black")*/; 26 | } -------------------------------------------------------------------------------- /js/general/scaling.js: -------------------------------------------------------------------------------- 1 | function scaling () 2 | { 3 | var graphData = [10, 1200], 4 | w = 500, 5 | h = 800; 6 | 7 | var scaling = d3.scale.linear() 8 | .domain([0,1200]) 9 | .range([0,w]); 10 | 11 | var canvas = d3.select(".graphContainer") 12 | .append("svg") 13 | .attr("width", w) 14 | .attr("height", h); 15 | 16 | var graphBars = canvas.selectAll("rect") 17 | .data(graphData) 18 | .enter() 19 | .append("rect") 20 | .attr("fill", "pink") 21 | .attr("width", function (d) 22 | { 23 | return scaling(d); 24 | }) 25 | .attr("height", 20) 26 | .attr("y", function (d,i) 27 | { 28 | return i * 50; 29 | }) 30 | } -------------------------------------------------------------------------------- /js/general/paths.js: -------------------------------------------------------------------------------- 1 | function paths () 2 | { 3 | var canvas = d3.select(".paths").append("svg") 4 | .attr("width", 500) 5 | .attr("height", 500); 6 | 7 | var data = [ 8 | {x: 100, y: 20}, 9 | {x: 200, y: 100}, 10 | {x: 100, y: 200} 11 | ]; 12 | 13 | var group = canvas.append('g') 14 | .attr("transform", "translate(100,100)"); 15 | 16 | var line = d3.svg.line() 17 | .x(function(d) { return d.x}) 18 | .y(function(d) { return d.y}); 19 | 20 | group.selectAll("path") 21 | .data([data]) 22 | .enter() 23 | .append("path") 24 | .attr("d", line) 25 | .attr("fill", "none") 26 | .attr("stroke", "red") 27 | .attr("stroke-width", 5); 28 | 29 | var radius = 50; 30 | var p = Math.PI * 2; 31 | 32 | var arc = d3.svg.arc() 33 | .innerRadius(radius - 10) 34 | .outerRadius(radius) 35 | .startAngle(0) 36 | .endAngle(p); 37 | 38 | group.append("path") 39 | .attr("d", arc); 40 | 41 | 42 | } -------------------------------------------------------------------------------- /js/general/axis_groups.js: -------------------------------------------------------------------------------- 1 | function axisGroups () 2 | { 3 | var graphData = [100, 1200], 4 | w = 500, 5 | h = 800; 6 | 7 | var scaling = d3.scale.linear() 8 | .domain([0,1200]) 9 | .range([0,w]); 10 | 11 | var axis = d3.svg.axis() 12 | .ticks(2) 13 | .scale(scaling); 14 | 15 | var canvas = d3.select(".graphContainer") 16 | .append("svg") 17 | .attr("width", w) 18 | .attr("height", h) 19 | .append("g") 20 | .attr("transform", "translate(10,50)"); 21 | 22 | var graphBars = canvas.selectAll("rect") 23 | .data(graphData) 24 | .enter() 25 | .append("rect") 26 | .attr("fill", "pink") 27 | .attr("width", function (d) 28 | { 29 | return scaling(d); 30 | }) 31 | .attr("height", 20) 32 | .attr("y", function (d,i) 33 | { 34 | return i * 50; 35 | }) 36 | 37 | canvas.append("g") 38 | .attr("transform", "translate(0,200)") 39 | .call(axis); 40 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Accio Code 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/general/importData.js: -------------------------------------------------------------------------------- 1 | function importData () 2 | { 3 | d3.json("data/suicide-squad.json", function (data) 4 | { 5 | var canvas = d3.select(".importData").append("svg") 6 | .attr("width", 1000) 7 | .attr("height", 700); 8 | 9 | canvas.selectAll("rect") 10 | .data(data) 11 | .enter() 12 | .append("rect") 13 | .attr("width", function (d) 14 | { 15 | return d.rank * 60; 16 | }) 17 | .attr("height", 50) 18 | .attr("y", function (d, i) 19 | { 20 | return i * 80 21 | }) 22 | .attr("fill", "red"); 23 | 24 | canvas.selectAll("text") 25 | .data(data) 26 | .enter() 27 | .append("text") 28 | .attr("fill", "#ffffff") 29 | .attr("y", function (d,i) 30 | { 31 | return i * 80 + 30; 32 | }) 33 | .attr("x", 5) 34 | .text(function (d) 35 | { 36 | return d.name + " rank: " + d.rank; 37 | }) 38 | }) 39 | } 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Accio Code D3js Tutorial Series 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 38 | 39 | -------------------------------------------------------------------------------- /js/general/transitions.js: -------------------------------------------------------------------------------- 1 | function transitions () 2 | { 3 | var w = 800, 4 | h = 600; 5 | 6 | var canvas = d3.select(".transitionsContainer") 7 | .append("svg") 8 | .attr("width", w) 9 | .attr("height", h); 10 | 11 | var rect = canvas.append("rect") 12 | .attr("width", 100) 13 | .attr("height", 100) 14 | .attr("fill", "red"); 15 | 16 | var circle = canvas.append("circle") 17 | .attr("cx", 50) 18 | .attr("cy", 200) 19 | .attr("r", 50) 20 | .attr("fill", "blue"); 21 | 22 | circle.transition() 23 | .duration(2000) 24 | .delay(4000) 25 | .attr("cx", 200) 26 | .each("end", function () 27 | { 28 | d3.select(this) 29 | .attr("fill", "orange"); 30 | }); 31 | 32 | rect.transition() 33 | .duration(1000) 34 | .delay(2000) 35 | .attr("width", 200) 36 | .attr("transform", "translate(200,0)") 37 | .transition() 38 | .attr("transform", "translate(200,200)") 39 | .each("start", function () 40 | { 41 | d3.select(this) 42 | .attr("fill", "green"); 43 | }); 44 | } -------------------------------------------------------------------------------- /data/suicide-squad.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"name": "Deadshot", "actor": "Will Smith", "rank": 100, "description": "An expert marksman and assassin."}, 3 | {"name": "Harley Quinn", "actor": "Margot Robbie", "rank": 90, "description": "The Joker's main squeeze, the former psychiatrist is an insane sociopath with tremendous sex appeal."}, 4 | {"name": "Rick Flag", "actor": "Joel Kinnaman", "rank": 20, "description": "The defacto leader of the group, he takes his orders directly from Amanda Waller."}, 5 | {"name": "Boomerang", "actor": "Jai Courtney", "rank": 50, "description": "As his name suggests, Boomerang is an assassin who uses ... boomerangs."}, 6 | {"name": "El Diablo", "actor": "Jay Hernandez", "rank": 40, "description": "A former gang member who has seen a lot of violence, El Diablo can summon flames but tends to keep his anger and bloodlust in check."}, 7 | {"name": "Killer Croc", "actor": "Adewale Akinnuoye-Agbaje", "rank": 80, "description": "The most unique in appearance, Killer Croc is one of the most vicious and scariest of all the members, being a deformed humanoid with the appearance of a crocodile."}, 8 | {"name": "Enchantress", "actor": "Cara Delevingne", "rank": 70, "description": "Once an archeologist, the former June Moone was possessed by a witch."}, 9 | {"name": "Katana", "actor": "Karen Fukuhara", "rank": 60, "description": "Expert martial artists and swordswoman who can trap souls in her katana blade."}, 10 | {"name": "Slipnot", "actor": "Christopher Weiss", "rank": 25, "description": "Weilds a set of durable ropes that he uses as his 'slipknot'."} 11 | ] -------------------------------------------------------------------------------- /js/general/donutChart.js: -------------------------------------------------------------------------------- 1 | function donutChart () 2 | { 3 | d3.json("data/suicide-squad.json", function (data) 4 | { 5 | var radius = 100; 6 | var color = d3.scale.ordinal() 7 | .range(["red", "orange", "yellow", "green", "blue", "indigo", "violet"]); 8 | 9 | var canvas = d3.select(".donutChart") 10 | .append("svg") 11 | .attr("width", 1000) 12 | .attr("height", 1000); 13 | 14 | var group = canvas.append("g") 15 | .attr("transform", "translate(500,350)"); 16 | 17 | var arc = d3.svg.arc() 18 | .innerRadius(50) 19 | .outerRadius(radius); 20 | 21 | var pie = d3.layout.pie() 22 | .value(function (d) 23 | { 24 | return d.rank; 25 | }); 26 | 27 | var theArc = group.selectAll(".arc") 28 | .data(pie(data)) 29 | .enter() 30 | .append("g") 31 | .attr("class", "arc"); 32 | 33 | theArc.append("path") 34 | .attr("d", arc) 35 | .attr("fill", function (d) 36 | { 37 | return color(d.data.rank); 38 | }); 39 | 40 | theArc.append("text") 41 | .attr("transform", function (d) 42 | { 43 | return "translate(" + arc.centroid(d) + ")"; 44 | }) 45 | .attr("dy", "0.15em") 46 | .text(function (d) 47 | { 48 | return d.data.rank; 49 | }); 50 | }); 51 | } -------------------------------------------------------------------------------- /js/d3jsGraph.js: -------------------------------------------------------------------------------- 1 | function init () 2 | { 3 | var xMin = 0, 4 | xMax = 100, 5 | yMin = 0, 6 | yMax = 100 7 | gridUnitSize = 5, 8 | grid = null; 9 | 10 | var x = d3.scale.linear().domain([xMin,xMax]).range([0,xMax * gridUnitSize]); 11 | var y = d3.scale.linear().domain([yMin,yMax]).range([0,yMax * gridUnitSize]); 12 | 13 | //define container 14 | grid = d3.select("#gridContainer") 15 | .append("svg") 16 | .attr("class", "graph") 17 | .attr("width", (xMax * gridUnitSize) + 100) 18 | .attr("height", (yMax * gridUnitSize) + 100) 19 | .call(d3.behavior.zoom() 20 | .scaleExtent([1,3]) 21 | .on("zoom", function () 22 | { 23 | grid.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") 24 | })) 25 | .append("g") 26 | .attr("transform", "translate(20,20)"); 27 | 28 | //add axis layers 29 | grid.append("g") 30 | .attr("class", "x-grid") 31 | .selectAll("line.x") 32 | .data(x.ticks(20)) 33 | .enter() 34 | .append("line") 35 | .attr("class", "x") 36 | .attr("x1", x) 37 | .attr("x2", x) 38 | .attr("y1", 0) 39 | .attr("y2", yMax * gridUnitSize) 40 | .style("stroke", "#818181"); 41 | 42 | grid.append("g") 43 | .attr("class", "y-grid") 44 | .selectAll("line.y") 45 | .data(y.ticks(20)) 46 | .enter() 47 | .append("line") 48 | .attr("class", "y") 49 | .attr("x1", 0) 50 | .attr("x2", xMax * gridUnitSize) 51 | .attr("y1", y) 52 | .attr("y2", y) 53 | .style("stroke", "#818181"); 54 | } -------------------------------------------------------------------------------- /js/graph/init.js: -------------------------------------------------------------------------------- 1 | function init () 2 | { 3 | var xMin = 0, 4 | xMax = 100, 5 | yMin = 0, 6 | yMax = 100 7 | gridUnitSize = 5, 8 | grid = null; 9 | 10 | var x = d3.scale.linear().domain([xMin,xMax]).range([0,xMax * gridUnitSize]); 11 | var y = d3.scale.linear().domain([yMin,yMax]).range([0,yMax * gridUnitSize]); 12 | 13 | //define container 14 | grid = d3.select("#gridContainer") 15 | .append("svg") 16 | .attr("class", "graph") 17 | .attr("width", (xMax * gridUnitSize) + 100) 18 | .attr("height", (yMax * gridUnitSize) + 100) 19 | .call(d3.behavior.zoom() 20 | .scaleExtent([1,3]) 21 | .on("zoom", function () 22 | { 23 | grid.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") 24 | })) 25 | .append("g") 26 | .attr("transform", "translate(20,20)"); 27 | 28 | //add axis layers 29 | grid.append("g") 30 | .attr("class", "x-grid") 31 | .selectAll("line.x") 32 | .data(x.ticks(20)) 33 | .enter() 34 | .append("line") 35 | .attr("class", "x") 36 | .attr("x1", x) 37 | .attr("x2", x) 38 | .attr("y1", 0) 39 | .attr("y2", yMax * gridUnitSize) 40 | .style("stroke", "#818181"); 41 | 42 | grid.append("g") 43 | .attr("class", "y-grid") 44 | .selectAll("line.y") 45 | .data(y.ticks(20)) 46 | .enter() 47 | .append("line") 48 | .attr("class", "y") 49 | .attr("x1", 0) 50 | .attr("x2", xMax * gridUnitSize) 51 | .attr("y1", y) 52 | .attr("y2", y) 53 | .style("stroke", "#818181"); 54 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var clean = require('gulp-clean'); 3 | var concat = require('gulp-concat'); 4 | var sass = require('gulp-sass'); 5 | var uglify = require('gulp-uglify'); 6 | var runSequence = require('run-sequence'); 7 | var del = require('del'); 8 | var browserSync = require('browser-sync'); 9 | 10 | var buildDir = 'bin/'; 11 | var javaScriptFiles = ['js/general/*.js']; 12 | var graphJSFiles = ['js/graph/*.js']; 13 | var barGraphJSFiles = ['js/bargraph/*.js']; 14 | 15 | 16 | gulp.task('default', function () 17 | { 18 | return gulp.src(javaScriptFiles) 19 | .pipe(concat('js/d3jsTutorial.js')) 20 | .pipe(gulp.dest('./')); 21 | }); 22 | 23 | gulp.task('bargraph', function () 24 | { 25 | return gulp.src(barGraphJSFiles) 26 | .pipe(concat('js/d3jsBarGraph.js')) 27 | .pipe(gulp.dest('./')); 28 | }); 29 | 30 | gulp.task('graph', function () 31 | { 32 | return gulp.src(graphJSFiles) 33 | .pipe(concat('js/d3jsGraph.js')) 34 | .pipe(gulp.dest('./')); 35 | }); 36 | 37 | gulp.task('scripts', function () 38 | { 39 | console.log('run scripts!'); 40 | return gulp.src(javaScriptFiles) 41 | .pipe(concat('js/d3jsTutorial.js')) 42 | .pipe(gulp.dest('./')); 43 | }); 44 | 45 | gulp.task('sass', function () 46 | { 47 | gulp.src('css/*.scss') 48 | .pipe(sass()) 49 | .pipe(gulp.dest('css/')); 50 | }); 51 | 52 | /** run watch **/ 53 | gulp.task('watch', function () 54 | { 55 | gulp.watch('js/general/*.js', ['scripts']); 56 | gulp.watch('js/graph/*.js', ['graph']); 57 | gulp.watch('js/bargraph/*.js', ['bargraph']); 58 | //gulp.watch('css/**/*.scss', ['sass']); 59 | }); 60 | 61 | gulp.task('startBrowser', function () 62 | { 63 | browserSync({ 64 | server: { 65 | baseDir: './' 66 | } 67 | }) 68 | }); 69 | 70 | 71 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Accio Code Tutorials: D3js# 2 | 3 | *** Updated 1-22-17 *** 4 | 5 | This tutorial series for [Accio Code](http://www.youtube.com/user/CDPAdvertising "Accio Code on YouTube") is a beginner's course in D3.js, a JavaScript library for displaying data dynamically on a website. 6 | 7 | In this course we will be installing and running d3.js and learn the basics of how to use data to create charts, graphs, shapes, objects and a few useful lessons on making your own d3.js projects. 8 | 9 | ## What is D3js ## 10 | D3.js (Data Driven Documents) is not a programming language. It is a JavaScript based library used for creating dynamic data displays. 11 | D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to Document Object Model (DOM) manipulation. 12 | 13 | ## Course Videos ## 14 | 1. An Introduction to D3js (https://www.youtube.com/watch?v=K3FMuLT_3Ik "An Introduction to D3js") 15 | 2. Drawing SVG Images with D3js (https://youtu.be/8imtXLY0F9g "Drawing SVG Images with D3js") 16 | 3. Using Data to Draw Oranges (https://www.youtube.com/watch?v=4sgzOzPo_Dc "Using Data to Draw Oranges") 17 | 4. Scaling with D3js (https://www.youtube.com/watch?v=-ns5C7817x0 "Scaling with D3js") 18 | 5. Groups and Axis (https://www.youtube.com/watch?v=ljeKVFsaYBg "Groups and Axis") 19 | 6. Enter and Exit (https://www.youtube.com/watch?v=Mxt0OOBrvE0 "Enter and Exit") 20 | 7. Transitions (https://www.youtube.com/watch?v=LeJMhqA6xic "Transitions") 21 | 8. Import JSON into D3js (https://www.youtube.com/watch?v=duGyc25m9YI "Import JSON into D3js") 22 | 9. Using Paths in D3js (https://www.youtube.com/watch?v=0QlOBKBWcZ8 "Using Paths in D3js") 23 | 10. Drawing Arcs (https://www.youtube.com/watch?v=VxQaItLwYJE "Drawing Arcs") 24 | 11. Donut Charts (https://www.youtube.com/watch?v=0KB1tKCs7qE "Donut Charts") 25 | 12. Making a Bar Graph (https://www.youtube.com/watch?v=ZaU56QvqLu8&t=642s "Making a Bar Graph") 26 | 13. Adding Tooltips To Your Bar Graph (https://www.youtube.com/watch?v=wsCOif7RMBo "Adding Tooltips To Your Bar Graph") 27 | 14. Bar Graph Axis Lines ( "Bar Graph Axis Lines") -------------------------------------------------------------------------------- /js/d3jsBarGraph.js: -------------------------------------------------------------------------------- 1 | function barGraph () 2 | { 3 | //variables 4 | var margin = {top: 20, right: 20, bottom: 100, left: 60}, 5 | width = 800 - margin.left - margin.right, 6 | height = 500 - margin.top - margin.bottom, 7 | x = d3.scale.ordinal().rangeRoundBands([0,width], 0.5), 8 | y = d3.scale.linear().range([height,0]); 9 | 10 | //draw axis 11 | var xAxis = d3.svg.axis() 12 | .scale(x) 13 | .orient("bottom"); 14 | 15 | var yAxis = d3.svg.axis() 16 | .scale(y) 17 | .orient("left") 18 | .ticks(5) 19 | .innerTickSize(-width) 20 | .outerTickSize(0) 21 | .tickPadding(10); 22 | 23 | var svg = d3.select("#barGraph") 24 | .append("svg") 25 | .attr("width", width + margin.left + margin.right) 26 | .attr("height", height + margin.top + margin.bottom) 27 | .append("g") 28 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 29 | 30 | d3.json("data/suicide-squad.json", function (data) 31 | { 32 | x.domain(data.map(function (d) 33 | { 34 | return d.name; 35 | })); 36 | 37 | y.domain([0, d3.max(data, function (d) 38 | { 39 | return d.rank; 40 | })]); 41 | 42 | svg.append("g") 43 | .attr("class", "x axis") 44 | .attr("transform", "translate(0, " + height + ")") 45 | .call(xAxis) 46 | .selectAll("text") 47 | .style("text-anchor", "end") 48 | .attr("dx", "-0.5em") 49 | .attr("dy", "-.55em") 50 | .attr("y", 30) 51 | .attr("transform", "rotate(-45)" ); 52 | 53 | svg.append("g") 54 | .attr("class", "y axis") 55 | .call(yAxis) 56 | .append("text") 57 | .attr("transform", "rotate(-90)") 58 | .attr("y", 5) 59 | .attr("dy", "0.8em") 60 | .attr("text-anchor", "end") 61 | .text("Member Rank"); 62 | 63 | svg.selectAll("bar") 64 | .data(data) 65 | .enter() 66 | .append("rect") 67 | .style("fill", "orange") 68 | .attr("x", function(d) 69 | { 70 | return x(d.name); 71 | }) 72 | .attr("width", x.rangeBand()) 73 | .attr("y", function (d) 74 | { 75 | return y(d.rank); 76 | }) 77 | .attr("height", function (d) 78 | { 79 | return height - y(d.rank); 80 | }) 81 | .on("mouseover", function () 82 | { 83 | tooltip.style("display", null); 84 | }) 85 | .on("mouseout", function () 86 | { 87 | tooltip.style("display", "none"); 88 | }) 89 | .on("mousemove", function (d) 90 | { 91 | var xPos = d3.mouse(this)[0] - 55; 92 | var yPos = d3.mouse(this)[1] - 55; 93 | tooltip.attr("transform", "translate(" + xPos + "," + yPos + ")"); 94 | tooltip.select("text").text("Name: " + d.name + " : Rank: " + d.rank); 95 | }); 96 | 97 | var tooltip = svg.append("g") 98 | .attr("class", "tooltip") 99 | .style("display", "none"); 100 | 101 | tooltip.append("text") 102 | .attr("x", 15) 103 | .attr("dy", "1.2em") 104 | .style("text-anchor", "middle") 105 | .attr("font-size", "1.5em") 106 | .attr("font-weight", "bold"); 107 | }) 108 | } -------------------------------------------------------------------------------- /js/bargraph/bargraph.js: -------------------------------------------------------------------------------- 1 | function barGraph () 2 | { 3 | //variables 4 | var margin = {top: 20, right: 20, bottom: 100, left: 60}, 5 | width = 800 - margin.left - margin.right, 6 | height = 500 - margin.top - margin.bottom, 7 | x = d3.scale.ordinal().rangeRoundBands([0,width], 0.5), 8 | y = d3.scale.linear().range([height,0]); 9 | 10 | //draw axis 11 | var xAxis = d3.svg.axis() 12 | .scale(x) 13 | .orient("bottom"); 14 | 15 | var yAxis = d3.svg.axis() 16 | .scale(y) 17 | .orient("left") 18 | .ticks(5) 19 | .innerTickSize(-width) 20 | .outerTickSize(0) 21 | .tickPadding(10); 22 | 23 | var svg = d3.select("#barGraph") 24 | .append("svg") 25 | .attr("width", width + margin.left + margin.right) 26 | .attr("height", height + margin.top + margin.bottom) 27 | .append("g") 28 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 29 | 30 | d3.json("data/suicide-squad.json", function (data) 31 | { 32 | x.domain(data.map(function (d) 33 | { 34 | return d.name; 35 | })); 36 | 37 | y.domain([0, d3.max(data, function (d) 38 | { 39 | return d.rank; 40 | })]); 41 | 42 | svg.append("g") 43 | .attr("class", "x axis") 44 | .attr("transform", "translate(0, " + height + ")") 45 | .call(xAxis) 46 | .selectAll("text") 47 | .style("text-anchor", "end") 48 | .attr("dx", "-0.5em") 49 | .attr("dy", "-.55em") 50 | .attr("y", 30) 51 | .attr("transform", "rotate(-45)" ); 52 | 53 | svg.append("g") 54 | .attr("class", "y axis") 55 | .call(yAxis) 56 | .append("text") 57 | .attr("transform", "rotate(-90)") 58 | .attr("y", 5) 59 | .attr("dy", "0.8em") 60 | .attr("text-anchor", "end") 61 | .text("Member Rank"); 62 | 63 | svg.selectAll("bar") 64 | .data(data) 65 | .enter() 66 | .append("rect") 67 | .style("fill", "orange") 68 | .attr("x", function(d) 69 | { 70 | return x(d.name); 71 | }) 72 | .attr("width", x.rangeBand()) 73 | .attr("y", function (d) 74 | { 75 | return y(d.rank); 76 | }) 77 | .attr("height", function (d) 78 | { 79 | return height - y(d.rank); 80 | }) 81 | .on("mouseover", function () 82 | { 83 | tooltip.style("display", null); 84 | }) 85 | .on("mouseout", function () 86 | { 87 | tooltip.style("display", "none"); 88 | }) 89 | .on("mousemove", function (d) 90 | { 91 | var xPos = d3.mouse(this)[0] - 55; 92 | var yPos = d3.mouse(this)[1] - 55; 93 | tooltip.attr("transform", "translate(" + xPos + "," + yPos + ")"); 94 | tooltip.select("text").text("Name: " + d.name + " : Rank: " + d.rank); 95 | }); 96 | 97 | var tooltip = svg.append("g") 98 | .attr("class", "tooltip") 99 | .style("display", "none"); 100 | 101 | tooltip.append("text") 102 | .attr("x", 15) 103 | .attr("dy", "1.2em") 104 | .style("text-anchor", "middle") 105 | .attr("font-size", "1.5em") 106 | .attr("font-weight", "bold"); 107 | }) 108 | } -------------------------------------------------------------------------------- /js/d3jsTutorial.js: -------------------------------------------------------------------------------- 1 | function animations () 2 | { 3 | var data = [200, 100], 4 | w = 800, 5 | h = 600; 6 | 7 | var canvas = d3.select(".graphContainer") 8 | .append("svg") 9 | .attr("width", w) 10 | .attr("height", h); 11 | 12 | var box = canvas.append("rect") 13 | .attr("width", 300) 14 | .attr("height", 300) 15 | .attr("fill", "red"); 16 | 17 | box.transition() 18 | .duration(3000) 19 | .attr("width", 100) 20 | .attr("height", 100); 21 | } 22 | /** this is how we start d3js with javascript **/ 23 | function start () 24 | { 25 | d3.select("body") 26 | .append("p") 27 | .text("Load text with d3.js! today"); 28 | 29 | console.log(d3); 30 | } 31 | function axisGroups () 32 | { 33 | var graphData = [100, 1200], 34 | w = 500, 35 | h = 800; 36 | 37 | var scaling = d3.scale.linear() 38 | .domain([0,1200]) 39 | .range([0,w]); 40 | 41 | var axis = d3.svg.axis() 42 | .ticks(2) 43 | .scale(scaling); 44 | 45 | var canvas = d3.select(".graphContainer") 46 | .append("svg") 47 | .attr("width", w) 48 | .attr("height", h) 49 | .append("g") 50 | .attr("transform", "translate(10,50)"); 51 | 52 | var graphBars = canvas.selectAll("rect") 53 | .data(graphData) 54 | .enter() 55 | .append("rect") 56 | .attr("fill", "pink") 57 | .attr("width", function (d) 58 | { 59 | return scaling(d); 60 | }) 61 | .attr("height", 20) 62 | .attr("y", function (d,i) 63 | { 64 | return i * 50; 65 | }) 66 | 67 | canvas.append("g") 68 | .attr("transform", "translate(0,200)") 69 | .call(axis); 70 | } 71 | function donutChart () 72 | { 73 | d3.json("data/suicide-squad.json", function (data) 74 | { 75 | var radius = 100; 76 | var color = d3.scale.ordinal() 77 | .range(["red", "orange", "yellow", "green", "blue", "indigo", "violet"]); 78 | 79 | var canvas = d3.select(".donutChart") 80 | .append("svg") 81 | .attr("width", 1000) 82 | .attr("height", 1000); 83 | 84 | var group = canvas.append("g") 85 | .attr("transform", "translate(500,350)"); 86 | 87 | var arc = d3.svg.arc() 88 | .innerRadius(50) 89 | .outerRadius(radius); 90 | 91 | var pie = d3.layout.pie() 92 | .value(function (d) 93 | { 94 | return d.rank; 95 | }); 96 | 97 | var theArc = group.selectAll(".arc") 98 | .data(pie(data)) 99 | .enter() 100 | .append("g") 101 | .attr("class", "arc"); 102 | 103 | theArc.append("path") 104 | .attr("d", arc) 105 | .attr("fill", function (d) 106 | { 107 | return color(d.data.rank); 108 | }); 109 | 110 | theArc.append("text") 111 | .attr("transform", function (d) 112 | { 113 | return "translate(" + arc.centroid(d) + ")"; 114 | }) 115 | .attr("dy", "0.15em") 116 | .text(function (d) 117 | { 118 | return d.data.rank; 119 | }); 120 | }); 121 | } 122 | function enterExamples () 123 | { 124 | var data = [200, 100], 125 | w = 800, 126 | h = 600; 127 | 128 | var canvas = d3.select(".graphContainer") 129 | .append("svg") 130 | .attr("width", w) 131 | .attr("height", h); 132 | 133 | var box = canvas.append("rect") 134 | .attr("width", 300) 135 | .attr("height", 300) 136 | .attr("fill", "red"); 137 | 138 | var boxes = canvas.selectAll("rect") 139 | .data(data) 140 | .exit() 141 | /*.enter() 142 | .append("rect") 143 | .attr("width", function (d) { return d;}) 144 | .attr("height", function (d) { return d;}) 145 | .attr("fill", "grey") 146 | .attr("stroke", "black")*/; 147 | } 148 | function importData () 149 | { 150 | d3.json("data/suicide-squad.json", function (data) 151 | { 152 | var canvas = d3.select(".importData").append("svg") 153 | .attr("width", 1000) 154 | .attr("height", 700); 155 | 156 | canvas.selectAll("rect") 157 | .data(data) 158 | .enter() 159 | .append("rect") 160 | .attr("width", function (d) 161 | { 162 | return d.rank * 60; 163 | }) 164 | .attr("height", 50) 165 | .attr("y", function (d, i) 166 | { 167 | return i * 80 168 | }) 169 | .attr("fill", "red"); 170 | 171 | canvas.selectAll("text") 172 | .data(data) 173 | .enter() 174 | .append("text") 175 | .attr("fill", "#ffffff") 176 | .attr("y", function (d,i) 177 | { 178 | return i * 80 + 30; 179 | }) 180 | .attr("x", 5) 181 | .text(function (d) 182 | { 183 | return d.name + " rank: " + d.rank; 184 | }) 185 | }) 186 | } 187 | 188 | function paths () 189 | { 190 | var canvas = d3.select(".paths").append("svg") 191 | .attr("width", 500) 192 | .attr("height", 500); 193 | 194 | var data = [ 195 | {x: 100, y: 20}, 196 | {x: 200, y: 100}, 197 | {x: 100, y: 200} 198 | ]; 199 | 200 | var group = canvas.append('g') 201 | .attr("transform", "translate(100,100)"); 202 | 203 | var line = d3.svg.line() 204 | .x(function(d) { return d.x}) 205 | .y(function(d) { return d.y}); 206 | 207 | group.selectAll("path") 208 | .data([data]) 209 | .enter() 210 | .append("path") 211 | .attr("d", line) 212 | .attr("fill", "none") 213 | .attr("stroke", "red") 214 | .attr("stroke-width", 5); 215 | 216 | var radius = 50; 217 | var p = Math.PI * 2; 218 | 219 | var arc = d3.svg.arc() 220 | .innerRadius(radius - 10) 221 | .outerRadius(radius) 222 | .startAngle(0) 223 | .endAngle(p); 224 | 225 | group.append("path") 226 | .attr("d", arc); 227 | 228 | 229 | } 230 | function scaling () 231 | { 232 | var graphData = [10, 1200], 233 | w = 500, 234 | h = 800; 235 | 236 | var scaling = d3.scale.linear() 237 | .domain([0,1200]) 238 | .range([0,w]); 239 | 240 | var canvas = d3.select(".graphContainer") 241 | .append("svg") 242 | .attr("width", w) 243 | .attr("height", h); 244 | 245 | var graphBars = canvas.selectAll("rect") 246 | .data(graphData) 247 | .enter() 248 | .append("rect") 249 | .attr("fill", "pink") 250 | .attr("width", function (d) 251 | { 252 | return scaling(d); 253 | }) 254 | .attr("height", 20) 255 | .attr("y", function (d,i) 256 | { 257 | return i * 50; 258 | }) 259 | } 260 | function svgExample() 261 | { 262 | var canvas = d3.select("body") 263 | .append("svg") 264 | .attr("width", 700) 265 | .attr("height", 700); 266 | 267 | var circle = canvas.append("circle") 268 | .attr("cx", 10) 269 | .attr("cy", 10) 270 | .attr("r", 10) 271 | .attr("fill", "blue"); 272 | 273 | var rectangle = canvas.append("rect") 274 | .attr("width", 100) 275 | .attr("height", 100); 276 | 277 | var line = canvas.append("line") 278 | .attr("x1", 0) 279 | .attr("x2", 200) 280 | .attr("y1", 100) 281 | .attr("y2", 300) 282 | .attr("stroke", "grey") 283 | .attr("stroke-width", 3); 284 | 285 | } 286 | function transitions () 287 | { 288 | var w = 800, 289 | h = 600; 290 | 291 | var canvas = d3.select(".transitionsContainer") 292 | .append("svg") 293 | .attr("width", w) 294 | .attr("height", h); 295 | 296 | var rect = canvas.append("rect") 297 | .attr("width", 100) 298 | .attr("height", 100) 299 | .attr("fill", "red"); 300 | 301 | var circle = canvas.append("circle") 302 | .attr("cx", 50) 303 | .attr("cy", 200) 304 | .attr("r", 50) 305 | .attr("fill", "blue"); 306 | 307 | circle.transition() 308 | .duration(2000) 309 | .delay(4000) 310 | .attr("cx", 200) 311 | .each("end", function () 312 | { 313 | d3.select(this) 314 | .attr("fill", "orange"); 315 | }); 316 | 317 | rect.transition() 318 | .duration(1000) 319 | .delay(2000) 320 | .attr("width", 200) 321 | .attr("transform", "translate(200,0)") 322 | .transition() 323 | .attr("transform", "translate(200,200)") 324 | .each("start", function () 325 | { 326 | d3.select(this) 327 | .attr("fill", "green"); 328 | }); 329 | } 330 | function visualizeOranges () 331 | { 332 | var orangeData = [10, 30, 50, 100]; 333 | 334 | var canvas = d3.select(".orangeContainer") 335 | .append("svg") 336 | .attr("width", 768) 337 | .attr("height", 1024); 338 | 339 | var oranges = canvas.selectAll("circle") 340 | .data(orangeData) 341 | .enter() 342 | .append("circle") 343 | .attr("fill", "orange") 344 | .attr("cx", function (d,i) 345 | { 346 | return d + (i * 100); 347 | }) 348 | .attr("cy", function (d) 349 | { 350 | return d; 351 | }) 352 | .attr("r", function (d) 353 | { 354 | return d; 355 | }); 356 | 357 | } --------------------------------------------------------------------------------