Add aspect ratios for social images

[duner]

Feature request: In addition to the small/long chart sizes, it would be great to have aspect ratios optimized for sharing charts on Twitter and Facebook.

[yanofsky]

Do you know what those ratio are?

[duner]

Sorry for not including in the original issue — meant to but then was running to grab lunch. Anyway, per Vox's meme tool (among other sources), Twitter is 2:1 and Facebook is 1.91:1.

[duner]

If this is a feature y'all would rather not add to the core Chartbuilder tool, we can add it to our fork (and I'd be happy to spend some time figuring out how to implement it) but I figured y'all have a better handle on the codebase and would be better suited to getting something like this done.

[petulla]

@duner I would also look into the cropping margins of those respective platforms, which are different. We've added support for these ARs to our CBs, with optimized margins.

[yanofsky]

I'd be happy to have these sizes in core Chartbuilder

You'd define the sizes in this config:
https://github.com/Quartz/Chartbuilder/blob/f0b18d2ac05f55b1231fda37ae3b7fc122f35f94/src/js/config/chart-sizes.js

Then add how they should be styled here:

Chartbuilder/src/styl/chart-renderer.styl

Lines 168 to 237 in f0b18d2

	.medium
	.em-size
	font-size $em_size
	.d4
	font-size $em_size
	.margins
	.line, .other-line
	path
	stroke-width 3px
	.svg-text
	font-size $em_size
	&.svg-text-credit
	font-size $em_size*0.6
	&.svg-text-source
	font-size $em_size*0.6
	&.svg-text-title
	font-size $em_size
	.small
	.em-size
	font-size $em_size_small
	.d4
	font-size $em_size_small
	.margins
	.line, .other-line
	path
	stroke-width 2px
	.svg-text
	font-size $em_size_small
	&.svg-text-credit
	font-size $em_size*0.5
	&.svg-text-source
	font-size $em_size*0.5
	&.svg-text-pipe
	text
	dominant-baseline central
	font-size $em_size*0.6
	&.svg-text-title
	font-size $em_size_small
	.svg-label-text
	font-size $em_size_small
	.large
	.em-size
	font-size $em_size
	.d4
	font-size $em_size
	.margins
	.line, .other-line
	path
	stroke-width 4px
	.svg-text
	font-size $em_size
	&.svg-text-credit
	font-size $em_size*0.6
	&.svg-text-source
	font-size $em_size*0.6
	&.svg-text-title
	font-size $em_size
	.svg-label-text
	font-size $em_size