ningunaparte

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Say you have an SVG built dynamically on the client by D3. Now say you want to save it to a static PNG as a fallback for old browsers. There are lots of ways to do this using alternative renderers (such as Batik and PhantomJS), but what if you want your browser to do it, so that you the static PNG matches the dynamic SVG exactly, down to the subpixel, including transparency?

Here’s how.

1. Save as SVG.

Use the SVG Crowbar bookmarklet to save the SVG to a file. Call this file “fallback.svg”. Open the SVG in your browser to verify that it looks right.

SVG Crowbar helpfully inlines any stylesheets you may have on the page, but you might find you need to edit a few of the styles by hand to get things to look right. For example, the font-family “sans-serif” won’t work in an SVG image, even though it works when the SVG is built client-side; you’ll have to make the font name explicit, s

	// https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js
	// SAMPLE https://jsfiddle.net/ningunaparte/9gm68vmn/

	var nowDate = new Date();

	// ES LOCATION
	// d3.locale Spanish Spain / Español
	// https://github.com/mbostock/d3/wiki/Localization

	var es_ES = {

	//Cuando finalizan todas las animaciones ejecuta el callback

	function endAll(transition, callback) {
	var n = 0;
	transition.each(function() { ++n; })
	.each('end', function() {
	if (!--n) callback.apply(this, arguments);
	});
	}

	//BASED ON Michael Stanaland’s Block 6106487
	//http://bl.ocks.org/mstanaland/6106487


	Starting number: 1500

	d3.format(",") : 1,500

	d3.format(".1f") : 1500.0


	// DEVUELVE EL AREA DE TERMINADO POLIGONO
	// http://www.mathopenref.com/coordpolygonarea2.html

	function polygonArea(X, Y, numPoints) {
	area = 0; // Accumulates area in the loop
	j = numPoints - 1; // The last vertex is the 'previous' one to the first

	for (i = 0; i < numPoints; i++) {
	area = area + (X[j] + X[i]) * (Y[j] - Y[i]);