git-ashish

Click on the x axis line and drag to change the scale of the graph.

git-ashish

<!--
The MIT License (MIT)

Copyright (c) 2013 bill@bunkat.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is

git-ashish

# Install subversion
sudo apt-get -y install subversion
 
# Install g++
sudo apt-get -y install g++
 
# Install Hierarchical Data Format library
# NOTE: This library is not necessarily needed, but was required
#       in order for this to compile against a clean Ubuntu 12.04 LTS system.
#       I didn't need it on a clean EC2 Ubuntu 12.10 instance, so

git-ashish

// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
  .on('dragover', handleDragOver)
  .on('drop', handleFileSelect)
  ;

function handleFileSelect() {
  var event = d3.event
    , files = event.dataTransfer.files // FileList object
    , about = []

git-ashish

This example demonstrates D3’s support for azimuthal projections and clipping to great circles! Release 2.3.0 also includes support for Gnomonic, Bonne, Werner and Sinusoidal projections, as well as for rendering great arcs.

The geometry for this example comes from Natural Earth’s coastline dataset.

git-ashish

// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
  .on('dragover', handleDragOver)
  .on('drop', handleFileSelect)
  ;

function handleFileSelect() {
  var event = d3.event
    , files = event.dataTransfer.files // FileList object
    , about = []

git-ashish

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

• works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
• interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
• percentages are shown explicitly, to help overcome the distortion of the data that occurs wh

git-ashish

Faux-3d SVG globe using d3.geo.orthographic and a few radial gradients. Labels offset or hidden based on radians from current map center to enhance the effect.

Uncomment svg.append("g").attr("class","countries") for hover-able country outlines.

git-ashish

Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.

git-ashish

	.wrapper:hover label{
		background-position:left bottom;
	}
	label{
		background:url('http://img833.imageshack.us/img833/5959/stard.png') no-repeat left bottom;
		float:right;
		line-height:20px;	
		padding-left:20px;
		height:15px;
	}