Tree-Sphere Concept

Spheres are an intuitive way to explore data - just click and drag to turn it around! However, most sphere visualizations are opaque, hiding the back-side data and any inside data. This tree-sphere concept visualization is like a tree - the "leaves" are on the outside, branches are on the inside.

Point for tooltip
Click to pick
Drag to rotate
Wheel to zoom

Tap to pick
Drag to rotate
Pinch to zoom

What makes up the CPI?

The Consumer Price Index (CPI) is one of the most closely watched economic statistics. It measures what consumers pay for services and is used to gauge inflation, set monetary policy and adjust salaries.

But just what items are in the CPI? How much does each contribute? And how do they change?

Click Next to reveal the biggest item.

// phong lighting components of the light source
			uniform vec4 light_ambient;
			uniform vec4 light_diffuse;

// Fog parameters
			uniform vec4 fog_color;
			uniform float fog_density;

// shininess of the material. (for specular lighting)
			uniform float shininess;

// global alpha
			uniform float alpha;
		  
			// passed from the vertex shader
			varying vec3 pViewPosition;
			varying vec3 pLightVector;
			varying vec3 pNormal;

// color of the material
			varying vec4 fragmentColor;

/**
			* We use the standard phong illumination equation here.
			* We restrict (clamp) the dot products so that we
			* don't get any negative values.
			* All vectors are normalized for proper calculations.
			*
			* The output color is the summation of the
			* ambient, diffuse, and specular contributions.
			*/
			void main() {
				
				float lightSign = dot(pNormal, pLightVector);
				float cameraSign = dot(pNormal, pViewPosition);
				//float diffuseComp = cameraSign < 0.0 ? dot(-0.15 * pNormal, pLightVector) : lightSign;
				float diffuseComp = cameraSign < 0.0 ? 0.1 : lightSign;

float innerProduct = dot(pNormal, pLightVector);
				//float diffuseComp = innerProduct < 0.0 ? dot(-0.15 * pNormal, pLightVector) : innerProduct;
				//float diffuseComp = innerProduct < 0.0 ? 0.0 : innerProduct;
				float ambientComp = max(0.1, 1.0 - diffuseComp);

vec4 ambient = light_ambient * ambientComp * fragmentColor;
				vec4 diffuse = light_diffuse * diffuseComp * fragmentColor;
				vec4 color = vec4((ambient + diffuse).rgb, alpha);
				gl_FragColor = color;
/*
				// Per-pixel exponential fog
				const float LOG2 = 1.442695;
				float z = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = exp2( -fog_density * z * z * LOG2 );
				fogFactor = clamp(fogFactor, 0.0, 1.0);

gl_FragColor = mix(fog_color, color, fogFactor);
				*/
				
			}

Tree-Sphere Concept

What makes up the CPI?

What makes up the CPI?

What makes up the CPI?

What makes up the CPI?

What makes up the CPI?

More Data

Visualization Options