This is a simple example showing how you can easily animate a gradient to mimic a flow
Other examples of animated gradients can be found here:
Note that Safari cannot handle the spreadMethod reflect, thus the gradient looks a bit weird in Safari. Try looking at this in Chrome or Firefox
Forked from Tom MacWright and updated by Christopher Manning
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.
An example of creating data based gradients used in my blog on Data-based and unique gradients for visualizations with d3.js . Here each star has a unique radial gradient where the color is based on the effective temperature of the star.
This is a Hertzsprung–Russell diagram. In this diagram stars are plotted according to their luminosities (or the related absolute magnitudes) versus their effective temperatures (or related spectral classifications). Many interesting discoveries around stellar evolution were speculated from this chart even before much was known about what happens in the interior of stars by looking at the positions of stars on the diagram.
The data comes from the HYG database. I took a subset of 400 stars that lie relatively close.
The orange circle is where our own
| scrolling: yes | |
| license: MIT |
Remake del gráfico publicado en el artículo de La Nación: «Cómo variaron los resultados del FPV entre las PASO de 2011 y las de 2015»
Basado en «D3 Slopegraph I» de @zbjornson
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| .link { | |
| fill: none; | |
| stroke: #666; | |
| stroke-width: 1.5px; | |
| } |
Click to perturb or drag the nodes!
This example demonstrates the flexibility of D3's force layout. By using position Verlet integration, it is easy to add custom forces to a layout. In this example, the nodes are clustered around four foci using additional forces: the odd nodes are pushed down, the even nodes are pushed up, and a similar bisecting force is applied laterally. These custom forces are based purely on the index of the node, but they could just as easily be derived from properties of data!
Click to add nodes! Nodes near the cursor will be linked to the new node.
D3's force layout uses the Barnes–Hut approximation to compute repulsive charge forces between all nodes efficiently. Links are implemented as geometric constraints on top of position Verlet integration, offering greater stability. A virtual spring between each node and the center of the chart prevents nodes from drifting into space.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ > | |
| <title>Gooey effect - Line</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <!-- jQuery --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
brew install ffmpeg gifsicle imagemagick.recording.mov.mkdir framesffmpeg -i recording.mov -r 24 recording-%03d.pngconvert recording-001.png palette.gifconvert -dither none -remap palette.gif recording-*.png recording-uncompressed.gifgifsicle --optimize=3 --delay=4 < recording-uncompressed.gif > recording.gif