Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active April 2, 2017 00:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save micahstubbs/04df008db0b12474a726a7986d73ad14 to your computer and use it in GitHub Desktop.
Save micahstubbs/04df008db0b12474a726a7986d73ad14 to your computer and use it in GitHub Desktop.
Download ZIP
counter with d3-component | es2015
Raw
.block
license: mit
border: no
Raw
README.md

an es2015 iteration on the block Counter from @currankelleher

A counter app that demonstrates usage of d3-component. Inspired by Redux Counter Example.

The following components are defined and used to construct the app:

  • app
    The top-level app component.

  • buttonPanel
    The panel that contains the two buttons. This shows a simple composition pattern in which props are passed through to child components.

  • button
    A generic Button component.

  • countDisplay
    A display of the current count.

Built with blockbuilder.org

forked from curran's block: Stopwatch

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://unpkg.com/d3@4'></script>
<script src='https://unpkg.com/d3-component@3'></script>
<script src='https://unpkg.com/redux@3/dist/redux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
<style>
body {
text-align: center;
margin-top: 75px;
}
.count-display {
color: #3d3d3d;
font-size: 10em;
font-family: sans;
cursor: default;
}
button {
background-color: #7c7c7c;
border: solid 3px #7c7c7c;
border-radius: 11px;
color: white;
padding: 20px 60px;
margin: 20px;
font-size: 58px;
cursor: pointer;
}
button:hover {
border: solid 3px black;
}
button:focus {
outline: none;
}
</style>
</head>
<body>
<script src='vis.js'></script>
</body>
Raw
lebab.sh
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template
Raw
vis.js
/* global d3 Redux */
// A component that renders the count.
const countDisplay = d3.component('div', 'count-display')
.render(function (selection, d) {
selection.text(d.count);
});
// A generic Button component.
const button = d3.component('button')
.render(function (selection, d) {
selection
.text(d.text)
.on('click', d.onClick);
});
// The panel that contains the two buttons.
const buttonPanel = d3.component('div', 'button-panel')
.render(function (selection, d) {
selection.call(button, [
{
text: '-',
onClick: d.actions.decrement,
},
{
text: '+',
onClick: d.actions.increment,
},
]);
});
// The top-level app component.
const app = d3.component('div')
.render(function (selection, d) {
selection
.call(countDisplay, d)
.call(buttonPanel, d);
});
function main() {
const store = Redux.createStore(reducer);
const actions = actionsFromDispatch(store.dispatch);
render();
store.subscribe(render);
function reducer(state, action) {
const count = state || 0;
switch (action.type) {
case 'INCREMENT': return count + 1;
case 'DECREMENT': return count - 1;
default: return count;
}
}
function actionsFromDispatch(dispatch) {
return {
increment() {
dispatch({ type: 'INCREMENT' });
},
decrement() {
dispatch({ type: 'DECREMENT' });
},
};
}
function render() {
d3.select('body').call(app, {
count: store.getState(),
actions,
});
}
}
// call main() to run the app
main();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment