Skip to content

Instantly share code, notes, and snippets.

View badosa's full-sized avatar

Xavier Badosa badosa

30 followers · 19 following
View GitHub Profile
@badosa
badosa / index.html
Last active November 21, 2019 05:07
Choropleth with D3 & JSON-stat
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
<style type="text/css">
.counties {
fill: none;
@badosa
badosa / index.html
Last active November 21, 2019 05:08
From JSON-stat to Table
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<style type="text/css">
h1 {
font-family: arial, helvetica;
text-align: center;
@badosa
badosa / index.html
Last active November 21, 2019 05:08
OECD Unemployment Choropleth
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<style type="text/css">
body {
font-family: verdana;
font-size: 80%;
@badosa
badosa / index.html
Last active November 21, 2019 05:09
The Unemployment Ranking Chart
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/jsonstat@0.13.13,npm/jsonstat-utils@2.5.5"></script>
<style type="text/css">
body {
margin: 10em;
font-family: verdana;
font-size: 80%;
@badosa
badosa / array.json
Last active December 18, 2015 01:59
Arrays vs. Objects
{
"category" : {
"index" : [
"01001",
"01003",
"01005",
"01007",
"01009",
"01011",
"01013",
@badosa
badosa / index.html
Last active November 21, 2019 05:09
Unemployment Patterns
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="/d/5723134/styles.css"/>
<script src="https://cdn.jsdelivr.net/combine/npm/jsonstat@0.13.13,npm/jsonstat-utils@2.5.5"></script>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
@badosa
badosa / index.html
Last active November 21, 2019 05:10
Norwegian Inflation Calculator
<!DOCTYPE html>
<html>
<head>
<title>Norwegian Inflation Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css" />
<link href="/d/5845359/style.css" type="text/css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
@badosa
badosa / index.html
Last active November 21, 2019 05:10
Dynamic Norwegian Pyramid
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Norwegian Pyramid</title>
<link href="/d/6103806/style.css" type="text/css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="https://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="https://rawgithub.com/asis/flot-pyramid/v1.0.0/src/jquery.flot.pyramid.js"> </script>
</head>
@badosa
badosa / hierarchy.json
Last active November 21, 2019 05:11
CPI, a Hierarchical Dimension
{
"hierarchy" : {
"label" : "Demo of hierarchical dimension",
"source" : "16th Series CPI Commodity Classification (http://www.abs.gov.au/AUSSTATS/abs@.nsf/DetailsPage/6401.0.55.0042011)",
"updated" : "2011-07-01",
"value" : { "0" : null },
"dimension" : {
"id" : ["commodity"],
"size" : [132],
"commodity" : {
@badosa
badosa / getjson.js
Last active November 21, 2019 05:12
Cross-browser Dynamic Pyramid
// getJSON jQuery Cross-browser XHR (Async JSONstat() works till IE8.)
// based on Matthew Mombrea's
// http://cypressnorth.com/programming/cross-domain-ajax-request-with-json-response-for-iefirefoxchrome-safari-jquery/
function getJSON(url, callback){
if(window.XDomainRequest){
// Use Microsoft XDR
var xdr=new XDomainRequest();
xdr.open("get", url);
xdr.onload=function (){