Christmas Assigner Problem

So I just encountered a very interesting problem, and came up with a likewise very interesting solution. Recently, my family has made the switch from everyone getting gifts for everyone for Christmas to each person getting gifts for a single person assigned to them. I volunteered to make a JavaScript auto-assigner that will randomly assign one person to each of us and then privately email each of us with the person that we have been assigned.

(Finished in only 589 lines of code, not including another 420 lines of test code!)

Flash of Unstyled Content (Annoying White Flash)

Yup, I'm about to cover one of the most prominent web page styling problems ever known to man: the Flash of Unstyled Content (FOUC)!

What is it? Well, there are two different ways of explaining it:

1. To the viewer, it's that annoying white flash that you see every time you view a different page on a website when the website has a background image or background color that isn't white.
2. To the web coder, it's that short moment of time during which the page is unstyled (defaulting to a blank white page) that annoys the viewers.

Let's fix it! :)

Averaging Multidimensional Data for D3 Part 2

In my previous tutorial, I showed you conceptually how to average the data such that the 3 pieces of data in each row are averaged together and only 1 bar and text is shown per row for each average. This time I'm actually going to backtrack to the code I was using in the tutorial before that so that I can show you another way of averaging the data.

What we're going to average this time are not the 3 pieces of data per row (we're going to leave those alone this time); instead, we're going to average all of the elements each with a unique "Site Type" and "Media Type" value together.

Averaging Multidimensional Data for D3

Building from the example in my previous tutorial, I am only going to slightly modify a few aspects of the graph. My goal for this tutorial is to show how to code the graph differently such that the 3 pieces of data per row are averaged together into 1 piece of data per row.

Using Multi-Column Data with D3 Part 2

Okay, so after reading my previous tutorial we are now capable of loading in a CSV file with multi-column data and completely reconstructing it.

That's great! but... what about being able to categorize, filter, (somewhat) transition, and color the representation of that data? That's what this tutorial is all about! :)

Using Multi-Column Data with D3 Part 1

In my previous tutorial, I showed how to import data from a CSV file or a text file. However, oftentimes the type of data that you need to use has multiple columns, like so:

Column 1 Title, Column 2 Title, Column 3 Title
1, 2, 3
4, 5, 6

rather than being in a single column format, like this:

1
2
3
4
5
6

One common reason for having multi-column data is if all of the data can be split into categories and you need to visually show which category each piece of data is in, through colors, spacing, positioning, highlighting, font size, or etc.

In this tutorial, I'm just going to show you how to fully reconstruct the data by accessing it in memory, as it's not entirely the simplest thing for a beginner to do. Once we're able to access individual pieces of data, we'll be able to create multi-column/multi-category graphs, filter out certain categories of data, color them, etc.

Using CSV (and Text) Files with D3

This tutorial is in response to a request by someone who wanted to know how to use data from CSV (Comma Separated Values) files with D3. Interestingly enough, you will also see how the data can be stored into and read from a simple text file (instead) along the way.

The CSV file format is commonly used in spreadsheets, and it's pretty well known to programmers as one of the easiest formats to read and write data with. Why? Take a look at what a CSV file's contents could be:

2345, 345, sdfgsd, 3453,
wgdg, 34, fsg, dgd, 34534.634,

sfsfggsdfgsdfgsdfh, 4, "hello",
-2

If you look past the stupidity of the bogus "data" I used in that example, you'll see that it's fairly simplistic! Every value is separated by a comma - hence, Comma Separated Values (CSV).

Before I show you how to use CSV, you should know that I made an "Introduction to D3" tutorial earlier. I highly recommend that you read it first.

Introduction to D3

This tutorial is in response to a request by someone who wanted a basic introduction to D3. I've never used D3 before, but I've learned a bit about it so far and this is just an introduction to get you started anyways.

Basically, what I've found is that D3 is a lot like JQuery in many regards. You can select existing (and not-yet-existing) elements, manipulate them graphically, perform animations, etc. The best aspect of D3 seems to be that although the learning curve is rather steep for anyone who's a beginning coder, it actually ends up making most tasks of displaying/arranging data on a web page very simple and easy - you just have to know how. :)

Using the PhotoSwipe Image Gallery Script

This tutorial is in response to a specific request by someone who wanted to know how to implement the PhotoSwipe Image Gallery script into a mobile JQuery website. Here's a link to PhotoSwipe for some context and a download link of the script for yourself:

http://www.photoswipe.com/

Here is a link to what our final product will be - you should test it out:

http://thecodingwebsite.com/tutorials/photoswipe/photoswipe.html

I basically just used their code examples and example images and removed all of the unnecessary code and such to determine the essential parts needed for a mobile JQuery website implementation. If you would like to just download my working example as a whole, I have placed it into a zip file for you:

http://thecodingwebsite.com/tutorials/photoswipe.zip

Importing JQuery into your Website

JQuery is an extension of JavaScript that uses various techniques to virtually extend the capabilities of what you can create with plain JS. The website for JQuery can be found here:

http://jquery.com/

The most recent version of JQuery as of the creation of this tutorial is 1.7.1. You can (and should, if you're going to use it) download the production version of it here:

http://code.jquery.com/jquery-1.7.1.min.js

You can download it by visiting the URL and then clicking File > Save As (or Save Page As) in your browser.

An Overview of Web Pages

Index

I have created this index due to the amount of information present in this tutorial. Feel free to skim past any sections that contain information you already know. This tutorial provides the very basic information about how web pages work in general, and near the end it starts to focus a little bit on how to extend your HTML pages with CSS and JavaScript coding.

An Overview of Web Pages
W3 Schools
HTML
CSS
Extending web page capabilities
JavaScript vs. browser plugin languages
HTML basics
Head tags
Body tags
HTML page example, with CSS and JavaScript
Conclusion