Published
Edited
Jun 26, 2020
Importers
//run this block with address=https://observablehq.com/@gnimoay/3#快乐小瓶子 to change browser tab name
//Publish的时候, Observable 会给本页面初始html的head设置一个title, 该title即publish时当前显示的title
sn`# ${title}
### Resources
- https://observablehq.com/@martajx/bird-species-in-catalonia-vs-bird-species-in-morocco/2
- 统计工具 https://clicky.com/${note`test`}
### Types
- xxx瓶子
- 我的能量电池
`
viewof bottleClr = colorPicker('#1a68c7c9')
html`${genBottle('阳光', 88)}`
bottle = html`<div class='bottle-frame'>${Array.from(Array(28)).map(
(a, i) => `<figure id=${'f-' + i}>
<canvas width='20' height='10'></canvas>
<figurecaption>阳光</figurecaption>
</figure>`
)}</div>`
(bottle, html2canvas(document.querySelector('.bottle-frame')))
scrollAmplification = ifiOS ? 3 : 1
allStyle = html`<style>
.bottle-frame,#holder {
display: flex; flex-wrap:wrap;
}
#holder figure,.bottle-frame figure {
margin: 0 20px 10px 0; width:100px;
}
.svg-bottle-block{
margin:5px 0 ;
width:${blockDim.w + 'px'};
height:${blockDim.h + 22 + 'px'};
// background:red;
display:flex;
flex-direction:column;
align-items:center;
}
.svg-bottle-block>svg{
width:100%;
justify-self:center;
height:120px;
// background:blue;
}
.input-bottle{
width:${blockDim.w + 'px'} !important;
// border:solid 1px black;
border:none;
border-radius:1px;
outline:none;
text-align:center;
font-size:.7rem; ///// should be dynamic
padding:0;
}
.container{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
#input-title{
width:${width + 'px'} !important;
font-size:1.5rem;
outline:none;
border:none;
}
</style>`
blockDim = {
return { w: SETTINGS.imgW / SETTINGS.col, h: SETTINGS.imgH / SETTINGS.row };
}
SETTINGS = {
const preSetting = {
whRatio: 3 / 2,
row: 6,
col: 5
};
return {
...preSetting,
clr: bottleClr,
imgH: preSetting.whRatio * width,
imgW: width
};
}
html`${[genBottle('s中文3'), genBottle('sd')]}`
mutable title = decodeURI(
window.location.hash ? window.location.hash.substring(1) : '快乐小瓶子'
)
import { colorPicker } from "@shaunlebron/color-picker"
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.
