Xin Chen ryancat

Notes and thoughts on d3js after 4 years

I worked with d3js in 2014/2015, on some reporting web application where I need to draw bi-direction horizontal bar charts. I was supprised on how simple it was to get started, and became very flexible even when I need to have very customized chart requirements. Later I moved to another company where I am working on large scale data visualization, which I was told d3 will not be good enough to handle the large dataset we have. In our usecase, we want to render up to 1 to 2 million marks in browser with good performance. We ended up created our own charting engine, which gives us pretty amazing results with canvas (instead of SVG in d3).

Now it's 2018, d3 had made its name in data visualization world. I want to come back and revisit it, not only to get myself refreshed on new features and cool demoes, but also try to figure out if large scale data is still a deal breaker for d3. A quick search leads me to many interesting links, including [WORKING WITH D3.JS AND C

Build a tensorflow recommendation engine

Research

Starts by doing some spikes on what's available there. A quick search on google gives the following potential resources:

Webgl related notes

Resources are referenced from the following links:

Summary

webgl is a state machine and a graphic pipeline. It holds an internal state and allow user update them.
When ready to render, there are a handful of methods webgl provides to 'clear' the viewport, with the current internal state defined.
We are always drawing 3D object in canvas using webgl.

	var ModuleC = require('./ModuleC.js');

	module.exports = {
	initModuleA: function (config) {
	this.config = config;
	},

	log: function (message) {
	console.log('[ModuleA]', message);
	},

	// typescript will give error: An import path cannot end with a '.ts' extension.
	// this is just for clarification purpose!
	import { IModuleAConfig } from './types.ts';
	import * as ModuleAPrototype from './ModuleAPrototype.js';

	class ModuleA {
	constructor(config: IModuleAConfig) {
	this.initModuleA(config);
	}

	// typescript will give error: An import path cannot end with a '.ts' extension.
	// this is just for clarification purpose!
	var ModuleA = require('./ModuleA.ts');
	var ModuleB = require('./ModuleB.js');

	module.exports = {
	ModuleB: ModuleB,

	run: function () {
	const moduleA = new ModuleA({

	// typescript will give error: An import path cannot end with a '.ts' extension.
	// this is just for clarification purpose!
	import ModuleA from './ModuleA.ts';
	import * as myLibTypes from './types.ts';
	import * as myLibApi from './myLibApi.js';

	const myLib = {
	ModuleA,
	// Need to expose types so that consumers can use them
	myLibTypes,

	var ModuleC = require('./ModuleC.js');

	var ModuleA = function (config) {
	this.config = config;
	};

	ModuleA.prototype = {
	log: function (message) {
	console.log('[ModuleA]', message);
	},

	// Stop-gap declaration file for typescript migration
	export {};

	var ModuleA = require('./ModuleA.js');
	var ModuleB = require('./ModuleB.js');

	module.export = {
	ModuleA: ModuleA,
	ModuleB: ModuleB,

	run: function () {
	const moduleA = new ModuleA({
	name: 'my module A',