visualize-it v1.5.1

Welcome to visualize-it!

Have you ever wanted to visually look at a set of interconnected data and derive insightful information from it? Have you wondered how long will it take to do it? Well... wonder no more and add this component into your project...

This code is copied and enhanced from http://bl.ocks.org/eyaler/10586116. The intention here is to make it easier to use and make it accessible to angular application.

NOTE: Starting with version 1.5.1 all previous versions are deprecated and you need to import this library through @sedeh/visualize-it. Future bug fixes / enhancements will be on @sedeh scope.

Live Demo | Source code | Comments/Requests

MODULE:
  VisualizeItModule

EXPORTS:
  VisualizeItComponent

Component attributes

Data Attributes Structure

The JSON objects list passed in as data, should have the following attributes:

Type mapping will be used in legends section as a tool tip help.

So... How it can be done?

Run npm install visualize-it in your application. and do the following:

in your html:

<visualize-it	
  [data]="data.names" 
  [typeMapping]="data.roles" 
  enableLegends="true"
  enableTooltip="true"
  gradientsEnabled="false"
  showTypeOnHover="true"
  showDirections="true"
  showCurvedConnections="true"
  width="calc(100vw - 44px)" 
  height="400px"></visualize-it>

Where typeMapping is a mapping of shapes to explain them. A sample data could be like the following:
{
    roles: {
      "circle": "Mentor",
      "diamond": "Student"
    },
    names: [
      {"id":"0", "size": 60, "group": 0, data: {age: 22, gender: "female", score: 5657567}, "name": "Andrea", type:"circle", sources:["1","2"]},
      {"id":"1", "size": 10, "group": 2, data: {age: 32, gender: "female", score: 5756756}, "name": "Josephine", type:"circle", sources:["3","4"]},
      {"id":"2", "size": 60, "group": 4, data: {age: 54, gender: "male", score: 2343423}, "name": "Alfred", type:"diamond", sources:["4"]},
      {"id":"3", "size": 10, "group": 6, data: {age: 43, gender: "female", score: 8675755}, "name": "Maya", type:"diamond"]},
      {"id":"4", "size": 60, "group": 8, data: {age: 33, gender: "male", score: 9678678}, "name": "Ali", type:"diamond"}
    ]
}

for projects started with angular 2, 4, or 5 and upgraded to 6. In your .angular-cli.json file include the following:

  "apps": [
    {
      ....

      "assets": [
        "assets",
        { "glob": "**/*", "input": "../node_modules/visualize-it/src/assets/", "output": "./assets/" },
        "favicon.ico"
      ],

      ....

for projects started with angular 6 your angular.json file include the following:

  "architect": [
    {
      ....

      "assets": [
        "assets",
        { "glob": "**/*", "input": "./node_modules/visualize-it/src/assets/", "output": "./assets/" },
        "favicon.ico"
      ],

      ....

Versions