New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

visual-timeline

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

visual-timeline

A visual organizer that arranges image clusters on a timeline

latest

Source

npm

Version: 0.0.3

Version published: 11 years ago

Maintainers: 1

Created: 11 years ago

Source

VisualTimeline

The basic idea of this package is to organize visual data on a timeline. To this purpose the vis timeline library was used, as well as the cluster painter module that dislays time clustered images.

##Demo

You can find a demo here

##Browser Integration

Download the *.zip file. Copy the the css and lib folder into your home directory.

Then create an index file. A minimal version looks like this.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>VisualTimeline</title>

    <link rel="stylesheet" href="css/clusterPainter.css">
    <link rel="stylesheet" href="css/visualTimeline.css">
    <link href="css/vis.min.css" rel="stylesheet" type="text/css" />
    
    <script src="lib/vis.min.js"></script> 
    <script src="lib/bundle.min.js"></script> 
    
	<div id="scenery"></div>	
	<div id = "timeline_trigger"></div>
	<div id="visualization"></div>

   
  </body>
</html>

This version does not allow any configuration of the *.js object. However, it has the advantage that you are ready to use it without further ado. The only thing you have to do is to copy all your images into an images folder and then write:

node node_modules/cluster-painter/create_cluster.js

This demands that you have node.js installed.

If you want to improve the styling, you are free to do so.

##npm version

For simplicities sake - there are so many dependencies involved - the libary was conceived as an npm module that can be installed easily, via:

	npm install visual-timeline

But soon there will be a conventional *.js libary added that works with a singe minified file.

However, to get a decent display, there are tow style sheet files to be added:


    <link rel="stylesheet" href="node_modules/cluster-painter/css/clusterPainter.css">
    <link rel="stylesheet" href="node_modules/visual-timeline/css/visualTimeline.css">

In order to incorporate your images into the project, copy all your files in the images folder and run the following command:

node node_modules/cluster-painter/create_cluster.js

To get the library running, create the following mininal framework

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>VisualTimeline</title>

    <link rel="stylesheet" href="node_modules/cluster-painter/css/clusterPainter.css">
    <link rel="stylesheet" href="node_modules/visual-timeline/css/visualTimeline.css">
    <link href="node_modules/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
    
    <script src="bundle.js"></script> 
    
	<div id="scenery"></div>	
	<div id = "timeline_trigger"></div>
	<div id="visualization"></div>

   
  </body>
</html>

Then add an index.js file and define your object:

var vis   = require('./lib/vis.min.js');
var util            = require("util");
var $               = require('jquery');
var VisualTimebar   = require('./node_modules/visual-timeline/lib/VisualTimebar.js');
var ClusterPainter = require("cluster-painter");


$( document ).ready(function() {
   "use strict";
   var bar, params, cluster;

   cluster = new ClusterPainter({
                                      source: "cluster.json",  
                                      css_class: "standard",
                                      div: "scenery",
                                      type: "default"
                                      });


   params = {
       directories: ["images1"],
       clusterPainter: cluster
                
       };

   bar = new VisualTimebar.Bar(params);


   });

This code snippet creates the cluster painter area and links the image clusters to the timeline. Last thing you have to do is to browserify your project:

browserify -t browserify-css index.js > bundle.js

Thast's it!

This README is a preliminary version that will be improved soon.

Keywords

FAQs

What is visual-timeline?

Is visual-timeline well maintained?

Package last updated on 26 Sep 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install