Xavi Gimenez XavierGimenez

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Quick implementation of a slope chart, not to represent changes over time but to emulate Ben Fry's piece Salaries vs Performance

Todo: Values should be ranked to avoid overlapping

Sankey diagram with vega.js.

data transforms: stack + joinaggregate + collect

Sankey diagram with vega.js.

Copied from a vega implementation for Elastic Search, made by yurik.
Full spec example here, with some bug fixes from the original implementation

More testing on making maps with vega.js. No effort thanks to the lookup transform and conditional blocks for coloring the features.

Creating maps with vega.js. Simple example of how to use the "fit" and "size" properties of the projection object, so centering/scaling the map is done automatically

Draft for making custom visual designs with vega.js

Stretched Chord with vega.js

Porting the Stretched Chord by Nadieh Bremer to vega.js

WIP from previous block

So far, Mixing D3 for the data generation and vega.js for rendering and minimal logic. Once the spec is parsed, just populate signals/datasets and render the vega view.

	/**
	* @fileOverview React component to wrap Vega.js chart rendering.
	* @author Xavi Giménez ([email protected])
	*/

	import React, { Component } from 'react';
	import * as vega from 'vega';
	import * as _ from 'lodash';
	var vegaTooltip = require('vega-tooltip/build/vega-tooltip');