// table(
// test.dataNewAttribute
// .filter(d => d.color != null)
// .map(d => {
// var e = {};
// e.Instance = d.Instance;
// e.S = d.S;
// e.T = d.T;
// e.Time = d.Time;
// e["Categories"] = d["Fuzzy Categories"];
// e["Membership Degree"] = d["Membership Degree"];
// e.Color = d.color;
// return e;
// })
// )
dataTime2 = container.filter((d) => d.Time < 3500)
FULLSCREEN = fullscreen({
breakLayoutAtCell: 1,
hideAfter: 4,
hideBefore: 2,
left: 0,
right: 100,
button: html`<button style="background: steelblue; padding : 0.4em;border-radius: 0.2em; border-color: black;color: white; font-size: 16px; /*position:fixed;right:20px;top:0;*/">Fullscreen`
})
function fullscreen({
className = 'custom-fullscreen',
style = null,
breakLayoutAtCell = 1,
hideAfter = 2,
hideBefore = 1,
left = 0,
right = 100,
button
} = {}) {
//WORK INITIALLY FROM @mootari/fullscreen-layout-demo
//THEN ADAPTED IN @severo/two-columns-layout-in-fullscreen-mode
function hide({ hideAfter = Infinity, hideBefore = 0, reset = false } = {}) {
let cells = document.getElementsByClassName('observablehq');
for (let i = 0; i < cells.length; i++) {
if ((i < hideBefore || i > hideAfter) && !reset)
cells[i].style.display = "none";
else cells[i].style.display = "block";
}
// console.log("Hide", cells);
return cells;
}
// Superfluous bling.
const buttonStyle =
style != null
? style
: 'font-size:1rem;font-weight:bold;padding:8px;background:hsl(50,100%,90%);border:5px solid hsl(40,100%,50%); border-radius:4px;box-shadow:0 .5px 2px 1px rgba(0,0,0,.2);cursor: pointer';
button = button || html`<button style="${buttonStyle}">Toggle fullscreen!`;
// Vanilla version for standards compliant browsers.
if (document.documentElement.requestFullscreen) {
button.onclick = () => {
if (document.location.host.match(/static.observableusercontent.com/))
hide({ hideBefore, hideAfter });
const parent = document.documentElement;
const cleanup = () => {
if (document.fullscreenElement) return;
parent.classList.remove(className);
if (document.location.host.match(/static.observableusercontent.com/))
hide({ reset: true });
document.removeEventListener('fullscreenchange', cleanup);
};
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
parent.requestFullscreen().then(() => {
parent.classList.add(className);
// Can't use {once: true}, because event fires too late.
document.addEventListener('fullscreenchange', cleanup);
});
}
};
}
// Because Safari is the new IE.
// Note: let as in https://observablehq.com/@mootari/fullscreen-layout-demo.
// The button will not toggle between states
else {
const screenfull = require('screenfull@4.2.0/dist/screenfull.js').catch(
() => window['screenfull']
);
// We would need some debouncing, in case screenfull isn't loaded
// yet and user clicks frantically. Then again, it's Safari.
button.onclick = () => {
screenfull.then(sf => {
const parent = document.documentElement;
sf.request(parent).then(() => {
const cleanup = () => {
if (sf.isFullscreen) return;
parent.classList.remove(className);
sf.off('change', cleanup);
};
parent.classList.add(className);
sf.on('change', cleanup);
});
});
};
}
// Styles don't rely on the :fullscreen selector to avoid interfering with
// Observable's fullscreen mode. Instead a class is applied to html during
// fullscreen.
return html`
${button}
<style>
main.mw8 { max-width: 100vw }
html.${className} body, html.${className} body > div:not(.observablehq) {
overflow: auto;
height: 100vh;
width: 100%;
}
html.${className} body, html.${className} body > div:not(.observablehq) {
display: block;
background: white;
width: auto;
overflow: auto;
position: relative;
}
.observablehq::before {
height: 0;
}
html.${className} .observablehq {
margin-left: ${left}vw;
width: ${right}vw;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
max-height: 75vh;
overflow: auto;
padding: .5rem;
box-sizing: border-box;
}
html.${className} .observablehq:nth-of-type(-n+${breakLayoutAtCell}) {
float: left;
width: ${left}vw;
margin-left: 0;
}
`;
}
import { select } from "@jashkenas/inputs"
// Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
async function csv(url) {
return Plotly.d3.csv.parse(await (await fetch(url)).text());
}
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.