Skip to content

Instantly share code, notes, and snippets.

Last active March 25, 2017 07:04
Show Gist options
  • Save curran/acde35df0c7939ff97740b4f9800258e to your computer and use it in GitHub Desktop.
Save curran/acde35df0c7939ff97740b4f9800258e to your computer and use it in GitHub Desktop.
license: mit

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

forked from curran's block: Stopwatch

<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<script src=""></script>
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;
// A component that renders the count.
var countDisplay = d3.component("div", "count-display")
.render(function (selection, d){
// A generic Button component.
var button = d3.component("button")
.render(function (selection, d){
.on("click", d.onClick);
// The panel that contains the two buttons.
var buttonPanel = d3.component("div", "button-panel")
.render(function (selection, d){, [
text: "+",
onClick: d.actions.increment
text: "-",
onClick: d.actions.decrement
// The top-level app component.
var app = d3.component("div")
.render(function (selection, d){
.call(countDisplay, d)
.call(buttonPanel, d);
function main(){
var store = Redux.createStore(reducer),
actions = actionsFromDispatch(store.dispatch);
function reducer (state, action){
var count = state || 0;
switch (action.type) {
case "INCREMENT": return count + 1;
case "DECREMENT": return count - 1;
default: return count;
function actionsFromDispatch(dispatch){
return {
increment: function (){
dispatch({ type: "INCREMENT" });
decrement: function (){
dispatch({ type: "DECREMENT" });
function render(){"body").call(app, {
count: store.getState(),
actions: actions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment