Davo Galavotti davo

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

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

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

Built with blockbuilder.org

Learning how to make a threshold scale while making a tribute to the lead singer of U2 and his well-known proficent spanish.

Built with blockbuilder.org


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Sheetsee Demo Tabla</title>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js'></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Sheetsee Demo Tabla</title>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js'></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
	<script type='text/javascript' src='https://cdn.rawgit.com/jlord/sheetsee.js/master/js/sheetsee.js'></script>

	switch temperatura {
	case -20...20:
	toColors = [ UIColor(rgba: "#4355D7").CGColor, UIColor(rgba: "#D930B9").CGColor]
	default:
	toColors = [ UIColor(rgba: "#1804D2").CGColor, UIColor(rgba: "#0091FF").CGColor]
	}

	scrolling: yes
	license: MIT