mhkeller

license: gpl-3.0
border: no
height: 500

mhkeller

/**
 * Copyright 2017 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software

mhkeller

mhkeller

#393939 #747369 #515151 #a09f93 #2d2d2d #d3d0c8 #74736930 #cc99cc #f2777a #6699cc

mhkeller

#0cf - Hot blue
#fc0 - Hot orange
#0fc - Hot sea green
#f0c - Hot pink
#f0a - Hot pink two

#01df3a - Hot green
#f3f0df - The Beige
#F76464 - Coral

mhkeller

// const monthLengths = {
// 	'2020-03': 31,
// 	'2020-02': 29,
// 	'2020-01': 31,

// 	'2019-12': 31,
// 	'2019-11': 30,
// 	'2019-10': 31,
// 	'2019-09': 30,
// 	'2019-08': 31,

mhkeller

# Put this function to your .bashrc file.
# Usage: mv oldfilename
# If you call mv without the second parameter it will prompt you to edit the filename on command line.
# Original mv is called when it's called with more than one argument.
# It's useful when you want to change just a few letters in a long name.

function mv() {
  if [ "$#" -ne 1 ]; then
    command mv "$@"
    return

mhkeller

// Adapted from here: https://stackoverflow.com/questions/4413590/javascript-get-array-of-dates-between-2-dates
module.exports = function genDateRange(start, end, format) {
	let arr;
	let dt;
	for (arr = [], dt = new Date(start); dt <= end; dt.setDate(dt.getDate() + 1)) {
		arr.push(new Date(dt));
	}
	if (format === 'strings') {
		return arr.map(v => v.toISOString().slice(0, 10));
	}

mhkeller

Making charts

Problems you run into

1. Low-level is tedious and not explained in online examples

   • https://bl.ocks.org/mhkeller/7d2869752cfd041b5bdcdc23d7aa6c25
   • https://bl.ocks.org/mhkeller/bee14fe4abbf535a507ec034aa746b40

2. High-level is complex

mhkeller

<script>
    import { LayerCake, Svg, calcExtents, flatten } from 'layercake';
    import { tweened } from 'svelte/motion';
    import * as eases from 'svelte/easing';
    import Line from '../../components/Line.svelte';

    export let data;
    export let shared;

    const y = tweened(undefined, {