mgold

This scatterplot shows how the pro-gun NRA and the pro-gun-control Brady Campaign rank U.S. senators. The size of the dot is proportional to the number of senators; hover over to see them. Not surprisingly, there's a strong negative correlation.

Each scatter dot is actually a pie chart, but I am saved from the wrath of the datavis gods by political polarization: there are no Democrats and Republicans that share a stance.

The data were surpringly hard to come by but were sourced from VoteSmart (Brady) and The Washington Post (NRA).

Built with blockbuilder.org.

mgold

require "json"
require "net/http"
require "uri"

def download(name)
  puts "Installing " + name
  `elm package install #{name} --yes`
end

def prompt(instructions)

mgold

module Main (..) where

import Color
import Date exposing (Date)
import Task exposing (Task)
import Json.Decode
import Html exposing (Html, div, tr, td, th)
import Html.Attributes as Attrs exposing (class)
import Html.Events exposing (onClick, on)
import StartApp exposing (start)

mgold

module SuperTimer where

import Html exposing (..)
import Html.Events exposing (onClick)
import Time exposing (Time)
import Signal exposing (Address)

type Action = Tick Time | Toggle Bool | NoOp

type alias Model = { running: Bool, count: Float}

mgold

This is a recreation of xkcd 893, updated with the lunar astronauts who died after it was made in 2011.

The axes are done with d3.sketchy but it's really the wrong look for emulating the comic.

Built with blockbuilder.org

mgold

Different ways to find the "center" of a triangle. Inspired by Numberphile. Grab and move the vertices of the large triangle.

• The centroid is found by connecting each angle with the midpoint of the opposite side. All three such lines meet at a single point.

• The circumcenter is is the intersection of the perpendicular bisectors of each side. Therefore it is equidistant from the three vertices, and is the center of the circle defined by them.

• The orthocenter is defined by dropping a vertical from each angle down to the opposite side (extending the side if necessary). The vertical does not usually intersect at the midpoint. Once again, all three such lines intersect at one point.

• The incenter is defined by bisecting each angle with a line continued to the opposite side.

mgold

module Perlin (noise, octaves) where
{-|
Technically, this is an implementation of [Improved Noise](http://mrl.nyu.edu/~perlin/paper445.pdf), a refinement on the
original Perlin noise, but not Simplex Noise.

-}
import Random.PCG as PCG

type alias Gradient = (Float, Float)

mgold

Built with blockbuilder.org

mgold

Grab the brown and black knobs. You can also dial some of the numbers on the right.

Spherical coordinates are defined by ρ (rho, the distance from the origin), θ (theta, rotation parallel to the xy-plane), and φ (phi, inclination from the north pole to the south pole). This interactive drawing shows how they relate to the Cartesian xyz coordinates. The key is the horizontal slice of radius r.

• z = ρ cos φ
• r = ρ sin φ

Which makes sense: when φ=0, we're looking at the north pole, z=ρ and r=0. Then we're left with the familiar equations:

• x = r cos θ

mgold

module SpinSquare (Model, Action, init, update, view) where

{-| A fork of the eight example in the Elm Architecture tutorial, showing how it would be done with elm-animation. It
    turns out to be a lot simpler, both because of the animation itself and because we cheat a little: we don't stop
    asking for clock ticks even when we don't need them. This saves a lot of bookkeeping around current vs. elapsed
    time, as the animation library assumes you have a constantly running clock shared among all components.

    By definition, encapsulated components cannot share a clock, and so as you add more squares, expect things to get
    slower. That said, two squares work just fine. This module is a drop-in replacement for the upstream version.