Software engineer, available for freelance work! • he/him/his
Published
Edited
Oct 22, 2019
6 stars
import { React, jsx } from '@mbostock/hello-jsx'
Notebook = (await require('@alex.garcia/observable-notebook-react@0.0.7/build/index.umd.js'))(
React
)
barChartDefine = (await import(
'https://api.observablehq.com/@d3/bar-chart.js?v=3'
)).default
React.render(
jsx({ Notebook, define: barChartDefine })`<Notebook define={define}/>`
)
React.render(
jsx({
Notebook,
define: barChartDefine,
targets: ['chart', 'data']
})`<Notebook define={define} targets={targets}/>`
)
React.render(
jsx({
Notebook,
define: barChartDefine,
targets: ['chart', 'data'],
redefine: {
data: [
{ name: 'Adrian', value: 100 * Math.random() },
{ name: 'Brian', value: 100 * Math.random() },
{ name: 'Chris', value: 100 * Math.random() }
],
height: 200
}
})`<Notebook define={define} targets={targets} redefine={redefine}/>`
)
worldTourDefine = (await import(
'https://api.observablehq.com/@d3/world-tour.js?v=3'
)).default
function Label(props) {
return jsx({
label: props.children,
containerStyle: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
style: {
fontWeight: 800,
textAlign: 'center',
backgroundImage:
'linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)',
borderRadius: 8,
margin: '0 auto',
color: 'white',
textShadow: '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black',
fontSize: 28,
display: 'inline-block',
padding: '.25rem 1rem'
}
})`<div style={containerStyle}>
<div style={style}>{label}</div>
</div>`;
}
React.render(jsx({ Label })`<Label> it works! </Label>`)
function WorldTour(props) {
const { onCountryUpdate } = props;
return jsx({
Notebook,
define: worldTourDefine,
targets: ['canvas'],
redefine: {
height: 300
},
observers: {
name: {
fulfilled(value) {
onCountryUpdate(value); // from props!
}
}
}
})`<Notebook define={define} targets={targets} observers={observers} redefine={redefine}/>`;
}
{
function App() {
const [country, setCountry] = React.useState();
return jsx({ Label, WorldTour, onCountryUpdate: setCountry, country })`
<div>
<WorldTour onCountryUpdate={onCountryUpdate}/>
<Label>{country}</Label>
</div>`;
}
return React.render(jsx({ App })`<App/>`);
}
viewofIntroDefine = (await import(
'https://api.observablehq.com/@observablehq/a-brief-introduction-to-viewof.js?v=3'
)).default
React.render(
jsx({
Notebook,
define: viewofIntroDefine,
targets: ['viewof color'],
observers: {
color: {
fulfilled(value) {
console.log(`New color chosen!`, value);
}
}
}
})`<Notebook define={define} targets={targets} observers={observers} />`
)
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.
