@amcharts/amcharts4/examples/javascript/chord-friends-kisses/index.js

amCharts 4

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 * 
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */


am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.ChordDiagram);


// colors of main characters
chart.colors.saturation = 0.45;
chart.colors.step = 3;
var colors = {
    Rachel:chart.colors.next(),
    Monica:chart.colors.next(),
    Phoebe:chart.colors.next(),
    Ross:chart.colors.next(),
    Joey:chart.colors.next(),
    Chandler:chart.colors.next()
}

// data was provided by: https://www.reddit.com/user/notrudedude

chart.data = [
// node property fields take data from data items where they are first mentioned, that's 
// why we add empty data items at the beginning and set colors here
{"from":"Monica", "image":"monica.png", "color":colors.Monica},
{"from":"Rachel", "image":"rachel.png", "color":colors.Rachel},
{"from":"Chandler", "image":"chandler.png", "color":colors.Chandler},
{"from":"Ross", "image":"ross.png", "color":colors.Ross},
{"from":"Joey", "color":colors.Joey, "image":"joey.png",},
{"from":"Phoebe", "image":"phoebe.png", "color":colors.Phoebe},

// real data
{"from":"Monica","to":"Rachel","value":4},
{"from":"Monica","to":"Chandler","value":113},
{"from":"Monica","to":"Ross","value":16},
{"from":"Monica","to":"Joey","value":9},
{"from":"Monica","to":"Phoebe","value":3},
{"from":"Monica","to":"Paul the wine guy","value":1},
{"from":"Monica","to":"Mr Geller","value":6},
{"from":"Monica","to":"Mrs Geller","value":5},
{"from":"Monica","to":"Aunt Lilian","value":1},
{"from":"Monica","to":"Nana","value":1},
{"from":"Monica","to":"Young Ethan","value":5},
{"from":"Monica","to":"Ben","value":3},
{"from":"Monica","to":"Fun Bobby","value":3},
{"from":"Monica","to":"Richard","value":16},
{"from":"Monica","to":"Mrs Green","value":1},
{"from":"Monica","to":"Paolo2","value":1},
{"from":"Monica","to":"Pete","value":10},
{"from":"Monica","to":"Chip","value":1},
{"from":"Monica","to":"Timothy (Burke)","value":1},
{"from":"Monica","to":"Emily","value":1},
{"from":"Monica","to":"Dr. Roger","value":3},
{"from":"Rachel","to":"Chandler","value":7},
{"from":"Rachel","to":"Ross","value":80},
{"from":"Rachel","to":"Joey","value":30},
{"from":"Rachel","to":"Phoebe","value":6},
{"from":"Rachel","to":"Paolo","value":5},
{"from":"Rachel","to":"Mr Geller","value":2},
{"from":"Rachel","to":"Mrs Geller","value":1},
{"from":"Rachel","to":"Barry","value":1},
{"from":"Rachel","to":"Dr Green","value":3},
{"from":"Rachel","to":"Mark3","value":1},
{"from":"Rachel","to":"Josh","value":2},
{"from":"Rachel","to":"Gunther","value":1},
{"from":"Rachel","to":"Joshua","value":3},
{"from":"Rachel","to":"Danny","value":1},
{"from":"Rachel","to":"Mr. Zelner","value":1},
{"from":"Rachel","to":"Paul Stevens","value":3},
{"from":"Rachel","to":"Tag","value":4},
{"from":"Rachel","to":"Melissa","value":1},
{"from":"Rachel","to":"Gavin","value":2},
{"from":"Chandler","to":"Joey","value":1},
{"from":"Chandler","to":"Phoebe","value":7},
{"from":"Chandler","to":"Aurora","value":2},
{"from":"Chandler","to":"Jill Goodacre","value":1},
{"from":"Chandler","to":"Janice","value":11},
{"from":"Chandler","to":"Mrs Bing","value":3},
{"from":"Chandler","to":"Nina","value":1},
{"from":"Chandler","to":"Susie","value":5},
{"from":"Chandler","to":"Mary Theresa","value":1},
{"from":"Chandler","to":"Ginger","value":2},
{"from":"Chandler","to":"Joanna","value":5},
{"from":"Chandler","to":"Kathy","value":7},
{"from":"Chandler","to":"Mr Bing","value":1},
{"from":"Ross","to":"Joey","value":3},
{"from":"Ross","to":"Phoebe","value":18},
{"from":"Ross","to":"Carol","value":10},
{"from":"Ross","to":"Mrs Geller","value":8},
{"from":"Ross","to":"Aunt Lilian","value":1},
{"from":"Ross","to":"Mrs Bing","value":3},
{"from":"Ross","to":"Celia","value":2},
{"from":"Ross","to":"Julie","value":6},
{"from":"Ross","to":"Ben","value":6},
{"from":"Ross","to":"Mrs Green","value":2},
{"from":"Ross","to":"Chloe","value":1},
{"from":"Ross","to":"Bonnie","value":4},
{"from":"Ross","to":"Messy Girl (Cheryl)","value":5},
{"from":"Ross","to":"Emily","value":12},
{"from":"Ross","to":"Jill","value":1},
{"from":"Ross","to":"Elizabeth","value":8},
{"from":"Ross","to":"Aunt Millie","value":2},
{"from":"Ross","to":"Mona","value":11},
{"from":"Ross","to":"Emma","value":7},
{"from":"Ross","to":"Charlie","value":10},
{"from":"Joey","to":"Phoebe","value":6},
{"from":"Joey","to":"Janice","value":1},
{"from":"Joey","to":"Lorraine","value":2},
{"from":"Joey","to":"Melanie","value":2},
{"from":"Joey","to":"Erica","value":2},
{"from":"Joey","to":"Mrs Green","value":1},
{"from":"Joey","to":"Kate","value":4},
{"from":"Joey","to":"Lauren","value":2},
{"from":"Joey","to":"Estelle","value":1},
{"from":"Joey","to":"Kathy","value":2},
{"from":"Joey","to":"Emily","value":4},
{"from":"Joey","to":"Katie","value":2},
{"from":"Joey","to":"Janine","value":9},
{"from":"Joey","to":"Erin","value":1},
{"from":"Joey","to":"Cecilia","value":3},
{"from":"Joey","to":"Charlie","value":3},
{"from":"Phoebe","to":"David","value":14},
{"from":"Phoebe","to":"Roger","value":1},
{"from":"Phoebe","to":"Duncan","value":1},
{"from":"Phoebe","to":"Rob Dohnen","value":2},
{"from":"Phoebe","to":"Ryan","value":5},
{"from":"Phoebe","to":"Malcom","value":1},
{"from":"Phoebe","to":"Robert","value":1},
{"from":"Phoebe","to":"Sergei","value":1},
{"from":"Phoebe","to":"Vince","value":2},
{"from":"Phoebe","to":"Jason","value":1},
{"from":"Phoebe","to":"Rick","value":2},
{"from":"Phoebe","to":"Gunther","value":1},
{"from":"Phoebe","to":"Gary","value":7},
{"from":"Phoebe","to":"Jake","value":2},
{"from":"Phoebe","to":"Eric","value":3},
{"from":"Phoebe","to":"Mike","value":18},
{"from":"Carol","to":"Ben","value":1},
{"from":"Carol","to":"Susan","value":1},
{"from":"Mr Geller","to":"Mrs Geller","value":3},
{"from":"Frank","to":"Alice","value":5}]



chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";


chart.nodePadding = 0.5;
chart.minNodeSize = 0.01;
chart.startAngle = 80;
chart.endAngle = chart.startAngle + 360;
chart.sortBy = "value";

var nodeTemplate = chart.nodes.template;
nodeTemplate.readerTitle = "Click to show/hide or drag to rearrange";
nodeTemplate.showSystemTooltip = true;
nodeTemplate.propertyFields.fill = "color";
nodeTemplate.tooltipText = "{name}'s kisses: {total}";

// when rolled over the node, make all the links rolled-over
nodeTemplate.events.on("over", (event)=>{    
    var node = event.target;
    node.outgoingDataItems.each((dataItem)=>{
        if(dataItem.toNode){
            dataItem.link.isHover = true;
            dataItem.toNode.label.isHover = true;
        }
    })
    node.incomingDataItems.each((dataItem)=>{
        if(dataItem.fromNode){
            dataItem.link.isHover = true;
            dataItem.fromNode.label.isHover = true;
        }
    }) 

    node.label.isHover = true;   
})

// when rolled out from the node, make all the links rolled-out
nodeTemplate.events.on("out", (event)=>{
    var node = event.target;
    node.outgoingDataItems.each((dataItem)=>{        
        if(dataItem.toNode){
            dataItem.link.isHover = false;                
            dataItem.toNode.label.isHover = false;
        }
    })
    node.incomingDataItems.each((dataItem)=>{
        if(dataItem.fromNode){
            dataItem.link.isHover = false;
           dataItem.fromNode.label.isHover = false;
        }
    })

    node.label.isHover = false;
})

var label = nodeTemplate.label;
label.relativeRotation = 90;

label.fillOpacity = 0.25;
let labelHS = label.states.create("hover");
labelHS.properties.fillOpacity = 1;

nodeTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
// this adapter makes non-main character nodes to be filled with color of the main character which he/she kissed most
nodeTemplate.adapter.add("fill", (fill, target)=>{
    let node = target;
    let counters = {};
    let mainChar = false;
    node.incomingDataItems.each((dataItem)=>{
        if(colors[dataItem.toName]){
            mainChar = true;
        }

        if(isNaN(counters[dataItem.fromName])){
            counters[dataItem.fromName] = dataItem.value;
        }
        else{
            counters[dataItem.fromName] += dataItem.value;
        }
    })
    if(mainChar){
        return fill;
    }

    let count = 0;
    let color;
    let biggest = 0;
    let biggestName;

    for(var name in counters){
        if(counters[name] > biggest){
            biggestName = name;
            biggest = counters[name]; 
        }        
    }
    if(colors[biggestName]){
        fill = colors[biggestName];
    }
  
    return fill;
})

// link template
var linkTemplate = chart.links.template;
linkTemplate.strokeOpacity = 0;
linkTemplate.fillOpacity = 0.1;
linkTemplate.tooltipText = "{fromName} & {toName}:{value.value}";

var hoverState = linkTemplate.states.create("hover");
hoverState.properties.fillOpacity = 0.7;
hoverState.properties.strokeOpacity = 0.7;

// data credit label
var creditLabel = chart.chartContainer.createChild(am4core.TextLink);
creditLabel.text = "Data source: notrudedude";
creditLabel.url = "https://www.reddit.com/user/notrudedude";
creditLabel.y = am4core.percent(99);
creditLabel.x = am4core.percent(99);
creditLabel.horizontalCenter = "right";
creditLabel.verticalCenter = "bottom";

var titleImage = chart.chartContainer.createChild(am4core.Image);
titleImage.href = "whokissed.png";
titleImage.x = 30
titleImage.y = 30;
titleImage.width = 200;
titleImage.height = 200;