Public
Edited
Apr 2
1 star
card10 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
lead : `QuickSet ( II )`,
code : `import { QuickSet } from '@suptxt/quickset'`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.12,
fade : 92 })
card9 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
lead : `Get your pup`,
code : `import { puppy } from "@dleeftink/observable-puppeteer"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.12,
fade : 92 })
card8 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Metatree`,
lead : `Chunk it up`,
code : `import { atomise } from "@dleeftink/metatree"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.13,
fade : 92 })
card7 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Auto u(i)nify`,
lead : `the ( haystack ) `,
code : `import { hay, stack } from "@dleeftink/stacksearch"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.12,
fade : 92 })
card6 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Auto u(i)nify`,
lead : `Hi yMap `,
code : `import { Y, WebrtcProvider } from "dleeftink"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.14,
fade : 92 })
card5 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Auto u(i)nify`,
lead : `Hi Alpine! `,
code : `import { Alpine } from "dleeftink"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.14,
fade : 92 })
card4 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Auto u(i)nify`,
lead : `All the diffs`,
code : `import { diffy } from "dleeftink"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.13,
fade : 92 })
card3 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Auto u(i)nify`,
lead : `Depth to types`,
code : `import { detype } from "dleeftink"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.115,
fade : 92 })
card2 = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Auto u(i)nify`,
lead : `Auto u(i)nify </span>`,
code : `import { unify } from "dleeftink"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.115,
fade : 92 })
card = ({
dimX : parseInt(Math.min(width, 640)),
dimY : parseInt(Math.min(width*0.56, 340)),
font : `https://fonts.cdnfonts.com/css/kraboudja`,
name : `Signed cards`,
lead : `A pack of <span
style= "display: inline-block; transform: scale(0.78) translate(10%,6%)">S</span>ig<span
style= "display: inline-block; transform: scale(1,0.83) translate(16%,10%)">s </span>`,
code : `import { sign, pack } from "dleeftink"`,
base : `linear-gradient(to top right, #D39D3806, #4DA0B006 125%), repeat center/100% url(${paper});
filter: contrast(94%) hue-rotate(5deg) saturate(120%) brightness(105%) sepia(2%) grayscale(25%);`,
size : 0.115,
fade : 92 })
{
let elm = await sign(card2)
document.body.appendChild(elm)
let svg = ds.elementToSVG(elm)
let tmp = d3.select(html`${format(new XMLSerializer()
.serializeToString(svg))}`)
// .style('filter','invert(80%) brightness(135%) contrast(130%) saturate(40%) hue-rotate(0deg)')
return tmp.node()
}
ds = import('https://cdn.skypack.dev/dom-to-svg@0.12.2')
format = import('https://cdn.skypack.dev/xml-formatter@2.6.1?min').then(i=>i.default)
filters = require('https://bundle.run/pleeease-filters@4.0.0')
//(navigator.userAgent.match('HeadlessChrome')) ? pack(await sig(heroCard)) : ''
paper = {
let bg =
html`<svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px">
<filter id='roughpaper' x='0%' y='0%' width='100%' height="100%">
<feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" stitchTiles ='stitch' />
<feDiffuseLighting in='noise' lighting-color='#fff' surfaceScale='${2}'>
<feDistantLight azimuth='45' elevation='71' />
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="100%" height="100%"
filter="url(#roughpaper)" fill="none"></svg>`
return 'data:image/svg+xml;base64,'+window.btoa(bg.outerHTML)
}
{
const container = d3.select(html`<svg>`);
const svg = d3c.chart(
container.append('svg'),
{ width:200, height:70, responsive: true }
);
const grid = d3c.template(
{ rows: 'auto auto auto', columns: 'auto' },
{ ...d3c.measure(svg), padding: [0,0,0,0], row_gap: 8 } );
let aligns = { baseline:'central',align: 'end',justify:'end', anchor:'end'}
d3c.layout(svg, grid, layers => {
const x = d3c.text(layers('x',), { text: 'hello', ...aligns }).style('fill','red')
const y = d3c.text(layers('y'), { text: 'you', ...aligns }).style('fill','red')
const z = d3c.text(layers('z'), { text: 'there', ...aligns }).style('fill','red')
})
return container.node() //format(container.node().outerHTML)
}
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.
