// from https://observablehq.com/@emerycarr/manhattan-particles
viewof preset = {
let makeDict = (pairs) => Object.assign({}, ...Array.from(pairs, ([key, val]) => ({[key]: val}) ));
const params = (keys, vals) => makeDict(keys.map((key, i) => [key, vals[i]]));
const opt = {
slider: (vals) => slider(params(['title','min','max','step','value'], vals)),
color: (vals) => j_color(params(['title','value'], vals)),
};
const options = {
// title min max step default
particles: opt.slider( ["Number of Particles", 1, 200, 1, 140 ]),
size: opt.slider( ["Particle Size", .1, 50, .1, 2.5 ]),
jitter: opt.slider( ["Particle Jitter", 0, 1, .1, .3 ]),
inertia: opt.slider( ["Particle Inertia", 0, .2, .01, .01 ]),
minDist: opt.slider( ["Minimum Distance", 0, 200, 1, 50 ]),
distRange: opt.slider( ["Distance Range", 0, 200, 1, 50 ]),
fillAlpha: opt.slider( ["Particle Fill Opacity", 0, 1, .05, .35 ]),
strokeAlpha: opt.slider( ["Particle Stroke Opacity", 0, 1, .05, 1 ]),
ghosting: opt.slider( ["Ghosting", 0, 100, 1, 0 ]),
// title default
bgColor: opt.color( ["Background Color", "#1d252e"]),
lineColor: opt.color( ["Line Color", "#9be9ff"]),
fillColor: opt.color( ["Particle Fill Color", "#3d97da"]),
strokeColor: opt.color( ["Particle Stroke Color", "#ffffff"]),
};
const element = html`
<style type="text/css">
.panel {
background-color: #ffffff;
display: grid;
grid-template-columns: auto auto auto auto;
grid-auto-rows: 80px;
padding: 30px;
}
@media only screen and (max-width: 1000px) { .panel { grid-template-columns: auto auto; } }
@media only screen and (max-width: 600px) { .panel { grid-template-columns: auto; } }
</style>
<div class="panel"> ${values(options)} </div>
`;
element.oninput = function() {
const result = {};
for (var x in options) {
result[x] = options[x].value
}
element.value = result;
}
element.oninput();
return element;
function values(dict) {
const result = [];
for (var x in dict) {
result.push(dict[x]);
};
return result;
}
}
function rng(cfg = {}) {
let {label, attrs={}, styles={}, fixed=0} = cfg;
let input = html`
<input type="range" style="width:90%">
`;
let card = html`
<div class="card"></div>
`;
card.append(input);
Object.keys(attrs).forEach(key => {
const val = attrs[key];
if (val != null) input.setAttribute(key, val);
});
let {max, min, value, name=""} = attrs;
card.prepend(html`
<div class="row cardhdr">
<div class="inp_min">${min = min ? min : ""}</div>
<div class="cardlbl">${label = label ? label : ""}</div>
<div class="inp_max">${max = max ? max : ""}</div>
</div>
`);
// <output class="cardftr" name=${out_id}>${value = value ? value : ""}</output>
let output = html`<div class="cardftr" name=output>${value = value ? value : ""}</div>`
// let out_id = "out_" + name;
// card.append(html`
// <output class="cardftr" name=output>${value = value ? value : ""}</output>
// `);
card.append(output)
card.oninput = () => {
card.value = input.valueAsNumber;
// card.out_id.value = card.value;
// card.output.value = card.value;
output.innerHTML = card.value.toFixed(fixed);
return card.value;
}
card.oninput();
return card;
}
// card styles
style_card = html`flex styles<style>
.row {
width: 100%;
display: flex;
flex-direction: row;
margin: auto;
}
.card {
display: flex;
flex-direction: column;
background-color: "#fff";
border: 1px solid #000000;
border-radius: 0px;
overflow: wrap;
margin: auto;
width:125px;
}
.cardhdr {
border-bottom: 1px solid #000;
margin:auto;
}
.cardlbl {
color: black;
text-align: center;
font-size: 16px;
font-weight: 400;
width:50%;
background-color: none;
margin:auto;
}
.cardftr {
border-top: 1px solid black;
color: black;
text-align: center;
font-size: 16px;
font-weight: 400;
background-color: #fff;
width:100%;
margin:auto;
}
.inp {
margin:auto;
width:50%;
}
.inp_min {
text-align: left;
width:25%;
margin: 0 0 0 5px;
border-right: 1px black solid;
}
.inp_max {
text-align: right;
width:25%;
margin: 0 5px 0 0;
border-left: 1px black solid;
}
.bordered {
border: 1px black solid;
}
input {
margin:0 5px 0 5px;
width:90%;
}
</style>`
import { slider, color as j_color } from "@jashkenas/inputs"
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.
