Skip to content

Instantly share code, notes, and snippets.

View yan2014's full-sized avatar

Joan yan2014

7 followers · 0 following
View GitHub Profile
@yan2014
yan2014 / data.csv
Last active October 22, 2015 17:51
Week2: High Charts
row White African American
32-40 204130.93 61454.078
38-46 383043.64 122756.27
41-49 410386.43 99313.841
44-52 493450.35 109144.06
47-55 671449.03 137073.24
50-58 974449.18 171990.58
53-61 1155156.3 265305.89
56-64 1261739.3 249652.44
59-67 1203205 172400.03
@yan2014
yan2014 / angular-route.min.js
Last active October 22, 2015 17:49
Week 2: Another JS library
/*
AngularJS v1.2.1
(c) 2010-2012 Google, Inc. http://angularjs.org
License: MIT
*/
(function(v,c,B){'use strict';function y(t,q,l,b,f){return{restrict:"ECA",terminal:!0,priority:400,transclude:"element",link:function(k,A,n,C,x){function w(){g&&(g.$destroy(),g=null);p&&(f.leave(p),p=null)}function d(){var a=t.current&&t.current.locals,e=a&&a.$template;if(e){var z=k.$new();x(z,function(u){u.html(e);f.enter(u,null,p||A,function(){!c.isDefined(r)||r&&!k.$eval(r)||q()});w();var h=l(u.contents()),m=t.current;g=m.scope=z;p=u;if(m.controller){a.$scope=g;var d=b(m.controller,a);m.controllerAs&&
(g[m.controllerAs]=d);u.data("$ngControllerController",d);u.children().data("$ngControllerController",d)}h(g);g.$emit("$viewContentLoaded");g.$eval(s)})}else w()}var g,p,r=n.autoscroll,s=n.onload||"";k.$on("$routeChangeSuccess",d);d()}}}v=c.module("ngRoute",["ng"]).provider("$route",function(){function t(b,f){return c.extend(new (c.extend(function(){},{prototype:b})),f)}function q(b,c){var k=c.caseInsensitiveMatch,l={origin
@yan2014
yan2014 / index.html
Last active October 22, 2015 17:34
Week 3: Basic D3 Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Eastern Asia Improved the Most</h1>
<p>This table shows regional access to improved water over 15 years. </p>
@yan2014
yan2014 / index.html
Last active October 22, 2015 16:13
Week4: Heatmap table
<!--Make a table like the one in d3_table_heatmap.html for your data. It should be sortable using stupidtable.js. Make a color scale for one of your numeric columns. You can use the scale on a font or the background. Same rules as above:
Week4: Heatmap table
Style it (with CSS or in d3).
Make the column names nice ones for people to read in the table.
Sort the data in javascript for a default sort order that's sensible.
Make sure the headers have a cursor that looks like it's a pointer, that indicates you can click.
Be sure to add text identifying source and explaining the data.
Send me the gist: "Week4: Heatmap table"-->
<!--http://data.unicef.org/education/overview.html-->
<!DOCTYPE html>
@yan2014
yan2014 / index.html
Last active October 22, 2015 16:08
Week 4: SVG fixes
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Shapes</title>
<link rel="stylesheet" type="text/css" href="main.css"> </head>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
@yan2014
yan2014 / index.html
Last active October 22, 2015 18:06
Week 4: Barchart
<!DOCTYPE html>
<!-- Modified version of Scott Murray's file from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontal Bar - Dynamic Domain</title>
<link rel="stylesheet" type="text/css" href="main.css"> </head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
@yan2014
yan2014 / betterlifeindex.csv
Last active October 22, 2015 18:05
Week 5: X-Life satisfaction; Y-Years in education
We can make this file beautiful and searchable if this error is corrected: It looks like row 7 should actually have 25 columns, instead of 1. in line 6.
country,dwellingsWithoutBasicFacilities,housingExpenditure,roomsPerPerson,householdNetAdjustedDisposableIncome,householdNetFinancialWealth,employmentRate,jobSecurity,longTermUnemploymentRate,personalEarnings,qualityOfSupportNetwork,educationalAttainment,studentSkills,yearsInEducation,airPollution,waterQuality,consultationOnRuleMaking,voterTurnout,lifeExpectancy,selfReportedHealth,lifeSatisfaction,assaultRate,homicideRate,employeesWorkingVeryLongHours,timeDevotedToLeisureAndPersonalCare
Australia,1.1,20,2.3,31197,38482,72,4.4,1.06,46585,93,74,512,18.8,13,93,10.5,93,82,85,7.4,2.1,0.8,14.23,14.41
Austria,1,21,1.6,29256,48125,73,3.4,1.07,43837,95,82,500,16.9,27,95,7.1,75,81.1,69,7.5,3.4,0.5,8.61,14.46
Belgium,1.9,20,2.3,27811,78368,62,4.5,3.37,47276,91,71,509,18.8,21,84,4.5,89,80.5,74,7.1,6.6,1.2,4.41,15.71
Brazil,6.7,21,1.4,10310,6875,67,4.8,2.17,7909,90,43,402,16.3,18,67,4,79,73.4,69,7.2,7.9,25.5,10.74,14.97
Canada,0.2,22,2.5,30212,63261,72,6.6,0.9,44017,94,89,522,17,15,90,10.5,61,81,88,7.6,1.3,1.7,3.98,14.25
C
@yan2014
yan2014 / index.html
Last active October 22, 2015 18:04
Week 5: Bar chart with axises
<!DOCTYPE html>
<!-- Modified version of Scott Murray's file from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontal Bar - Dynamic Domain</title>
<link rel="stylesheet" type="text/css" href="main.css"> </head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
@yan2014
yan2014 / index.html
Last active October 22, 2015 18:03
Week 5: Scatter plots
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primary Education</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<div>
@yan2014
yan2014 / index.html
Last active October 22, 2015 18:03
Week 5: Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding Labels</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>