Timeline Philosophers Fiddle

Fiddle the timeline chart

Fork for editing

forked from uicoded's block: Timeline Philosophers

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" lang="de" content="Zeitleiste, Zeitlinie, Zeitkarte, Geschichte, Chronologie">
    <meta name="keywords" lang="en" content="Timeline, Timemap, History, Chronology">
    <title>Timeline - Proof-of-concept</title>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script src="timeline.js"></script>
    <link href="timeline.css" rel="stylesheet" type="text/css" />

</head>

<body>

/*  You need a domElement, a sourceFile and a timeline.

The domElement will contain your timeline.
        Use the CSS convention for identifying elements,
        i.e. "div", "p", ".className", or "#id".

The sourceFile will contain your data.
        If you prefer, you can also use tsv, xml, or json files
        and the corresponding d3 functions for your data.

A timeline can have the following components:

.band(bandName, sizeFactor
            bandName - string; the name of the band for references
            sizeFactor - percentage; height of the band relation to the total height
            Defines an area for timeline items.
            A timeline must have at least one band.
            Two bands are necessary, to change the selected time interval.
            Three and Bands are allowed.

.xAxis(bandName)
            bandName - string; the name of the band the xAxis will be attached to
            Defines an xAxis for a band to show the range of the band.
            This is optional, but highly recommended.

.labels(bandName)
            bandName - string; the name of the band the labels will be attached to
            Shows the start, length and end of the range of the band.
            This is optional.

.tooltips(bandName)
            bandName - string; the name of the band the labels will be attached to
            Shows current start, length, and end of the selected interval of the band.
            This is optional.

.brush(parentBand, targetBands]
            parentBand - string; the band that the brush will be attached to
            targetBands - array; the bands that are controlled by the brush
            Controls the time interval of the targetBand.
            Required, if you want to control/change the selected time interval
            of one of the other bands.

.redraw()
            Shows the initial view of the timeline.
            This is required.

To make yourself familiar with these components try to
        - comment out components and see what happens.
        - change the size factors (second arguments) of the bands.
        - rearrange the definitions of the components.
    */

// Define domElement and sourceFile
    var domElement = "#timeline";
    var sourceFile = "philosophers.csv";

// Read in the data and construct the timeline
    d3.csv(sourceFile, function(dataset) {

timeline(domElement)
            .data(dataset)
            .band("mainBand", 0.62976)
            .band("naviBand", 0.1504)
            .xAxis("mainBand")
            .tooltips("mainBand")
            .xAxis("naviBand")
            .labels("mainBand")
            .labels("naviBand")
            .brush("naviBand", ["mainBand"])
            .redraw();

});

</script>

</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js