type Aggregation =
  | CountAll
  | Sum of string
  | Mean of string
  | CountDistinct of string

Full name: index.Aggregation
union case Aggregation.CountAll: Aggregation
union case Aggregation.Sum: string -> Aggregation
Multiple items
val string : value:'T -> string

Full name: Microsoft.FSharp.Core.Operators.string

--------------------
type string = System.String

Full name: Microsoft.FSharp.Core.string
union case Aggregation.Mean: string -> Aggregation
union case Aggregation.CountDistinct: string -> Aggregation
type Transformation =
  | DropColumns of string list
  | SortBy of (string * SortDirection) list
  | GroupBy of string list * Aggregation list
  | Paging of Paging list

Full name: index.Transformation
union case Transformation.DropColumns: string list -> Transformation
type 'T list = List<'T>

Full name: Microsoft.FSharp.Collections.list<_>
union case Transformation.SortBy: (string * SortDirection) list -> Transformation
Multiple items
union case SortDirection.SortDirection: SortDirection

--------------------
type SortDirection = | SortDirection

Full name: index.SortDirection
union case Transformation.GroupBy: string list * Aggregation list -> Transformation
Multiple items
union case Transformation.Paging: Paging list -> Transformation

--------------------
type Paging = | Paging

Full name: index.Paging
Multiple items
union case State.State: State

--------------------
type State = | State

Full name: index.State
Multiple items
union case Event.Event: Event

--------------------
module Event

from Microsoft.FSharp.Control

--------------------
type Event = | Event

Full name: index.Event

--------------------
type Event<'T> =
  new : unit -> Event<'T>
  member Trigger : arg:'T -> unit
  member Publish : IEvent<'T>

Full name: Microsoft.FSharp.Control.Event<_>

--------------------
type Event<'Delegate,'Args (requires delegate and 'Delegate :> Delegate)> =
  new : unit -> Event<'Delegate,'Args>
  member Trigger : sender:obj * args:'Args -> unit
  member Publish : IEvent<'Delegate,'Args>

Full name: Microsoft.FSharp.Control.Event<_,_>

--------------------
new : unit -> Event<'T>

--------------------
new : unit -> Event<'Delegate,'Args>
type unit = Unit

Full name: Microsoft.FSharp.Core.unit
Multiple items
union case Html.Html: Html

--------------------
type Html = | Html

Full name: index.Html



Visualizing Olympic Medals
with F# and Fable




Tomas Petricek, Alan Turing Institute & fsharpWorks
@tomaspetricek | tomasp.net | fsharpworks.com

Welcome to the post-fact world

Technology democratized opinions

Can it also democratize facts?

Data-driven storytelling

Can the result be reproduced?

Is the visualization misleading?

Can the reader explore further?

The Gamma

DEMO: Visualizing Olympic medalists

Domain-oriented programming

Domain over mechanism


Object-oriented programming

Functional programming

Test-driven development



Fable

The F# to JavaScript
compiler for the 21st century

Reasonably nice modern JavaScript

Active and welcoming community

Pragmatic functional-first style

See fable.io for docs & demos

Modeling data transformations

DEMO: Aggregating Olympic medalists

(http://rio2016.thegamma.net/shared/22/)

Dot-driven programming via type providers


Dot-driven programming via type providers


What actually is a transformation?

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 

type Aggregation = 
  | CountAll
  | Sum of string
  | Mean of string
  | CountDistinct of string

type Transformation = 
  | DropColumns of string list
  | SortBy of (string * SortDirection) list
  | GroupBy of string list * Aggregation list
  | Paging of Paging list

DEMO: Evaluating data transformation

Modeling program structure

Article as a program
is a powerful paradigm

Validate facts with original source

Provide common programming tools

Let users find related facts

DEMO: Choosing disciplines for a timeline

(http://rio2016.thegamma.net/shared/12/)

DEMO: Writing tests for the parser

Modeling user interfaces

DEMO: Editor for pivot type provider

(http://thegamma.net)

Elm-style architecture

Elm-style architecture

1: 
2: 
3: 
4: 
5: 

// Calculate new state when event happens
val update : State -> Event -> State

// Render HTML from the current state
val render : (unit -> Event) -> State -> Html

Implementing Elmish TODO list

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

type Update = 
  | Input of string
  | Remove of Guid
  | Create 

type Model = 
  { Items : (Guid * string) list 
    Input : string }

DEMO: Implementing TODO list

DEMO: Domain model for the pivot editor

Summary

Make facts great again!

Domain-driven development

Use The Gamma for visualizing your data

Use F# for domain-driven development

Use Fable to make JavaScript fun (again?)




Tomas Petricek, tomas@tomasp.net
@tomaspetricek | thegamma.net | tomasp.net