tonmcg

This visualization tracks a sample of couples in the 1970's to show how long they transition through relationship stages. It is wholly based on Nathan Yau's The Stages of Relationships, Distributed and his companion tutorial How to Make a Moving Bubble Chart, Based on a Dataset (note: you'll need a FlowingData membership to view this tutorial.)

Nathan's example uses D3.js to get the data, render the text and circles, simulate physical forces, apply transitions and animations, and update DOM elements. This example uses the browser's native Fetch API to get the data, Vue.js instance lifecycle statges to update the data and render the circles and text; GSAP to transition and animate SVG circle

tonmcg

Using Vue.js to adjust properties on an SVG element.

tonmcg

border: no
height: 600
license: gpl-3.0

tonmcg

let
    javascriptDates =  Web.Page("
        <script type='text/javascript'>
            function wait(ms){
               var start = new Date().getTime();
               var end = start;
               while(end < start + ms) {
                 end = new Date().getTime();
              }
            }

tonmcg

let 
    Table.CreateAmortization = let 
        AmortizationFunction = (initialAmount as number, interestRate as number, numberOfPeriods as number, periodicity as text, optional date as any, optional balloonPayment as number) as table =>
        let
            CompoundingMap = {{"Daily",365}, {"Monthly",12}, {"Quarterly",4}, {"Semi-annual",2}, {"Annual",1}},
            CompoundingPeriod = List.First(List.Select(CompoundingMap, each _{0} = periodicity)){1},
            Balloon = if balloonPayment is null then 0 else balloonPayment,
            PeriodicInterest = interestRate / CompoundingPeriod,
            TotalPeriods = numberOfPeriods * CompoundingPeriod,
            Annuity = initialAmount * ((PeriodicInterest) * Number.Power(1 + (PeriodicInterest), TotalPeriods)) / (Number.Power(1 + (PeriodicInterest), TotalPeriods) - 1) - Balloon * (-PeriodicInterest) / ((1 + PeriodicInterest) - (Number.Power(1 + PeriodicInterest, TotalPeriods + 1))),

tonmcg

(milliseconds as any, optional returnDateTime as nullable text) =>
let
    result = 
        if milliseconds <> null then
            let
                javaScriptBaseDate = #datetime(1970,1,1,0,0,0),
                //milliseconds = 1576483200000,
                isDateTime = if returnDateTime = "false" or returnDateTime = "" then false else true,
                seconds = milliseconds / 1000,
                durationInSeconds = #duration(0,0,0,seconds),

tonmcg

(s as number) as duration =>
let
    // patterned after https://stackoverflow.com/a/9763769/4637650
    // s = 28860000, //481 minutes
    ms = Number.Mod(s,1000),
    t = (s - ms) / 1000,
    secs = Number.Mod(t,60),
    r = (t - secs) / 60,
    mins = Number.Mod(r,60),
    hrs = (r - mins) / 60,

tonmcg

license: mit

tonmcg

let 
    GitHub.GetGists = (userName as text) as table =>
    let
        Source = Json.Document(Web.Contents("https://api.github.com/users/" & userName & "/gists")),
        count = List.Count(Source),
        fileTableType = type table [id = text, filename= text, type = text, language = text, raw_url = text, size= Int64.Type],
        metaTableType = type table [url = text, forks_url = text, commits_url = text, id = text, git_pull_url = text, git_push_url = text, html_url = text, public = logical, created_at = datetime, updated_at = datetime, description = text, comments = Int64.Type, user = text, comments_url = text, truncated = logical],
        gistsMetaRecords = Table.FromList(Source, Splitter.SplitByNothing(), {"meta"}, null, ExtraValues.Error),
        gistsMetaTable = Table.ExpandRecordColumn(gistsMetaRecords, "meta", {"url", "forks_url", "commits_url", "id", "git_pull_url", "git_push_url", "html_url", "public", "created_at", "updated_at", "description", "comments", "user", "comments_url", "truncated

tonmcg

This example uses the list entering/leaving and state transition systems of Vue.js, along with Greensock's GSAP to transition properties of SVG circles.