viewof option1 = DOM.select(none_doc);
problem = {
const root = html`<div></div>`;
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return htm`
<button onClick=${this.handleClick}>
${this.state.isToggleOn? "ON" : "OFF"}
</button>
`;
}
}
ReactDOM.render(
htm`<${Toggle} />`,
root
);
return root;
}
{
const root = html`<div></div>`;
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
// this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return htm`
<button onClick=${e => this.handleClick(e)}>
${this.state.isToggleOn? "ON" : "OFF"}
</button>
`;
}
}
ReactDOM.render(
htm`<${Toggle} />`,
root
);
return root;
}
mutable list = [];
// toc = html`<ol>
// ${list.sort((a, b) => a.idx - b.idx).map((d, idx) =>
// html`
// <li>
// <a href=${"#"+d.id}>${d.id + " =>"}</a>
// <span>${d.des}</span>
// </li>`)}
// </ol>`
html`<table style="width: 180px;">
<thead><tr><th>#</th><th>Color</th><th>Swatch</th></tr></thead>
<tbody>${d3.schemeCategory10.map((color, i) => html`<tr>
<td>${i}</td>
<td>${color}</td>
<td style=${{background: color}}></td>
</tr>`)}</tbody>
</table>`
function addList(id, des, idx) {
let list = mutable list;
// todo: make sure no replicate of id
list.push({id: id, des: des, idx: idx});
mutable list = list;
}
d3 = require("d3")
import {html, svg} from "@observablehq/htl"
import {React, ReactDOM, htm, none_doc, hide_display} from "@embracelife/tutorial-utilities"
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.
