siddharthpolisiti

d3js Multiline chart with brushing and mouseover

Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.

When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.

To see this example as part of a larger project, check out Modal Logic Playground!

Time scales

This demo several time scales. src

full screen demo

D3's time axis does magic things. I expected to modify the x axis such that I could mostly re-use D3's date formatting tricks, but exercise greater control over the resolution at different time scales.

	1
	00:01:21,047 --> 00:01:22,787
	MAN: Yes.

	2
	00:01:58,384 --> 00:02:06,384
	Yes.

	3
	00:02:45,632 --> 00:02:47,933

	import java.util.ArrayList;
	import java.util.List;

	public class FlattenArrays {
	List<Integer> temp = new ArrayList<Integer>();
	public int[] flatArray(Object[] input){
	if(input.getClass().isArray()){
	for(int i=0;i<input.length;i++){
	if(!input[i].getClass().isArray()){
	temp.add((Integer) input[i]);

	var arr=[{name:"sidd",age:26},{name:"john",age:30},{name:"gary",age:20}];

	function compare(a,b) {
	if (a.age < b.age)
	return -1;
	if (a.age > b.age)
	return 1;
	return 0;
	}

	// JSBIN link - http://jsbin.com/wedoqeyezi/edit?js,output (EDIT - http://jsbin.com/kuvepo/edit?js,console)
	// The below works because the first iteration find this elements and checks whether they are array or not if not then it simply
	// pushes the element to the flatArray else if they are array they are sent to recursive function for further processing till a
	// value(not array) is reached and then finally pushed to flatArray.
	var arr = [[1,2,[3]],4];
	flatArray = [];
	for(var i=0;i<arr.length;i++){
	if(arr[i].length === undefined){
	flatArray.push(arr[i]);
	}

	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>

	<style>

	body {
	font: 10px sans-serif;
	}