Bart Aelterman bartaelterman

Domain line chart example

This example explains how to create a line chart that consits of several domains (analogues to the domains defined in cal-heatmap).

For every domain, a separate svg element is added to the DOM. When pressing Previous or Next, new data is fetched and a new svg element with a line chart is created. This new svg element is placed before (in the case of Previous) or after (in the case of Next) the existing domain svgs. Next, all domain svgs are shifted either to the left or to the right, and finally the svg element on the opposide side is removed from the DOM.

The code also contains a nrOfPrefetchedDomains parameter. When set to 1, two additional domains are constructed and placed on either side of the chart area, but they remain invisible (using the class invisible and the display: none attribute in the style sheet). This is useful when you would replace the DataObjStub by something that performs API calls to a backend. By pr

Line chart example

This code demonstrates how to create a line chart in d3 and how to let the user navigate it.

Code explanation

1. Draw the line chart

Drawing a basic line chart is explained here. Some adjustments to this example were made:

	library(RAtmosphere)
	library(maptools)
	library(lubridate)


	# The next function comes from the r-bloggers website
	# http://www.r-bloggers.com/approximate-sunrise-and-sunset-times/
	suncalc.custom <- function(d,Lat=48.1442,Long=-122.7551, earth.radius=6371, dist.sun=149598000){
	rad<-function(x)pi*x/180 # convert degrees to radians
	epsilon=rad(23.45) # Radians between the xy-plane and the ecliptic plane

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

	rect {
	stroke: #fff;
	}

	</style>
	<body>

	# Fetch all RNA-Seq datasets from bacteria and flag those from Illumina and a gut species
	RNA_Seq_experiments.tsv: find_sra_exps.py update_SRA_run_dates.py query_sra.py test_query_sra.py
	python find_sra_exps.py
	python update_SRA_run_dates.py RNA_Seq_experiments.tsv RNA_Seq_experiments_date.tsv
	mv RNA_Seq_experiments_date.tsv RNA_Seq_experiments.tsv

	angular.module('sphere1', [])
	.controller('SphereController', function() {
	this.radius;
	this.currentCircle = 1;

	this.circles = circles;

	this.setCurrent = function(val) {
	this.currentCircle = val;
	console.log(val);

	sayHi <- function(name) {
	return(paste("Hi", name, sep=" "))
	}