resize.eval = function() {
		selectAll('svg').remove()
		selectAll('.chart-drawing')
			.append('svg')
			.append('g').attr('class', 'view')
		drawCharts(data)
	}

	.get((error: any, data: any[]) => {
		if (error != null)
		{
			alert('Data can\'t be downloaded or parsed')
			return
		}

		const onPath = (path: any) => {
			 path.attr('d', (cityIdx: number) =>
				d3shape.line()
                     .defined((d: number[]) => d[cityIdx])
                     .x((d: number[], i: number) => i)
					.y((d: number[]) => d[cityIdx])
					.call(null, data)
			)
		}

        const onPathModel = (path: any) => {
            path.attr('d', (cityIdx: number) =>
                d3shape.line()
                    .defined((d: number[]) => d[cityIdx])
                    .x((d: number[], i: number) => calcDate(i, startDate, 86400000))
                    .y((d: number[]) => d[cityIdx])
                    .call(null, data)
            )
        }

        d3selection.selectAll('svg#default').select(function () {
            new draw.TimeSeriesChart(d3selection.select(this), 0, 1, [0, 1], onPath, data.length)
		})
        d3selection.selectAll('svg#model').select(function () {
            new drawModelCS.TimeSeriesChartModelCS(d3selection.select(this), startDate, 86400000, [0, 1], onPathModel, data.length)
        })
    })

export function drawCharts (data: [number, number][]) {
	let charts: TimeSeriesChart[] = []

	const onZoom = () => charts.forEach((c) => c.zoom())
	const onMouseMove = () => {
		const [x, _] = d3mouse(d3event.target)
		charts.forEach((c) => c.onHover(x))
	}

	const onSelectChart: ValueFn<HTMLElement, any, any> = function (element: HTMLElement, datum: any, descElement: any) {
		const svg = select(this).select('svg')
		const legend = select(this).select('.chart-legend')
		let chart = new TimeSeriesChart(svg, legend, Date.now(), 86400000, data.map(_ => _), buildSegmentTreeTupleNy, buildSegmentTreeTupleSf, onZoom, onMouseMove)
		charts.push(chart)
	}

	selectAll('.chart').select<HTMLElement>(onSelectChart)

	let j = 0
	setInterval(function() {
		let newData = data[j % data.length]
		charts.forEach(c => c.updateChartWithNewData(newData))
		j++
	}, 5000)
	measure(3, (fps) => {
		document.getElementById('fps').textContent = fps
	})
}

onCsv((data) => {
	const path = selectAll('g.view')
		.selectAll('path')
		.data([0, 1])
		.enter().append('path')
		.attr('d', (cityIdx) =>
			line()
				.defined((d) => !isNaN(d[cityIdx]))
				.x((d, i) => i)
				.y((d) => d[cityIdx])
				.call(null, data),
		)

	selectAll('svg').each(function() {
		return new TimeSeriesChart(select(this), data.length)
	})
	measureAll()
})

window['buildSpecOpts'] = (id: string, baseName: string) => {
  const oldName = select('#' + id).attr('data-name');
  const prefixSel = select('select[name=' + id + ']');
  const inputsSel = selectAll('input[name=' + id + ']:checked');
  const prefix = prefixSel.empty() ? id : prefixSel.property('value');
  const values = inputsSel
    .nodes()
    .map((n: any) => n.value)
    .sort()
    .join('_');
  const newName = baseName + prefix + (values ? '_' + values : '');
  if (oldName !== newName) {
    window['changeSpec'](id, newName);
  }
};

export function drawCharts (data: [number, number][]) {
	let charts: TimeSeriesChart[] = []

	const onZoom = () => charts.forEach((c) => c.zoom())

	const onSelectChart: ValueFn<any, any, any> = function (element: any, datum: any, descElement: any) {
		let chart = new TimeSeriesChart(select(this), Date.now(), 86400000, data.map(_ => _), buildSegmentTreeTuple, onZoom)
		charts.push(chart)
	}

	selectAll('svg').select(onSelectChart)

	measure(3, (fps) => {
		document.getElementById('fps').textContent = fps
	})
}

exitTransition = exitTransition.filter(function (d, i, g) {
    let that: SVGCircleElement = this;
    // let that2: HTMLElement  = this; // fails, type mismatch
    let datum: CircleDatum = d;
    let index: number = i;
    let group: SVGCircleElement[] | ArrayLike<SVGCircleElement> = g;
    // console.log(this.x) // fails, x property not defined on SVGCircleElement
    return this.r.baseVal.value < i * d.r; // this-type SVGCircleElement, datum tpye CircleDatum
});

// Scenario 2: Filtering narrows the type of selected elements in a known way

// assume the class ".any-svg-type" can only be assigned to SVGElements in the DOM
let filterdGElements2: d3Transition.Transition<SVGGElement, any, HTMLElement, any>;

filterdGElements2 = selectAll<SVGElement, any>('.any-svg-type').transition().filter<SVGGElement>('g');
// filterdGElements2 = selectAll('.any-type').transition().filter('g'); // fails without using narrowing generic on filter method

filterdGElements2 = selectAll<SVGElement, any>('.any-svg-type').transition().filter<SVGGElement>(function (d, i, g) {
    let that: SVGElement = this;
    // let that2: HTMLElement  = this; // fails, type mismatch
    let datum: CircleDatum = d;
    let index: number = i;
    let group: SVGElement[] | ArrayLike<SVGElement> = g;
    return that.tagName === 'g' || that.tagName === 'G';
});
// filterdGElements2 = selectAll<SVGElement, any>('.any-svg-type').transition().filter(function(){
//     let that: SVGElement = this;
//     return that.tagName === 'g'|| that.tagName === 'G';
// }); // fails without using narrowing generic on filter method

hljs.initHighlightingOnLoad();

declare const BASEURL: string;

const loader = vega.loader({
  baseURL: BASEURL
});

const editorURL = 'https://vega.github.io/editor/';

function trim(str: string) {
  return str.replace(/^\s+|\s+$/g, '');
}

/* Anchors */
selectAll('h2, h3, h4, h5, h6').each(function(this: d3.BaseType) {
  const sel = select(this);
  const name = sel.attr('id');
  const title = sel.text();
  sel.html('<a href="#' + name + '" class="anchor"><span class="octicon octicon-link"></span></a>' + trim(title));
});

/* Documentation */
function renderExample($target: Selection<any, any, any, any>, specText: string) {
  $target.classed('example', true);
  $target.text('');

  const vis = $target.append('div').attr('class', 'example-vis');

  // Decrease visual noise by removing $schema and description from code examples.
  const textClean = specText.replace(/(\s)+\"(\$schema|description)\": \".*?\",/g, '');

/**
 * Typescript definition tests for d3/d3-selection-multi module
 *
 * Note: These tests are intended to test the definitions only
 * in the sense of typing and call signature consistency. They
 * are not intended as functional tests.
 */

import { selectAll, Selection, ArrayLike } from 'd3-selection';
import { Transition } from 'd3-transition';

import * as d3SelectionMulti from 'd3-selection-multi';

let selection: Selection<HTMLAnchorElement, string, HTMLElement, undefined> = selectAll<HTMLAnchorElement, string>('a');

// Selection.attrs

// Simple object
selection = selection.attrs({
    foo: 1,
    bar: '2',
    baz: true,
});

// Function values
selection = selection.attrs({
    foo: () => 1,
    bar: (d) => d,
    baz: (d, i) => i !== 0,
    bat() {
        return this.href;