christophermanning

Forked from Tom MacWright and updated by Christopher Manning

Summary

This adds simplex noise to the waves. The 3D noise uses the parameters x and y. z is a function of the velocity and frame from d3.timer.

Controls

• Drag up and down to adjust the height of the noise

christophermanning

Created by Christopher Manning

Summary

This generates a Sierpinski Triangle graph using a force-directed layout.

Controls

• Use the mousewheel to increase or decrease the iterations.

christophermanning

Created by Christopher Manning

Summary

References

• Sierpinski Triangle
• Chaos Game
• D3.js

christophermanning

Created by Christopher Manning

References

• Delaunay Triangulation
• D3.js Voronoi Geom

christophermanning

Created by Christopher Manning

Summary

Draws a force directed graph using svg:path and geo projections onto a sphere.

TODO

christophermanning

Created by Christopher Manning

Summary

This creates a graph with the number of nodes you specify and random edges based on the probability selected. The number indicates how many edges are connected to that node. Red nodes are not connected to any other nodes.

Inspired by this tweet from @ChicagoCDO

Nodes are added to the graph along the path of an Archimedean spiral. This is more pleasing than adding nodes at random locations. This also prevents

christophermanning

By adding transitions, we can more easily follow the elements as they are entered, updated and exited. Separate transitions are defined for each of the three states.

Note that no transition is applied to the merged enter + update selection; this is because it would supersede the transition already scheduled on entering and updating elements. It's possible to schedule concurrent elements by using transition.transition or by setting transition.id, but it's simpler here to only transition the x-position on update; for entering elements, the x-position is assigned statically.

Want to read more? Try these tutorials:

• Thinking with Joins
• Nested Selections
• Object Constancy

christophermanning

Created by Christopher Manning

Summary

The wards in Chicago were recently remapped and I was mesmerized by the idea of creating an interaction that would animate the transition from the old to the new wards. I shortly found out that tweening polygons in a non-intersecting and interlocked fashion is a complicated topic. I've done a lot of reading about the math and research that has been done in this space and found a few interesting theories which I would like to implement in a future version. Currently, the morphing/tweening/interpolation is done with an array interpolator. Unfortunately, this technique causes the intermediate polygons to self-intersect and morph inefficiently. Ideally, I would overlay these polygons on a slippy map and there

christophermanning

Created by Christopher Manning

Summary

Nodes are linked to nodes in neighboring cells. The cell's color is a function of its area.

The white lines are the Delaunay triangulation and the purple cells are the Voronoi diagram.

Controls

christophermanning

<style type="text/css">p {text-align:center;width: auto}</style>

Created by Christopher Manning

Gallery

[![Star]