psbolden

Data Down / Actions Up
- http://emberjs.jsbin.com/nayaho/edit?html,js - Interdependent select boxes. No observers.
- http://ember-twiddle.com/2d7246875098d0dbb4a4 - One Way Input
Plain JSBin's
- http://rwjblue.jsbin.com/pixeki/edit?html,js,output
Ember Version Base JSBin's
- 1.0 - http://emberjs.jsbin.com/juluje/edit?html,js,output
1.1 - http://emberjs.jsbin.com/cofufo/edit?html,js,output

Using d3plus.textwrap, SVG <text> elements can be broken into separate <tspan> lines, as HTML does with <div> elements. In this example, the first column shows normal wrapped text, the second column shows text that is resized to fill the available space, and the third column shows the default SVG behavior.

D3plus automatically detects if there is a <rect> or <circle> element placed directly before the <text> container element in DOM, and uses that element's shape and dimensions to wrap the text. If it can't find one, or that behavior needs to be overridden, they can manually be specified using .shape( ), .width( ), and .height( ).

Featured on D3plus.org

This is an example of creating a PNG from an SVG. (You should notice that you're able to right click on the last image and save it as a PNG image.) It has been Tested in Firefox and Chrome but doesn't work in Safari as of 2014-07-20.

Normally, you'll create your SVG in D3 but to make the example a bit more readable, the SVG is already placed in the document. There are a few important points. Namely:

All the styles of the SVG need to be self contained in side of the <defs> tags. (These styles should be escaped using the <![[CDATA[ ... ]] tag.)
The SVG needs to have the proper namespaces and document types.
The SVG needs to be saved to an image, then read from an canvas element, then saved to an image again.

Note: Portions of this demo where taken from The New York Times' excellent Crowbar SVG extractor.

	<script type="text/javascript">
	/*

	re: http://ecommerce.shopify.com/c/ecommerce-design/t/land-on-specific-variant-when-loading-product-page-147793

	Assumes:
	--------

	* that you are calling the javascript once the select element is available
	* you have a select element on the page like:

	var AWS = require('aws-sdk'),
	fs = require('fs');

	// For dev purposes only
	AWS.config.update({ accessKeyId: '...', secretAccessKey: '...' });

	// Read in the file, convert it to base64, store to S3
	fs.readFile('del.txt', function (err, data) {
	if (err) { throw err; }

	var svg = document.querySelector( "svg" );
	var svgData = new XMLSerializer().serializeToString( svg );

	var canvas = document.createElement( "canvas" );
	var ctx = canvas.getContext( "2d" );

	var img = document.createElement( "img" );
	img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );

	img.onload = function() {

	<!doctype html>
	<html>
	<title>Flatten.js, General SVG Flattener</title>

	<head>
	<script>
	/*
	Random path and shape generator, flattener test base: https://jsfiddle.net/fjm9423q/embedded/result/
	Basic usage example: https://jsfiddle.net/nrjvmqur/embedded/result/

	// Takes an SVG element as target
	function svg2png(target) {

	// Flatten CSS styles into the SVG
	for (i = 0; i < target.childNodes.length; i++) {
	child = target.childNodes[i];
	child.style.cssText = window.getComputedStyle(child).cssText;
	}

	var box = target.viewBox.baseVal;

	gm(request(url))
	.resize("80^", "80^")
	.stream(function (err, stdout, stderr) {
	var chunks = [];
	stdout.on('data', function (chunk) {
	chunks.push(chunk);
	});
	stdout.on('end', function () {
	var image = Buffer.concat(chunks);
	var options = {

	#http://developers.lyst.com/data/images/2014/02/13/background-removal/

	import pgmagick as pg

	def trans_mask_sobel(img):
	""" Generate a transparency mask for a given image """

	image = pg.Image(img)

	# Find object