Tony McGovern 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.

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

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

	(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),

	(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,

	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 =

	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),

	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(
	()=>

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

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