Fabian Morón Zirfas ff6347

This example demonstrates a simple method of hand-tweaking a force-directed layout. Using d3.behavior.drag, the nodes in this network are made draggable; dragging updates the x and y properties of each node. The resulting graph could then be saved back to a JSON file using JSON.stringify.

Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.

A force-directed graph using images as nodes, with accompanying text labels.

Click into the drawing area to start the selection frame
move the mouse to resize the selection frame
Release the mouse button to resize the selection frame

new features :

circles are draggable
circles can be selected (multiple selections possible by pressing CTRL while clicking a circle)
the selection frame selects all circles within the frame (by pressing CTRL the selected circles will be appended to current selection)
multiple selected circles will be dragged simultaneous

Drag from an existing node to add a new node or link. Click to select/deselect nodes/links. Hit the DELETE key to remove the selected node or link. Drag to pan. Scroll to zoom.

Built with D3.js.

An example of how to combine d3.behavior.drag and d3.behavior.zoom, using stopPropagation to allow the drag behavior to take precedence over panning. Use the mouse to pan by clicking on the background, or drag by clicking on individual dots; you may also use the mousewheel to zoom.

Note: combining these two behaviors means that gesture interpretation is ambiguous and highly sensitive to position. A click on a circle is interpreted as dragging that circle, whereas a click one pixel away could be interpreted as panning the background. A more robust method of combining these behaviors is to employ modality. For example, if the user holds down the SPACE key, clicking and dragging is interpreted as panning, rather than dragging, regardless of the click location. This approach is commonly employed in commercial software such as Adobe Photoshop.

This example was created in response to a [Stack Overflow quest

	/**
	* @author: @fabiantheblind
	* @license: MIT
	* This sketch takes CSV files exported by the tobii eyetracker 1750
	* and displays its gaze points
	*/

	CSVFile tobiiexportfile; // the reference to the file
	Table table;
	Column gazePointX; // a column from the CSV

	/*
	* Oscilloscope
	* Gives a visual rendering of analog pin 0 in realtime.
	*
	* This project is part of Accrochages
	* See http://accrochages.drone.ws
	*
	* (c) 2008 Sofian Audry ([email protected])
	*
	* This program is free software: you can redistribute it and/or modify

	/*
	* Oscilloscope
	* Gives a visual rendering of analog pin 0 in realtime.
	*
	* This project is part of Accrochages
	* See http://accrochages.drone.ws
	*
	* (c) 2008 Sofian Audry ([email protected])
	*
	* This program is free software: you can redistribute it and/or modify

	# Install MacTex: http://mirror.ctan.org/systems/mac/mactex/mactex-basic.pkg

	$ sudo chown -R `whoami` /usr/local/texlive
	$ tlmgr update --self
	$ tlmgr install ucs
	$ tlmgr install etoolbox

	# Install pandoc view homebrew
	$ brew install haskell-platform
	$ cabal update