idibidiart

This is a fork of Mike Bostock's Multi-Series Line Chart, which adds circles along the line for each data point. The circles help anchor us to the real datapoints (rather than extrapolations) when comparing across lines.

But this is really an exercise in nested selections, leveraging selections as groups. The data consists of multiple lines, which each have multiple data points. We call .data twice: first with the data for all cities, binding the array for each city as a single datum. This is good enough for D3's line generators but not for placing circles. So we selectAll circles from the merged enter-update selection, and then bind the data for each line using a function, which is passed each datum from the prior join. This step produces a new data join, and you need to do it even if the function you pass is the identity. Since there are no circles, we skip straight to the enter selection and append them. Then we assign them x and y positions based on the accessor

This demo uses d3.layout.force() to calculate the node positions and then passes those to webGL to render them on the GPU.

There is not a lot of doc or posts about making an headless renderer with webgl support. Here are few of my findings

I tried things on Heroku, but I was not able to make anything work.

Next, I tried EC2 t2.micro, only to find out that OpenGL needs a graphic card to execute (sure, there are things like mesa that I didn't tried, but it looked like I needed to build Chrome and I didn't want to go that way).

The only easy solution that I found was AWS EC2 GPU Instances. They are pretty much overpriced for what I'm trying to acheive, but it worked. You need to use an AMI that support the Nvidia GRID thing. eg https://aws.amazon.com/marketplace/pp/B00FYCDDTE and its CentOS.

Slimer need Firefox and Firefox need shared libraries that we need to install (we will use a custom repo).

Testing in-browser gif generation from an SVG with gif.js. Works in recent Chrome/Safari/Firefox.

Process:

Create a standard SVG line chart.
Step through in-between frames of the line chart: for each one, update the SVG, render to an image, add the image element to a stack of gif frames.
Render frames together in the background using gif.js web workers.
When rendering's complete, add the blob URL as an image and start the SVG on an infinite loop with d3.timer (gratuitous).

See also: Gif Globe, Gif New Jersey

Please go here for latest post and feel free to comment

[new post] (https://gist.github.com/idibidiart/49a095b6bc528638f34f)

Prerequisite: latest Docker for Mac on MacOS Sierra

$ brew update
$ brew install --HEAD xhyve
$ brew install docker-machine-driver-xhyve
$ sudo chown root:wheel $(brew --prefix)/opt/docker-machine-driver-xhyve/bin/docker-machine-driver-xhyve
$ sudo chmod u+s $(brew --prefix)/opt/docker-machine-driver-xhyve/bin/docker-machine-driver-xhyve

$ curl -Lo minikube https://storage.googleapis.com/minikube/releases/v0.18.0/minikube-darwin-amd64 &amp;&amp; chmod +x minikube &amp;&amp; sudo mv minikube /usr/local/bin/

	#import <Foundation/Foundation.h>
	#import "RCTBridgeModule.h"

	#define RCT_EXTERN_MODULE(objc_name, objc_supername) \
	RCT_EXTERN_REMAP_MODULE(objc_name, objc_name, objc_supername)

	#define RCT_EXTERN_REMAP_MODULE(js_name, objc_name, objc_supername) \
	objc_name : objc_supername \
	@end \
	@interface objc_name (RCTExternModule) <RCTBridgeModule> \

	/**
	* Batched updates test with Redux. You will need React 0.6.0 and a .babelrc:
	{
	"whitelist": [
	"es6.parameters.default",
	"es7.decorators"
	]
	}
	*/
	'use strict';

	// Simplest possible wrapper around IHKeyboardAvoiding.
	//
	// I don't really know how to Xcode, but I got it to work by:
	//
	// 1. Checking out the IHKeyboardAvoiding repository.
	// https://github.com/IdleHandsApps/IHKeyboardAvoiding
	//
	// 2. Dragging the Files IHKeyboardAvoiding.{h,m} into my project.
	//
	// 3. Ensuring that both .m files are in the "Compile Sources" phase of the target.

	<!doctype html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>Copy To Clipboard Example</title>
	</head>
	<body>

	<input id="txtToCopy" type="text">
	<button id="btnCopy">Copy!</button>