Skip to content

Instantly share code, notes, and snippets.

View kanitw's full-sized avatar

Kanit Wongsuphasawat kanitw

View GitHub Profile
@kanitw
kanitw / .block
Last active February 23, 2018 05:22 — forked from domoritz/.block
Vega-Lite Bl.ocks example
license: bsd-3-clause
@kanitw
kanitw / .block
Last active October 5, 2017 16:46
Vega-Lite block example
license: bsd-3-clause
@kanitw
kanitw / Layer.vl.json
Last active August 4, 2017 16:36
Vega-lite Quick Demo
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "Summarized and per year weather information for Seatle and New York.",
"data": {"url": "data/weather.csv"},
"repeat": {"column": ["temp_max","precipitation","wind"]},
"spec": {
"layer": [
{
"mark": "line",
"encoding": {
[{
"Year": 1955,
"Country": "Afghanistan",
"Region": "South Asia",
"Population": 8891209,
"Life Expectancy": 30.332,
"Fertility": 7.7
}, {
"Year": 1960,
"Country": "Afghanistan",
name economy (mpg) cylinders displacement (cc) power (hp) weight (lb) 0-60 mph (s) year
AMC Ambassador Brougham 13 8 360 175 3821 11 73
AMC Ambassador DPL 15 8 390 190 3850 8.5 70
AMC Ambassador SST 17 8 304 150 3672 11.5 72
AMC Concord DL 6 20.2 6 232 90 3265 18.2 79
AMC Concord DL 18.1 6 258 120 3410 15.1 78
AMC Concord DL 23 4 151 3035 20.5 82
AMC Concord 19.4 6 232 90 3210 17.2 78
AMC Concord 24.3 4 151 90 3003 20.1 80
AMC Gremlin 18 6 232 100 2789 15 73
[
{"x": 1, "cat": null},
{"x": 1, "cat": null},
{"x": 1, "cat": null},
{"x": 1, "cat": null},
{"x": 2, "cat": "a"},
{"x": 3, "cat": 1},
{"x": 2, "cat": 1},
{"x": 2, "cat": null},
{"x": 2, "cat": "b"},
@kanitw
kanitw / filtered_line.json
Created April 15, 2016 22:17 — forked from willium/filtered_line.json
vega label specs
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/stocks.csv",
"format": {
"type": "csv",
{
"width": 200,
"height": 200,
"padding": "auto",
"data": [
{
"name": "source",
"url": "data/cars.json",
"format": {"type": "json","parse": {"Acceleration": "number"}},
"transform": [
@kanitw
kanitw / README.md
Last active August 29, 2015 14:26 — forked from mbostock/.block
Lab and HCL Color Spaces

D3 supports CIELAB (Lab) and CIELCH (HCL) color spaces, which are designed for humans rather than computers.

Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called perceptual uniformity, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.

You can create Lab or HCL colors in D3 directly using d3.lab or d3.hcl. For example:

var steelblue = d3.lab(52, -4, -32);
var steelblue = d3.hcl(-97, 32, 52);
@kanitw
kanitw / controller.js
Last active August 29, 2015 14:14
angular directive template
'use strict';
angular.module('__appname__')
.controller('__controller__Ctrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});