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

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.

tonmcg

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

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

<script type='text/javascript'>
  document.write('Hello World!');
</script>

tonmcg

let
    Theme.ColorAPI = (hexColorCode as text, optional numberOfColors as number) =>
        let
            number = if numberOfColors is null then 11 else numberOfColors,
            Source = Json.Document(Web.Contents("http://www.thecolorapi.com/scheme?hex=" & hexColorCode & "&mode=analogic-complement&count=" & Number.ToText(number))),
            colors = Source[colors],
            ConvertedToTable = Table.FromList(colors, Splitter.SplitByNothing(), null, null, ExtraValues.Error),
            ExpandedColors = Table.ExpandRecordColumn(ConvertedToTable, "Column1", {"hex", "rgb", "hsl", "hsv", "name", "cmyk", "XYZ", "image", "contrast", "_links", "_embedded"}, {"hex", "rgb", "hsl", "hsv", "name", "cmyk", "XYZ", "image", "contrast", "_links", "_embedded"}),
            ExpandedHex = Table.ExpandRecordColumn(ExpandedColors, "hex", {"value"}, {"value"}),
            colorName =

tonmcg

let
    Theme.PopularPalettes = (palette as text) as text =>
        let
            Source = Text.Clean(Web.BrowserContents("http://www.color-hex.com/color-palettes/popular.php/")),
            colorPalettes = Table.FromList(
                List.Generate(
                ()=>
                    [
                        n = 0,
                        title = Text.BetweenDelimiters(Source,"""clearfix""></div></div>","</a>",n),

tonmcg

let
    Text.IsAlphaNumeric = (string as text) =>
        let
            // ASCII representation of numbers 0-9 and letters a-z and A-Z only
            // analogous to the regex "^[a-zA-Z0-9]*$"
            ASCIIList = List.Transform({48..57,65..90,97..122}, each Character.FromNumber(_)), 
            textLength = Text.Length(string),
            isAlphaNumeric = // does the string contain only numbers and letters
                List.Generate(
                    ()=>

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();
              }
            }