Skip to content

Instantly share code, notes, and snippets.

@maartenzam
maartenzam / labelopacity-expression-bug.json
Created November 17, 2021 10:51
labelOpacity expression bug
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A dual axis chart, created by setting y's scale resolution to `\"independent\"`",
"width": 400, "height": 300,
"data": {
"url": "data/weather.csv"
},
"params": [{"name": "toggleHighlight", "bind": {"input": "checkbox"}}],
"transform": [{"filter": "datum.location == \"Seattle\""}],
"encoding": {
@maartenzam
maartenzam / binned-range-chart.json
Created November 8, 2021 12:17
Binned-range-chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Vega-Lite spec for FieldKit line charts.",
"transform": [
{
"bin": { "maxbins": 20 },
"field": "time",
"as": "bin_time"
},
{
@maartenzam
maartenzam / spec.json
Created November 3, 2021 14:05
Vega-Lite gradients
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Relative frequency histogram. The data is binned with first transform. The number of values per bin and the total number are calculated in the second and third transform to calculate the relative frequency in the last transformation step.",
"transform": [{
"bin": { "maxbins": 20 }, "field": "time", "as": "bin_time"
}, {
"aggregate": [{"op": "min", "field": "value", "as": "minimum"},{"op": "max", "field": "value", "as": "maximum"}],
"groupby": ["bin_time", "bin_time_end"]
},
{
@maartenzam
maartenzam / readme.md
Created October 22, 2017 20:25
World Tile Grid Map in ggplot2
{
"worldmap": [[801.6799926757812,344.3999938964844],[782.0983276367188,356.6065979003906],[802.478515625,367.76885986328125],[872.760009765625,368.2900085449219],[881.4645385742188,387.1751708984375],[891.0800170898438,391.399658203125],[157.49000549316406,245.42999267578125],[164.57000732421875,273.5638427734375],[164.84933471679688,255.50523376464844],[174.0253448486328,268.2433624267578],[186.19989013671875,296.9326171875],[212.39801025390625,309.43255615234375],[231.5328369140625,294.70355224609375],[211.44961547851562,297.9024353027344],[201.8348388671875,271.765380859375],[187.70925903320312,252.55181884765625],[537.77001953125,163.66000366210938],[493.8800048828125,247.49000549316406],[469.959716796875,256.4560089111328],[452.0821838378906,272.6263885498047],[470.53466796875,292.6482238769531],[495.9166564941406,296.44854736328125],[499.07000732421875,275.04310607910156],[468.2900085449219,252.27999877929688],[446.7232360839844,266.70408630371094],[428.6198425292969,289.60015869140625],[439.7600402832
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style id="jsbin-css">
.Asia {
fill: #FF265C
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style id="jsbin-css">
.Asia {
fill: #FF265C
@maartenzam
maartenzam / .block
Last active April 20, 2019 01:42
Directional dot plot
license: mit
@maartenzam
maartenzam / index.html
Last active September 25, 2017 22:03
Spark: the font for sparklines
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Spark font example</title>
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
<style>
@font-face {
font-family: spark-bar-medium;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20medium/spark-bar-medium.woff);
@maartenzam
maartenzam / README.md
Last active July 19, 2017 12:34
Responsive map with Cartodb/Leaflet

CartoDB/Leaflet map that adapts map dimensions (height) and zoom level based on map width. Open in new window and resize to view responsiveness.