Margaret Greaney greaneym

Please open in a new window to try this out.

This is a work in progress.

With permission from peacecorps.gov, I am making an example of the 2016 University Rankings using the libraries from d3.js, dc.js, crossfilter.js and reductio.js. I have been inspired by the design on peacecorps.gov, which was created using highcharts.js. Because I am learning dc.js, crossfilter and reductio, I thought this would be a good use of time and effort to recreate what I consider to be good design. I have spent considerable time reading other peoples' examples on stackoverflow and have had help which I intend to document. For example, Ethan Jewett helped me with the reductio.js library.

This is a work in progress. Open in a new window. With permission from peacecorps.gov, to share an example using crossfilter.js, dc.js and d3.js instead of highcharts.js.

Part Two of example with subset of data containing one small, medium and large college. It is easier to debug a problem when you are not using a large data file for input.

I was stuck on the problem of how to group the "flattened" data until I was helped by Ethan Jewett on Stack Overflow. He helped me with the correct reductio library use on the group that yielded the countries in key,value format. That allowed them to match up with the key,value from properties.name attributes in the json. Also, I checked the json he used in the example and found by comparison my json was missing two countries.

This is a work in progress.

With permission from peacecorps.gov, I am creating a crossfilter.js, dc.js example based on the University Rankings for 2016. The example on peacecorps.gov was made with another library.

I found that this was a good way for me to learn more about crossfilter, dc and d3, and I am sharing what I learned. The design of the page is, in my opinion, very clear and shows the data very well, and is seen here, http://www.peacecorps.gov/volunteer/learn/clp/college-rankings/#college/4854

I began with a dataset that was not from the site, because at the time it wasn't available. This first gist shows a display of test7.csv, which contains one country per university and contains fictional data. The second gist will show the data from

	.button {
	position: absolute;
	left: 20px;
	margin: 5px;
	top: 5px;
	background-color: #f9fcfd;
	height: 45px;
	width: 55px;
	font-family: normal 20px/1.5 "Open Sans", sans-serif;
	font-color: "black"; }

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>FCC Zipline Scatter Plot using D3</title>
	<style>

	#header1 {
	background: url("https://static.pexels.com/photos/248547/pexels-photo-248547.jpeg");
	width:100%;
	height: 90%;
	background-size: cover;

	//Based on Mike Bostock’s Block 3020685
	//and Mike Hadlow’s Block 93b471e569e31af07cd3

	// I plan to redo this in future as it not "dry"

	var format = d3.time.format("%Y-%m-%d");
	var formatYear = d3.time.format("%Y %b");

	var margin = {top: 20, right: 30, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,

	var timer;
	var song;
	var audio1 = window.AudioContext \|\| window.webkitAudioContext \|\| window.mozAudioContext \|\| window.oAudioContext,
	position = 0,
	scale = {
	g: 392,
	f: 349.23,
	e: 329.63,
	a: 440,
	b: 493.88

	// this is a modification of Mike Bostock's digital clock
	// I've made it into a Pomodoro Timer for the FCC Zipline challenge

	(function () {
	'use strict';
	angular.module('d3AngularApp.controllers', ['d3'])
	.controller('clockCntrl', ['d3', '$scope', '$location','$interval', function(d3, $scope,$location, $interval){

	$scope.drawExpired = function() {
	$scope.duration = 0;