Skip to content

Instantly share code, notes, and snippets.

View fraserxu's full-sized avatar
🐢
No idea

Fraser Xu fraserxu

🐢
No idea
458 followers · 49 following
View GitHub Profile
@fraserxu
fraserxu / index.js
Last active August 29, 2015 14:06
requirebin sketch
var React = require('react')
var jsonp = require('jsonp')
var APP = React.createClass({
getInitialState: function() {
return {
user: {}
}
},
@fraserxu
fraserxu / index.html
Created November 20, 2014 08:30
Hello World
<html>
<body>
Hello World!
</body>
</html>
@fraserxu
fraserxu / index.html
Created December 8, 2014 07:56
Embedding test
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSViz embedding test</title>
</head>
<body>
<h4>CSViz embedding test</h4>
<iframe width="400" height="800" frameborder="0" scrolling="y" marginheight="0" marginwidth="0" src="http://csviz.github.io/csviz"></iframe>
</body>
@fraserxu
fraserxu / README.md
Last active August 29, 2015 14:11 — forked from mbostock/.block

This variation of a line chart demonstrates how to use a linear gradient to change the color of a line based on a y-threshold. This technique is similar to the gradient encoding, but with two stops at the same offset. An alternative method is to draw multiple lines with different colors and different clipping regions.

@fraserxu
fraserxu / china_provinces.json
Created December 18, 2014 06:38
china population stack barchart
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@fraserxu
fraserxu / layout.scss
Created December 23, 2014 03:06
sass responsive layout mixins
$tablet-width: 768px;
$desktop-width: 1024px;
@mixin tablet {
@media (max-width: #{$tablet-width - 1px}) {
@content;
}
}
@mixin desktop {
@fraserxu
fraserxu / pattern.js
Created February 5, 2015 03:22
svg pattern generator
var btoa = require('btoa')
var fs = require('fs')
var pattern = fs.readFileSync('test.svg', { encoding: 'utf-8'})
var b64 = btoa(pattern)
var b64 = "data:image/svg+xml;base64," + b64
console.log(b64)
@fraserxu
fraserxu / gist:b2bb29bb360b2f8c9e20
Created February 25, 2015 06:29
keybase.md
### Keybase proof
I hereby claim:
* I am fraserxu on github.
* I am fraserxu (https://keybase.io/fraserxu) on keybase.
* I have a public key whose fingerprint is FAB4 7AE3 198F D595 1D44 D34C 311B 021F 9AFF 7F3F
To claim this, I am signing this object:
@fraserxu
fraserxu / addDate.js
Created February 28, 2015 10:19
date add
function dateAdd(date, interval, units) {
var ret = new Date(date); //don't change original date
switch(interval.toLowerCase()) {
case 'year' : ret.setFullYear(ret.getFullYear() + units); break;
case 'quarter': ret.setMonth(ret.getMonth() + 3*units); break;
case 'month' : ret.setMonth(ret.getMonth() + units); break;
case 'week' : ret.setDate(ret.getDate() + 7*units); break;
case 'day' : ret.setDate(ret.getDate() + units); break;
case 'hour' : ret.setTime(ret.getTime() + units*3600000); break;
case 'minute' : ret.setTime(ret.getTime() + units*60000); break;
@fraserxu
fraserxu / gist:98a2a30601752526864f
Created March 20, 2015 04:53
make a grouped array
var data = {"16":1,"17":5,"18":324,"19":396,"20":456,"21":441,"22":454,"23":525,"24":488,"25":499,"26":498,"27":551,"28":556,"29":556,"30":555,"31":558,"32":590,"33":543,"34":552,"35":621,"36":569,"37":593,"38":532,"39":565,"40":590,"41":625,"42":587,"43":624,"44":647,"45":718,"46":656,"47":724,"48":725,"49":690,"50":649,"51":650,"52":675,"53":666,"54":563,"55":663,"56":537,"57":619,"58":529,"59":535,"60":479,"61":484,"62":415,"63":457,"64":381,"65":332,"66":294,"67":333,"68":329,"69":262,"70":232,"71":245,"72":198,"73":198,"74":185,"75":193,"76":162,"77":221,"78":151,"79":155,"80":150,"81":122,"82":125,"83":99,"84":84,"85":115,"86":89,"87":105,"88":70,"89":65,"90":65,"91":59,"92":63,"93":55,"94":35,"95":38,"96":37,"97":27,"98":35,"99":30,"100":19,"101":19,"102":12,"103":12,"104":11,"105":8,"106":9,"107":5,"108":13,"109":5,"110":7,"111":2,"112":6,"113":3,"114":1};
var ages = [], years = [];
var groupIndex = 1;
var maxGroupIndex = 16;
// make years
for (var i = 18; i < 98; i++ ) {
years.push(i)
}