Todos

100%

✓ Published0🌍 Public

Last edited Mar 25, 2017

Created on Mar 4, 2017

A todo list application demonstrates building interactive user interfaces with d3-component, using Redux for state management and d3 transitions for enter and exit animations. The interface supports adding, toggling, and filtering todos by visibility status. The code leverages d3-component’s render, create, and destroy lifecycle hooks, with transition calls animating list item size changes, and a key function binding data to DOM elements.

AI-generated description

A todo app that demonstrates usage of d3-component. Inspired by Redux Todos Example.

This implementation has a few rough edges compared to the original with React and Redux, but it's also less code and does implement all the same features. This example shows that that d3-component can in fact be used to construct moderately complex user interfaces, and it also shows some of its limitations.

One strong point of d3-component is its support for transitions. I wonder what it would it look like to implement the same functionality in React?

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/acde35df0c7939ff97740b4f9800258e'>Counter</a>

Built with blockbuilder.org

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2238990&f=16777215&b=0" border="0" height="18" width="83"></a><br></div>

mit Licensed

Similar vizzes

Loading thumbnail…

Hello React + D3!

This example demonstrates a reusable React component that integrates with D3 to render animated SVG graphics. Dynamic data updates every second, repositioning circles while diagonal lines are redrawn to follow the resizing viewport. The code uses D3 v4 transitions for smooth attribute changes, React's lifecycle methods (`componentDidMount`, `componentWillUnmount`) for setup and cleanup, and a `setInterval` to update the visualization. It also responds to window resizing and keyboard input to toggle the graphic's visibility.

CCurran Kelleher

72% match

Loading thumbnail…

React 101

This React 101 example demonstrates a hands-on teaching environment for the React library, showcasing functional components and props through a simple todo list. The header component (`Header.js`) dynamically changes its greeting and text color based on the current hour of the day, while the main list renders three todo items from a static `todosData` array. The app uses `ReactDOM.render()` to mount the root `App` component, which combines `Header`, `TodoItem`, and `Footer` components, with each `TodoItem` receiving its data via React props. Styling is applied through a linked CSS file, and the example leverages React 16.13.1 from unpkg.

Ddata-inside

72% match

Loading thumbnail…

Hello d3-component

This example demonstrates the complete API of d3-component, a library for creating reusable components with lifecycle methods. It renders text elements that animate their font size on creation, update, and removal. The code uses d3-component's `create`, `render`, `destroy`, and `key` functions with d3 v4 selections and transitions. The demo cycles through states, showing how components handle entering, updating, and exiting data, ending with an empty array to remove all instances.

CCurran Kelleher

71% match

Loading thumbnail…

Redux + D3 in the browser

A Redux store manages a counter and iteration count, displayed as a text label in an SVG. The D3 v4 code renders the SVG and two buttons, while Redux dispatches `INCREMENT`, `DECREMENT`, `ZERO`, and `RESET` actions. A `d3.interval` timer randomly dispatches increment or decrement actions every 100 milliseconds. The store’s `subscribe` method updates the text element in response to state changes, demonstrating a pure Redux pattern for UI synchronization without a view-binding library.

PPhilippe Rivière

71% match

Loading thumbnail…

D3 and React

Two React components render D3 visualizations side-by-side. A bar chart maps an array of values to SVG rectangles and text labels, using D3's data join with `selectAll`, `enter`, and attribute setters, with colors via HSL strings and classes for high/low values. A second component demonstrates React's managed rendering alongside unmanaged D3 updates, appending HTML elements, merging enter/update selections, and animating appended spans with `transition().duration().delay()`. Both components use `useRef` and `useEffect` to access the DOM, with data generated by `d3.range`.

Ggjonor

70% match

Loading thumbnail…

Fork of React Starter

A todo list application demonstrates CRUD operations with a clean, minimal interface. Built with React 16.13.1, the app uses the `useState` hook to manage task state and the `nanoid` library to generate unique IDs for each item. Users can add, edit, delete, and toggle task completion through a form, per-item buttons, and checkboxes. The interface displays the remaining task count dynamically, updating as tasks are added or removed. The code renders to the DOM via `ReactDOM.createRoot` and uses component-based architecture to separate form, task, and filter logic.

HHails

69% match

Loading thumbnail…

React Starter

D3 v5 and React render a static array of eight numeric values as a sequence of teal bars, with each bar’s height proportional to its data value. The code showcases D3’s select, data binding, and transition APIs in a browser-based animation, using `d3.select` to append paragraphs and styled `div` elements. A 10-second transition animates the bar heights from their initial 75-pixel default to the computed `d*10` pixel values, while a separate heading labels the visualization “Var Values In Respective Order.” The dataset is embedded directly in the HTML script, and the React framework is referenced via the starter project structure, though no React components appear in the visible code.

MMohammad Afaq Khan

68% match

Loading thumbnail…

Untitled

This example demonstrates a minimal React application that renders an interactive visualization using D3.js. It displays a force-directed graph where nodes and links are positioned and animated through d3.forceSimulation. The React component manages the SVG container as a ref and directly manipulates the DOM to update node positions and link paths on each simulation tick. The code imports specific D3 functions including forceSimulation, forceLink, forceManyBody, forceCenter, and uses a drag interaction via d3.drag. Data is created inline as a small set of test nodes and edges.

Llibertycoda

68% match