I am a Computer Scientist and Musician by training. A writer with interests in Philosophy, Economics, Technology, Politics, Business, the Arts and Fiction.
Published
Edited
Nov 24, 2020
Importers
md`# Infographic Utils`
renderInfographic({ showGrid: true })
import {
DEFAULT_STYLE,
getSVG,
drawText,
drawLine,
drawRect
} from '@nuuuwan/svg-utils'
import { range } from '@nuuuwan/list-utils'
import { addDefaults } from '@nuuuwan/option-utils'
INFOGRAPHIC_WIDTH = 1600
INFOGRAPHIC_HEIGHT = 900
INFOGRAPHIC_PADDING = 24
function renderInfographic(options) {
options = addDefaults(options, {
width: INFOGRAPHIC_WIDTH,
height: INFOGRAPHIC_HEIGHT,
padding: INFOGRAPHIC_PADDING,
funcDrawInner: function(svg) {},
funcDrawLegend: function(svg) {},
kicker: 'Add Kicker Here',
title: 'Add Title Here',
subTitle: 'Add Sub Title Here',
footer: '@nuuuwan',
showGrid: false
});
const svg = getSVG({ width: options.width, height: options.height });
drawRect(svg, [0, 0], [options.width, options.height], {
fill: 'none',
stroke: 'lightgray',
strokeWidth: 2
});
options.funcDrawInner(svg);
options.funcDrawLegend(svg);
const svgTextOptions = defaultFontSizeMult =>
Object({
fill: 'black',
fontSize: defaultFontSizeMult * DEFAULT_STYLE.fontSize,
textAnchor: 'start'
});
const yTitle = options.height / 8;
drawText(
svg,
[options.padding, options.height / 16],
options.kicker.toUpperCase(),
svgTextOptions(0.8)
);
drawText(svg, [options.padding, yTitle], options.title, svgTextOptions(2));
drawText(
svg,
[options.padding, (3 * options.height) / 16],
options.subTitle,
svgTextOptions(1.2)
);
drawText(
svg,
[options.width - options.padding, (15 * options.height) / 16],
options.footer,
{ fill: 'darkgray', fontSize: DEFAULT_STYLE.fontSize, textAnchor: 'end' }
);
drawText(svg, [options.width / 2, options.height / 2], '@nuuuwan', {
fontSize: options.height / 3.5,
fill: 'rgba(0,0,0,0.01)'
});
if (options.showGrid) {
const n = 8;
const color = 'rgba(0, 0, 0, 0.05)';
range(1, n).forEach(function(i) {
const [x, y] = [(options.width * i) / n, (options.height * i) / n];
drawLine(svg, [x, 0], [x, options.height], { stroke: color });
drawLine(svg, [0, y], [options.width, y], { stroke: color });
});
}
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
