Skip to content

Instantly share code, notes, and snippets.

@jekkilekki

jekkilekki/.block

Last active January 19, 2017 01:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jekkilekki/588243a5ae6fff95ed81010c9e418e77 to your computer and use it in GitHub Desktop.
Save jekkilekki/588243a5ae6fff95ed81010c9e418e77 to your computer and use it in GitHub Desktop.
Download ZIP
Lynda.com Author & Courses Bar chart
Raw
.block
license: gpl-3.0
Raw
README.md

This is a basic barchart that I'm going to be using on my Year in Review site.

Raw
data.csv
month day category title author hours minutes courseLink certificate image summary
1 24 WordPress WordPress DIY: Community Website Morten Rand-Hendriksen 2 16 https://www.lynda.com/tutorial/383782 https://www.lynda.com/ViewCertificate/3D77F4908D4B4A7ABC71A23D0091E256?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
1 25 WordPress WordPress Ecommerce: Core Concepts Morten Rand-Hendriksen 1 3 https://www.lynda.com/ViewCertificate/38CD6EC34A8940B0A9C850138E50604B?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
1 26 WordPress WordPress Ecommerce Patrick Rauland 1 10 https://www.lynda.com/tutorial/379262 https://www.lynda.com/ViewCertificate/70A0C847AA1A432992980ECD8BEBA7C6?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
1 26 CSS Making Sense of the CSS Box Model Morten Rand-Hendriksen 0 50 https://www.lynda.com/tutorial/372544 https://www.lynda.com/ViewCertificate/29BCDC8082744477A14ACDF1A68C4A0D?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
1 26 WordPress WordPress Workflows Morten Rand-Hendriksen 1 6 https://www.lynda.com/tutorial/361684 https://www.lynda.com/ViewCertificate/E85356368408445B88349C075C25B667?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 1 HTML HTML5: Web Forms in Depth Joe Marini 1 58 https://www.lynda.com/tutorial/80852 https://www.lynda.com/ViewCertificate/C5E9709C4DCB4C56A3507A7F085B8D4D?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 1 Forms Web Form Design Best Practices Luke Wroblewski 3 46 https://www.lynda.com/tutorial/83786 https://www.lynda.com/ViewCertificate/2A31E65779F740E5BE453577ABED7721?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 2 CSS CSS: Styling Forms Ray Villalobos 4 1 https://www.lynda.com/tutorial/90368 https://www.lynda.com/ViewCertificate/F3F75A19CCB4441983DFAFBC41441642?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 3 Forms Validating and Processing Forms with JavaScript and PHP Ray Villalobos 2 51 https://www.lynda.com/tutorial/120466 https://www.lynda.com/ViewCertificate/7C4FDEB523E2431797A201BF1F9B15E2?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 4 InDesign InDesign Insider Training: Print PDFs David Blatner 1 16 https://www.lynda.com/tutorial/155936 https://www.lynda.com/ViewCertificate/59ACBC9664BE4D058621892674E09E3A?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 6 JavaScript Introducing the JavaScript Language Joe Chellman 2 55 https://www.lynda.com/tutorial/123563 https://www.lynda.com/ViewCertificate/B97D4C50D4E44048B13F615EE21919BB?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
2 17 WordPress WordPress: Building Themes from Scratch Using Underscores Morten Rand-Hendriksen 6 39 https://www.lynda.com/tutorial/417653 https://www.lynda.com/ViewCertificate/28EE441460A34D908BB5A494DA417A3C?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 1 WordPress Moving WordPress with WP Migrate DB and DB Pro Morten Rand-Hendriksen 1 3 https://www.lynda.com/tutorial/472837 https://www.lynda.com/ViewCertificate/793D1308F7724D259681DA08D1157717?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 2 WordPress WordPress: Building Child Themes Morten Rand-Hendriksen 2 27 https://www.lynda.com/tutorial/422838 https://www.lynda.com/ViewCertificate/562203F672A940AA8641B5EB6F69B855?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 4 CSS Advanced Responsive Layouts with CSS Flexbox Morten Rand-Hendriksen 1 49 https://www.lynda.com/tutorial/383780 https://www.lynda.com/ViewCertificate/3D77F4908D4B4A7ABC71A23D0091E256?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 5 CSS CSS: Flexbox First Look James Williamson 2 3 https://www.lynda.com/tutorial/116352 https://www.lynda.com/ViewCertificate/680D97323DDF4EA49BC17EF908F7695C?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 7 Forms Building Responsive Forms with Flexbox James Williamson 1 20 https://www.lynda.com/tutorial/383123 https://www.lynda.com/ViewCertificate/9D0EA9C2EC954770BEB62F0E27B376DE?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 18 PHP Introducing PHP David Powers 6 57 https://www.lynda.com/tutorial/418256 https://www.lynda.com/ViewCertificate/ACEF75CDFCA74926BE175B962D472841?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 20 PHP Creating Secure PHP Websites Kevin Skoglund 4 16 https://www.lynda.com/tutorial/133321 https://www.lynda.com/ViewCertificate/0E40A4023D8349ACA214983F082EF31A?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 25 PHP PHP for Web Designers David Powers 5 26 https://www.lynda.com/tutorial/146234 https://www.lynda.com/ViewCertificate/EEE5C6196F7140D6A3071B45DFC4B7B6?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
3 26 PHP Easy PHP Projects: Time Zone Conversion Kevin Skoglund 2 54 https://www.lynda.com/tutorial/418853 https://www.lynda.com/ViewCertificate/3F8D2E55E5C94EA8A6E5008FAC7E1C70?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
4 1 PHP Easy PHP Projects: Single-Serving Sites Kevin Skoglund 3 1 https://www.lynda.com/tutorial/418850 https://www.lynda.com/ViewCertificate/53C0C9B1AE0449B183330FC0EFC162F7?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
4 4 Infographics Pop Chart Lab’s Infographic Poster Design: Start to Finish Patrick Mulligan & Ben Gibson 0 9 https://www.lynda.com/tutorial/142218 https://www.lynda.com/ViewCertificate/65E70E58C13F434CB14E26E02C24B3BB?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
4 7 PHP Easy PHP Projects: Measurement Conversion Kevin Skoglund 2 17 https://www.lynda.com/tutorial/418852 https://www.lynda.com/ViewCertificate/616D0DC1B635483AA80B9FA01F0E9BB5?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
4 11 Career J.T. O’Donnell on Making Recruiters Come to You J.T. O'Donnell 0 26 https://www.lynda.com/tutorial/454669 https://www.lynda.com/ViewCertificate/6B5105F56D4C48FB8EF662AEDEB3D041?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
4 12 Infographics Infographics Fundamentals Amy Balliett 1 11 https://www.lynda.com/tutorial/376982 https://www.lynda.com/ViewCertificate/70FFA57921FA4744812B77AEA2F1FBFA?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
4 15 Branding Personal Branding on Social Media Karen Leland 1 8 https://www.lynda.com/tutorial/417148 https://www.lynda.com/ViewCertificate/7887980024F04DA3BE4A5BF3F5EDC457?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
5 15 PHP PHP with MySQL Essential Training Kevin Skoglund 14 32 https://www.lynda.com/tutorial/119003 https://www.lynda.com/ViewCertificate/7D6842D1A9D14E85A726CB0808890ECE?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
6 12 Logos The Science of Logo Design William Lidwell 0 45 https://www.lynda.com/tutorial/149123 https://www.lynda.com/ViewCertificate/D593AA34845C4EE192B6A8A76D6D04EE?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
6 12 Logos Before & After: Logo Design Tips and Tricks John McWade 0 57 https://www.lynda.com/tutorial/380379 https://www.lynda.com/ViewCertificate/060B540AE1694B0DA3FA8FD688034A72?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
6 26 WordPress WordPress: Building a Paid Membership Site Morten Rand-Hendriksen 1 48 https://www.lynda.com/tutorial/468148 https://www.lynda.com/ViewCertificate/3C39522563DB47098C734504B3A01D87?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 8 Career Building and Maintaining your UX Design Portfolio Diane Cronenwett 0 16 https://www.lynda.com/tutorial/483023 https://www.lynda.com/ViewCertificate/2F57BD785D184FC28CEEE3E6A174FD79?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 8 Career Becoming a Web Developer: Full Stack vs. Front End Ray Villalobos 0 40 https://www.lynda.com/tutorial/483022 https://www.lynda.com/ViewCertificate/B0954A06EC734652AFB19CF72CBE5EC1?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 9 JavaScript Online Presentations with reveal.js Ray Villalobos 2 2 https://www.lynda.com/tutorial/137904 https://www.lynda.com/ViewCertificate/7850891CA95D42819497E2B8A9F11DA9?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 10 Atom Learn Atom: The Basics Ray Villalobos 2 2 https://www.lynda.com/tutorial/468147 https://www.lynda.com/ViewCertificate/32CFD03D66CE408C950C0D0FD1476EC3?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 14 PHP PHP with MySQL Beyond the Basics Kevin Skoglund 10 26 https://www.lynda.com/tutorial/653 https://www.lynda.com/ViewCertificate/82B74E6BB3D145B6B06F7392DEA85434?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 14 WordPress WordPress Essential Training Morten Rand-Hendriksen 5 28 https://www.lynda.com/tutorial/372542 https://www.lynda.com/ViewCertificate/FE05EDC8B1294EEA8C9208B1CAB40167?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 14 WordPress WordPress Developer Tips: Information Architecture and the Template Hierarchy Morten Rand-Hendriksen 0 21 https://www.lynda.com/tutorial/174240 https://www.lynda.com/ViewCertificate/A9E0FD8083244E99A5BA91B42B56CC5C?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 15 WordPress WordPress: Developing with Sass and Grunt.js Morten Rand-Hendriksen 1 36 https://www.lynda.com/tutorial/372540 https://www.lynda.com/ViewCertificate/F57DED9E27B64BB68686ACD417F80B8D?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 15 WordPress Customizing WordPress Themes: Simone Morten Rand-Hendriksen 1 2 https://www.lynda.com/tutorial/176754 https://www.lynda.com/ViewCertificate/15C0EE08BC6F42CD8F4C7DF62CFE6910?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 15 PHP Easy PHP Projects: Password Utilites Kevin Skoglund 1 56 https://www.lynda.com/tutorial/418851 https://www.lynda.com/ViewCertificate/1938604A000C4EC6B596E2EFB0CF9136?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 16 PHP Uploading Files Securely with PHP David Powers 2 50 https://www.lynda.com/tutorial/158374 https://www.lynda.com/ViewCertificate/1AF5DEFD00D0464184DB00EBE76EAB2A?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 16 WordPress WordPress: Custom Post Types and Taxonomies Morten Rand-Hendriksen 1 45 https://www.lynda.com/tutorial/163113 https://www.lynda.com/ViewCertificate/B2F1A74F848D41AC96AEC95A61E7042B?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 16 WordPress Accessibility for WordPress Joe Dolson 1 31 https://www.lynda.com/tutorial/374185 https://www.lynda.com/ViewCertificate/EDBACBDD9A744A2FB31F6EA9593A9C4A?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 17 Git Version Control for Everyone Joe Chellman 2 6 https://www.lynda.com/tutorial/378045 https://www.lynda.com/ViewCertificate/8030ED77E8784CFAB72C7A0AF573AA5C?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 17 WordPress WordPress Plugins: Advanced Custom Fields Morten Rand-Hendriksen 1 39 https://www.lynda.com/tutorial/169877 https://www.lynda.com/ViewCertificate/D81C5931AAB7496CA97B3907B04D0D1B?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 17 Fundamentals Programming Fundamentals in the Real World Barron Stone 3 8 https://www.lynda.com/tutorial/418249 https://www.lynda.com/ViewCertificate/BF727B127EFE4F149ED5A1F41E3AB6E0?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 18 HTML HTML Essential Training James Williamson 5 54 https://www.lynda.com/tutorial/170427 https://www.lynda.com/ViewCertificate/738977E9464444AB9D93F64A62B89A93?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 19 CSS CSS Fundamentals James Williamson 2 51 https://www.lynda.com/tutorial/417645 https://www.lynda.com/ViewCertificate/3C3CABE0C4124931BD716AC5091C4E18?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 19 JavaScript jQuery for Web Designers Joe Chellman 1 42 https://www.lynda.com/ViewCertificate/48C782A8223641F5B7507D73185A2520?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
7 22 PHP Managing PHP Persistent Sessions David Powers 2 41 https://www.lynda.com/tutorial/382572 https://www.lynda.com/ViewCertificate/4B129AB0DD654F3C96698E8834B2C6AF?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
9 28 Git Up and Running with Git and GitHub Ray Villalobos 1 21 https://www.lynda.com/tutorial/409275 https://www.lynda.com/ViewCertificate/570D369A9C074B10B68359710BF3D0B7?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 2 PHP MVC Frameworks for Building PHP Web Applications Drew Falkman 2 39 https://www.lynda.com/tutorial/315196 https://www.lynda.com/ViewCertificate/29DFE74EBB8D478E917F42D857B6DB26?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 16 WordPress WordPress: Creating Custom Plugins with PHP Carrie Dils 1 48 https://www.lynda.com/tutorial/508212 https://www.lynda.com/ViewCertificate/D9A9D8C25A234F5FB2925BB5EA42C6DB?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 16 PHP PHP 7 New Features Kevin Skoglund 1 4 https://www.lynda.com/tutorial/474422 https://www.lynda.com/ViewCertificate/EEEFFCF4C91B4749A7BCAA55AD2F367E?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 17 WordPress WordPress and Internationalization Carrie Dils 0 54 https://www.lynda.com/tutorial/497771 https://www.lynda.com/ViewCertificate/912B7ED7D2D345DEBE520EC33B55B8A5?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 19 WordPress WordPress REST API (WP-API): First Look Morten Rand-Hendriksen 1 38 https://www.lynda.com/tutorial/383783 https://www.lynda.com/ViewCertificate/B5831B6E61324EC682CD5BE4CC575AD4?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 20 WordPress AngularJS and WordPress: Building a Single-Page Application Roy Sivan 0 32 https://www.lynda.com/tutorial/423997 https://www.lynda.com/ViewCertificate/04BB925C637745C7970AC530EE70A254?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 22 PHP PHP: Advanced Topics Justin Yost 2 17 https://www.lynda.com/tutorial/483233 https://www.lynda.com/ViewCertificate/A7F591B65BCB4FD0804632C61717F9CF?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 27 SVG Web Icons with SVG Morten Rand-Hendriksen 1 44 https://www.lynda.com/tutorial/502312 https://www.lynda.com/ViewCertificate/BA5049D717CA405CA9DC39C50C2440EF?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
10 28 Bootstrap Bootstrap 4: First Look Ray Villalobos 1 13 https://www.lynda.com/tutorial/372547 https://www.lynda.com/ViewCertificate/C6FF13B155204B73B56A89FD4D58BADD?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
11 2 InDesign InDesign CC 2017: New Features Justin Seeley 0 7 https://www.lynda.com/tutorial/439426 https://www.lynda.com/ViewCertificate/C11EE752EF6D4B84A69D41201001D7CA?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
11 17 Web Design the Web: Animated Loading GIFs Chris Converse 0 26 https://www.lynda.com/tutorial/124090 https://www.lynda.com/ViewCertificate/72006D02CAE04ABB941B1F23FC2E00E1?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
11 30 Fundamentals Foundations of Programming: Fundamentals Simon Allardice 4 47 https://www.lynda.com/tutorial/83603 https://www.lynda.com/ViewCertificate/F5D4415673E04105BBB1DAD4EB580B5F?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 9 JavaScript Learn React.js: The Basics Eve Porcello 1 41 https://www.lynda.com/tutorial/519668 https://www.lynda.com/ViewCertificate/85F783AEB53F4584880E4EFB9508AA02?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 17 WordPress WordPress Themes: Twenty Seventeen Morten Rand-Hendriksen 0 36 https://www.lynda.com/tutorial/548047 https://www.lynda.com/ViewCertificate/4CA74A954CD74BBAB9360FBB588A977F?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 28 Fundamentals Foundations of Programming: Databases Simon Allardice 3 11 https://www.lynda.com/tutorial/412845 https://www.lynda.com/ViewCertificate/F89C1FF124F74BE9BA9531F56F859EEC?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 29 MySQL MySQL Essential Training Bill Weinman 4 24 https://www.lynda.com/tutorial/139986 https://www.lynda.com/ViewCertificate/E0AC0D8F596348029B4B842216F7A960?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 29 CSS CSS: Core Concepts James Williamson 8 52 https://www.lynda.com/tutorial/80435 https://www.lynda.com/ViewCertificate/5C8BD8744B8540BD9CF072653845B340?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 30 PHP Code Clinic: PHP David Powers 4 44 https://www.lynda.com/tutorial/162137 https://www.lynda.com/ViewCertificate/B74E16142CF94C9F9A22523177465825?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
12 31 JavaScript JavaScript Essential Training Simon Allardice 5 31 https://www.lynda.com/tutorial/81266 https://www.lynda.com/ViewCertificate/73D2F0ED9DE842A596BE4B465E3C84FA?utm_source=directlink&utm_medium=sharing&utm_campaign=certificate
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style-base.css">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div class="wrap">
<section id="chart"></section>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
/**
* Data Array
*/
var dataArray = [
{
name: 'Morten Rand-Hendriksen',
courses: 18
},
{
name: 'Ray Villalobos',
courses: 7
},
{
name: 'Kevin Skoglund',
courses: 8
},
{
name: 'David Powers',
courses: 5
},
{
name: 'Simon Allardice',
courses: 3
},
{
name: 'James Williamson',
courses: 5
}
];
//dataArray.sort( function compareNumbers(a,b) {
// return b-a;
//});
/**
* Variables and Scales
*/
var margin = { top:30, right:30, bottom:40, left:50 };
var width = 600 - margin.right - margin.left,
height = 450 - margin.top - margin.bottom,
barWidth = 50,
barOffset = 5,
tempColor = '';
// Color scale (Quantitative - linear)
var colors = d3.scale.linear()
.domain([0, dataArray.length*0.5, dataArray.length])
.range(['#91a8d0', '#839791', '#896978']);
// Y Scale : Quantitative - Linear scale
var yScale = d3.scale.linear()
.domain([0, 20])
.range([height, 0]);
// Y Axis
var yAxis = d3.svg.axis()
.scale( yScale )
.orient( 'left' )
.ticks( 10 );
// X Scale : Ordinal scale
var xScale = d3.scale.ordinal()
.domain( d3.range(0, dataArray.length) )
.rangeBands([ 0, width ])
// .paddingInner( 0.1 );
// X Axis
var xAxis = d3.svg.axis()
.scale( xScale )
.orient( 'bottom' )
.tickValues( dataArray.name );
// Tooltip
var tooltip = d3.select( 'body' ).append( 'div' )
.style( 'position', 'absolute' )
.style( 'background', 'white' )
.style( 'color', '#3399cc' )
.style( 'padding', '3px 15px' )
.style( 'borderRadius', '5px' )
.style( 'opacity', 0 );
/**
* D3 Chart Creation
*/
var chart = d3.select( '#chart' ).append( 'svg' )
.style( 'background', '#f7f5f5' )
.style( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' )
.attr( 'width', width + margin.left + margin.right )
.attr( 'height', height + margin.top + margin.bottom );
chart.append( 'g' )
.style( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' )
.selectAll( 'rect' ).data( dataArray )
.enter().append( 'rect' )
.attr( 'fill', function(d,i) { if ( i === 0 ) { return 'white'; } else { return 'rgba(0,0,0,' + 1/i + ')'; } })
.attr( 'fill', function(d,i) { return colors(i); })
.attr( 'width', xScale.rangeBand() )
.attr( 'height', 0 )
.attr( 'x', function(d,i) { return xScale(i); })
.attr( 'y', height )
.on( 'mouseover', function(d) {
tooltip.transition().style( 'opacity', 1 );
tooltip.html(d)
.style( 'left', (d3.event.pageX - 30) + 'px')
.style( 'top', (d3.event.pageY - 30) + 'px');
tempColor = this.style.fill;
d3.select( this )
.style( 'opacity', 0.5 )
.style( 'fill', '#3399cc' );
})
.on( 'mouseout', function(d) {
d3.select( this )
.style( 'opacity', 1 )
.style( 'fill', tempColor )
})
.transition()
.attr( 'height', function(d) { return yScale(d.courses); })
.attr( 'y', function(d) { return yScale(d.courses); })
.delay( function(d,i) { return i * 100; })
.duration( 1000 )
.ease( 'elastic' );
// Add Axes
chart.append( 'g' ).attr( 'class', 'y axis' ).attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' ).call( yAxis );
chart.append( 'g' ).attr( 'class', 'x axis' ).attr( 'transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')' ).call( xAxis );
Raw
style-base.css
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,700|Play:400,700');
/* Eric Meyer's Reset CSS v2.0 - http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) */
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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
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: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* Palette
blue #3399cc
periwinkle #91a8d0
gray #738290
darkgray #2b303a
wine #896978
green #839791
*/
* { position: relative; box-sizing: border-box; }
img { display: block; }
body { font-size: 16px; font-weight: 400; line-height: 1.2; font-family: 'Maven Pro', sans-serif; color: #738290; background: white; }
strong {
font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Play', sans-serif;
font-weight: 700;
color: #2b303a;
margin-bottom: 1.2em;
}
h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1px; }
h5 { font-size: 1.1rem; text-transform: uppercase; }
h4 { font-size: 1.35rem; }
h3 { font-size: 1.5rem; }
h2 { font-size: 2rem; }
h1 { font-size: 3rem; }
p {
margin-bottom: 0.6em;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
margin-top: 1em;
}
@media all and (max-width: 500px) {
h2 {
padding-left: 1em;
text-align: center;
}
.container {
width: 100%;
}
}
#chart {
margin: 0 auto;
}
Raw
style.css
svg {
width: 600px;
height: 400px;
}
Raw
z-notes.md

Some quick D3 notes:

Selections

d3.select( element );
d3.select( node );
d3.selectAll( elements );
d3.selectAll( nodes );

HTML

d3.select( element ).text( 'Changes the text' );
d3.select( element ).html( '<span>Changes the <strong>HTML</strong></span>' );
d3.select( element ).append( 'div' ).html( '<span>Appends a div with this HTML</span>' );
d3.select( element ).insert( 'span', ':nth-child(3)' ).html( 'Insert a span @ <em>nth-child(3)</em>' );
d3.select( element ).remove();

CSS

d3.select( element ).attr( 'class', 'highlight' ); // changes the class to highlight
d3.select( element ).classed( 'highlight', true ); // ADDS the class highlight to the previous class list (toggling)
d3.select( element ).classed({ 'highlight': true, 'item': false, 'bigger': true }); // object passing handles multiple classes
d3.select( element ).style({ 'backgroundColor': '#268bd2', 'color': '#eee8d5' }); // pass object to control CSS as well

DOM

d3.selectAll( elements ).data( [true] ).style( 'background', '#268bd2' ); // applies to first element (data array binds to elements in order)
d3.selectAll( elements ).data( myStyles ).style( 'background', myStyles[0] ); // same as above, but passing in an array with the value
d3.selectAll( elements ).data( myStyles ).style( 'background', function(d) { return d; } ); // same as above, using multiple array values
d3.selectAll( elements ).data( myStyles ).style({ 'color': 'white', 'background': function(d) { return d; } }); // same as above, using an object to change multiple values

// Same as above, passing in an array of objects
var myStyles = [{ width: 200, color: '#268bd2' }, { width: 300, color: '#eee8d5' }];
d3.selectAll( elements ).data( myStyles ).style({ 
  'color': 'white',
  'background': function(d) { return d.color; },
  'width': function(d) { return d.width; }
});

.enter()

// Same as above, but enter() appends a bunch of divs into a temporary placeholder
// so you must selectAll .item's after selecting the #chart to append them back in to #chart
// The selectAll( '.item' ) command is connected with the .append( 'div' ) with a class 'item'
var myStyles = [{ width: 200, name: 'Aaron', color: '#268bd2' }, { width: 300, name: 'Sarah', color: '#eee8d5' }];
d3.select( #chart ).selectAll( '.item' )
  .data( myStyles )
  .enter().append( 'div' )
  .classed( 'item', true )
  .text( function(d) { return d.name; })
  .style({ 
    'color': 'white',
    'background': function(d) { return d.color; },
    'width': function(d) { return d.width; }
  });

SVG

Ref: https://developer.mozilla.org/en-US/docs/Web/SVG/

<svg width="600" height="400" style="background: #93a1a1"></svg>
<rect x="250" y="150" width="100" height="100" style="fill: #c61c6f" />
<circle cx="300" cy="200" r="50" style="fill: #840043" />
<text x="10" y="390" font-family="sans-serif" font-size="24" fill="white">SVG Graphics</text>
<g id="group" class="triangle"><polyline points="10 35, 30 10, 50 35" style="fill: #f7b330" /></g>
<use xlink:href="#group" x="30" y="0" />

SVG with D3

d3.select( '#chart' ).append( 'svg' ).attr( 'width', 600 ).attr( 'height', 400 ).style( 'background', '#93a1a1' ); // same as above
d3.select( 'svg' ).append( 'rect' ).attr( 'x', 250 ).attr( 'y', 150 ).attr( 'width', 100 ).attr( 'height', 100 ).style( 'fill', '#840043' ); // same as above

D3 Scales

  • Quantitative (numbers) aka like <ul> lists (order doesn't matter)
  • Ordinal (names, categories) aka like <ol> lists (order matters)
  • Time (times, dates)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment