Published
Edited
Mar 21, 2021
Importers
md`# Observable Utils
A collection of common things for working with Observable, to make things a bit easier to work with.`
/**
* Ever want to work with D3, but be able send an object with keys?
* ex: d3.create('svg').attrs({ width: 100, height: 100 })
* .append('line').attrs({ x: 10, y: 10, width: 80, height: 80, fill: 'steelblue' });
* Then just import this:
* import {d3Attrs as d3} from '@paulroth3d/observable-common-utilities';
**/
d3_attrs = require.alias({
'd3-selection': 'd3@6',
'd3-transition': 'd3@6'
})('d3@6', 'd3-selection-multi')
/*
* fixes the width of markdown, so its no longer capped at 700 px
* @example: import {markdownWidthFix} from '@paulroth3d/observable-utils';
**/
markdownWidthFix = html `<style>p, span, div, ul, li { max-width: 100%; }</style>`
/**
* Creates a margin object
* @param {number} top -
* @param {number} right -
* @param {number} bottom -
*.@param {number} left -
* @returns {top:number, right:number, bottom:number, left:number}
**/
margin = (top, right, bottom, left) => {
return ({top, right, bottom, left});
};
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.
