Skip to content

Instantly share code, notes, and snippets.

@naxxateux
Last active August 29, 2015 13:56
Show Gist options
  • Save naxxateux/8810837 to your computer and use it in GitHub Desktop.
Save naxxateux/8810837 to your computer and use it in GitHub Desktop.
Investors interactive
{
"companies": [{
"number": 0,
"name": "AngelList",
"group": 1,
"product": "КРАУДИНВЕСТИНГ",
"connections": 4,
"color": "-"
}, {
"number": 1,
"name": "avantcredit.com",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 2,
"color": "-"
}, {
"number": 2,
"name": "Azimo",
"group": 1,
"product": "-",
"connections": 1,
"color": "-"
}, {
"number": 3,
"name": "Belly",
"group": 1,
"product": "E-COMMERCE",
"connections": 2,
"color": "-"
}, {
"number": 4,
"name": "Bigcommerce.com",
"group": 1,
"product": "E-COMMERCE",
"connections": 1,
"color": "-"
}, {
"number": 5,
"name": "bill.com",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 1,
"color": "-"
}, {
"number": 6,
"name": "BillFloat.com",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 3,
"color": "-"
}, {
"number": 7,
"name": "BitPay",
"group": 1,
"product": "BITCOIN",
"connections": 1,
"color": "-"
}, {
"number": 8,
"name": "CircleUp",
"group": 1,
"product": "КРАУДИНВЕСТИНГ",
"connections": 2,
"color": "-"
}, {
"number": 9,
"name": "Clinkle",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 5,
"color": "-"
}, {
"number": 10,
"name": "CoinBase.com",
"group": 1,
"product": "BITCOIN",
"connections": 5,
"color": "-"
}, {
"number": 11,
"name": "Creditkarma.com",
"group": 1,
"product": "МИКРО-КРЕДИТОВАНИЕ ОНЛАЙН",
"connections": 5,
"color": "-"
}, {
"number": 12,
"name": "Dwolla",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 2,
"color": "-"
}, {
"number": 13,
"name": "Erply",
"group": 1,
"product": "E-COMMERCE",
"connections": 2,
"color": "-"
}, {
"number": 14,
"name": "Fidor Russia",
"group": 1,
"product": "БАНКИ «MOBILE FIRST»",
"connections": 1,
"color": "-"
}, {
"number": 15,
"name": "Flint",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 1,
"color": "-"
}, {
"number": 16,
"name": "FundersClub",
"group": 1,
"product": "КРАУДИНВЕСТИНГ",
"connections": 7,
"color": "-"
}, {
"number": 17,
"name": "fundingcircle.com",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 4,
"color": "-"
}, {
"number": 18,
"name": "gocardless.com",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 4,
"color": "-"
}, {
"number": 19,
"name": "Gyft.com",
"group": 1,
"product": "ШОППИНГ И ЛОЯЛЬНОСТЬ",
"connections": 2,
"color": "-"
}, {
"number": 20,
"name": "Index.com",
"group": 1,
"product": "E-COMMERCE",
"connections": 1,
"color": "-"
}, {
"number": 21,
"name": "iZettle",
"group": 1,
"product": "MPOS-ЭКВАЙРИНГ",
"connections": 3,
"color": "-"
}, {
"number": 22,
"name": "Kabbage",
"group": 1,
"product": "МИКРО-КРЕДИТОВАНИЕ ОНЛАЙН",
"connections": 2,
"color": "-"
}, {
"number": 23,
"name": "KashFlow",
"group": 1,
"product": "СЕРВИСЫ ДЛЯ МАЛОГО И СРЕДНЕГО БИЗНЕСА",
"connections": 1,
"color": "-"
}, {
"number": 24,
"name": "Kreditech",
"group": 1,
"product": "СЕРВИСЫ ДЛЯ МАЛОГО И СРЕДНЕГО БИЗНЕСА",
"connections": 1,
"color": "-"
}, {
"number": 25,
"name": "learnvest.com",
"group": 1,
"product": "PFP",
"connections": 2,
"color": "-"
}, {
"number": 26,
"name": "LendingClub",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 4,
"color": "-"
}, {
"number": 27,
"name": "lendkey.com",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 1,
"color": "-"
}, {
"number": 28,
"name": "LendUp",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 7,
"color": "-"
}, {
"number": 29,
"name": "Level",
"group": 1,
"product": "PFM",
"connections": 1,
"color": "-"
}, {
"number": 30,
"name": "LifePAD",
"group": 1,
"product": "T-FINANCE",
"connections": 1,
"color": "-"
}, {
"number": 31,
"name": "Mambu.com",
"group": 1,
"product": "МИКРО-КРЕДИТОВАНИЕ ОНЛАЙН",
"connections": 1,
"color": "-"
}, {
"number": 32,
"name": "mFoundry.com",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 3,
"color": "-"
}, {
"number": 33,
"name": "MotifInvesting.com",
"group": 1,
"product": "СОЦИАЛЬНЫЕ СЕТИ ТРЕЙДЕРОВ",
"connections": 1,
"color": "-"
}, {
"number": 34,
"name": "Moven",
"group": 1,
"product": "PFP",
"connections": 1,
"color": "-"
}, {
"number": 35,
"name": "myWishBoard.com",
"group": 1,
"product": "Wish List",
"connections": 1,
"color": "-"
}, {
"number": 36,
"name": "ondeckcapital.com",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 2,
"color": "-"
}, {
"number": 37,
"name": "paybygroup.com",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 1,
"color": "-"
}, {
"number": 38,
"name": "Payleven",
"group": 1,
"product": "MPOS-ЭКВАЙРИНГ",
"connections": 1,
"color": "-"
}, {
"number": 39,
"name": "PayNearMe",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 3,
"color": "-"
}, {
"number": 40,
"name": "Prosper",
"group": 1,
"product": "P2P-КРЕДИТОВАНИЕ",
"connections": 3,
"color": "-"
}, {
"number": 41,
"name": "Realcrowd.com",
"group": 1,
"product": "КРАУДИНВЕСТИНГ",
"connections": 1,
"color": "-"
}, {
"number": 42,
"name": "Remitly",
"group": 1,
"product": "E-COMMERCE",
"connections": 2,
"color": "-"
}, {
"number": 43,
"name": "Rocketbank",
"group": 1,
"product": "БАНКИ «MOBILE FIRST»",
"connections": 1,
"color": "-"
}, {
"number": 44,
"name": "SaveUp",
"group": 1,
"product": "E-COMMERCE",
"connections": 1,
"color": "-"
}, {
"number": 45,
"name": "Shopify",
"group": 1,
"product": "E-COMMERCE",
"connections": 2,
"color": "-"
}, {
"number": 46,
"name": "Simple",
"group": 1,
"product": "PFP",
"connections": 1,
"color": "-"
}, {
"number": 47,
"name": "Simplee.com",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 1,
"color": "-"
}, {
"number": 48,
"name": "Stripe",
"group": 1,
"product": "E-COMMERCE",
"connections": 3,
"color": "-"
}, {
"number": 49,
"name": "SumUp",
"group": 1,
"product": "MPOS-ЭКВАЙРИНГ",
"connections": 2,
"color": "-"
}, {
"number": 50,
"name": "Suprmasv",
"group": 1,
"product": "-",
"connections": 1,
"color": "-"
}, {
"number": 51,
"name": "TapCanvas.com",
"group": 1,
"product": "СЕРВИСЫ ДЛЯ МАЛОГО И СРЕДНЕГО БИЗНЕСА",
"connections": 1,
"color": "-"
}, {
"number": 52,
"name": "Transferwise",
"group": 1,
"product": "ПЛАТЕЖИ И ПЕРЕВОДЫ",
"connections": 2,
"color": "-"
}, {
"number": 53,
"name": "Trov",
"group": 1,
"product": "-",
"connections": 1,
"color": "-"
}, {
"number": 54,
"name": "Ubank",
"group": 1,
"product": "БАНКИ «MOBILE FIRST»",
"connections": 1,
"color": "-"
}, {
"number": 55,
"name": "Upstart",
"group": 1,
"product": "КРАУДФАНДИНГ",
"connections": 6,
"color": "-"
}, {
"number": 56,
"name": "Vend",
"group": 1,
"product": "E-COMMERCE",
"connections": 1,
"color": "-"
}, {
"number": 57,
"name": "WalletKit.com",
"group": 1,
"product": "E-COMMERCE",
"connections": 1,
"color": "-"
}, {
"number": 58,
"name": "Waveapps.com",
"group": 1,
"product": "СЕРВИСЫ ДЛЯ МАЛОГО И СРЕДНЕГО БИЗНЕСА",
"connections": 1,
"color": "-"
}, {
"number": 59,
"name": "WeFunder.com",
"group": 1,
"product": "КРАУДФАНДИНГ",
"connections": 1,
"color": "-"
}, {
"number": 60,
"name": "WePay",
"group": 1,
"product": "E-COMMERCE",
"connections": 4,
"color": "-"
}, {
"number": 61,
"name": "ZenPayroll",
"group": 1,
"product": "СЕРВИСЫ ДЛЯ МАЛОГО И СРЕДНЕГО БИЗНЕСА",
"connections": 3,
"color": "-"
}],
"investors": [{
"number": 0,
"name": "500 Startups",
"group": 2,
"product": "-",
"connections": 5,
"color": "-"
}, {
"number": 1,
"name": "Accel Partners",
"group": 2,
"product": "-",
"connections": 5,
"color": "-"
}, {
"number": 2,
"name": "American Express",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 3,
"name": "Andreessen Horowitz",
"group": 2,
"product": "-",
"connections": 6,
"color": "-"
}, {
"number": 4,
"name": "Anthemis",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 5,
"name": "August Capital",
"group": 2,
"product": "-",
"connections": 4,
"color": "-"
}, {
"number": 6,
"name": "BBVA Ventures",
"group": 2,
"product": "-",
"connections": 1,
"color": "-"
}, {
"number": 7,
"name": "Draper Fisher Jurvetson (DFJ)",
"group": 2,
"product": "-",
"connections": 4,
"color": "-"
}, {
"number": 8,
"name": "Felicis Ventures",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 9,
"name": "First Round Capital",
"group": 2,
"product": "-",
"connections": 4,
"color": "-"
}, {
"number": 10,
"name": "FirstMark Capital",
"group": 2,
"product": "-",
"connections": 1,
"color": "-"
}, {
"number": 11,
"name": "Founder's Coop",
"group": 2,
"product": "-",
"connections": 1,
"color": "-"
}, {
"number": 12,
"name": "Founders Fund",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 13,
"name": "General Catalyst Partners",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 14,
"name": "Google Ventures",
"group": 2,
"product": "-",
"connections": 7,
"color": "-"
}, {
"number": 15,
"name": "Ignition Partners",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 16,
"name": "Index Ventures",
"group": 2,
"product": "-",
"connections": 6,
"color": "-"
}, {
"number": 17,
"name": "Intel Capital",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 18,
"name": "Intuit",
"group": 2,
"product": "-",
"connections": 2,
"color": "-"
}, {
"number": 19,
"name": "Khosla Ventures",
"group": 2,
"product": "-",
"connections": 4,
"color": "-"
}, {
"number": 20,
"name": "Kleiner Perkins Caufield & Byers",
"group": 2,
"product": "-",
"connections": 5,
"color": "-"
}, {
"number": 21,
"name": "Life.Sreda",
"group": 2,
"product": "-",
"connections": 5,
"color": "-"
}, {
"number": 22,
"name": "New Enterprise Associates",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 23,
"name": "PayPal",
"group": 2,
"product": "-",
"connections": 2,
"color": "-"
}, {
"number": 24,
"name": "Point Nine Capital",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 25,
"name": "QED Investors",
"group": 2,
"product": "-",
"connections": 5,
"color": "-"
}, {
"number": 26,
"name": "Ribbit Capital",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 27,
"name": "Runa Capital",
"group": 2,
"product": "-",
"connections": 2,
"color": "-"
}, {
"number": 28,
"name": "Start Fund",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 29,
"name": "SV Angel",
"group": 2,
"product": "-",
"connections": 8,
"color": "-"
}, {
"number": 30,
"name": "The Social+Capital Partnership",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 31,
"name": "Thomvest Ventures",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 32,
"name": "True Ventures",
"group": 2,
"product": "-",
"connections": 3,
"color": "-"
}, {
"number": 33,
"name": "Union Square Ventures",
"group": 2,
"product": "-",
"connections": 5,
"color": "-"
}, {
"number": 34,
"name": "Y Combinator",
"group": 2,
"product": "-",
"connections": 9,
"color": "-"
}],
"links": [{
"target": 0,
"source": 0,
"value": 1
}, {
"target": 0,
"source": 7,
"value": 1
}, {
"target": 0,
"source": 14,
"value": 1
}, {
"target": 0,
"source": 20,
"value": 1
}, {
"target": 1,
"source": 5,
"value": 1
}, {
"target": 1,
"source": 25,
"value": 1
}, {
"target": 2,
"source": 4,
"value": 1
}, {
"target": 3,
"source": 3,
"value": 1
}, {
"target": 3,
"source": 22,
"value": 1
}, {
"target": 4,
"source": 13,
"value": 1
}, {
"target": 5,
"source": 5,
"value": 1
}, {
"target": 6,
"source": 9,
"value": 1
}, {
"target": 6,
"source": 23,
"value": 1
}, {
"target": 6,
"source": 29,
"value": 1
}, {
"target": 7,
"source": 12,
"value": 1
}, {
"target": 8,
"source": 14,
"value": 1
}, {
"target": 9,
"source": 1,
"value": 1
}, {
"target": 9,
"source": 3,
"value": 1
}, {
"target": 9,
"source": 16,
"value": 1
}, {
"target": 9,
"source": 17,
"value": 1
}, {
"target": 9,
"source": 18,
"value": 1
}, {
"target": 10,
"source": 3,
"value": 1
}, {
"target": 10,
"source": 26,
"value": 1
}, {
"target": 10,
"source": 29,
"value": 1
}, {
"target": 10,
"source": 33,
"value": 1
}, {
"target": 10,
"source": 34,
"value": 1
}, {
"target": 11,
"source": 8,
"value": 1
}, {
"target": 11,
"source": 12,
"value": 1
}, {
"target": 11,
"source": 25,
"value": 1
}, {
"target": 11,
"source": 26,
"value": 1
}, {
"target": 11,
"source": 29,
"value": 1
}, {
"target": 12,
"source": 3,
"value": 1
}, {
"target": 12,
"source": 33,
"value": 1
}, {
"target": 13,
"source": 0,
"value": 1
}, {
"target": 13,
"source": 16,
"value": 1
}, {
"target": 14,
"source": 21,
"value": 1
}, {
"target": 15,
"source": 32,
"value": 1
}, {
"target": 16,
"source": 3,
"value": 1
}, {
"target": 16,
"source": 7,
"value": 1
}, {
"target": 16,
"source": 8,
"value": 1
}, {
"target": 16,
"source": 9,
"value": 1
}, {
"target": 16,
"source": 13,
"value": 1
}, {
"target": 16,
"source": 17,
"value": 1
}, {
"target": 16,
"source": 34,
"value": 1
}, {
"target": 17,
"source": 1,
"value": 1
}, {
"target": 17,
"source": 16,
"value": 1
}, {
"target": 17,
"source": 26,
"value": 1
}, {
"target": 17,
"source": 33,
"value": 1
}, {
"target": 18,
"source": 1,
"value": 1
}, {
"target": 18,
"source": 28,
"value": 1
}, {
"target": 18,
"source": 29,
"value": 1
}, {
"target": 18,
"source": 34,
"value": 1
}, {
"target": 19,
"source": 14,
"value": 1
}, {
"target": 19,
"source": 30,
"value": 1
}, {
"target": 20,
"source": 19,
"value": 1
}, {
"target": 21,
"source": 2,
"value": 1
}, {
"target": 21,
"source": 16,
"value": 1
}, {
"target": 22,
"source": 29,
"value": 1
}, {
"target": 22,
"source": 31,
"value": 1
}, {
"target": 23,
"source": 18,
"value": 1
}, {
"target": 24,
"source": 24,
"value": 1
}, {
"target": 25,
"source": 1,
"value": 1
}, {
"target": 25,
"source": 2,
"value": 1
}, {
"target": 26,
"source": 14,
"value": 1
}, {
"target": 26,
"source": 20,
"value": 1
}, {
"target": 26,
"source": 31,
"value": 1
}, {
"target": 26,
"source": 33,
"value": 1
}, {
"target": 27,
"source": 7,
"value": 1
}, {
"target": 28,
"source": 3,
"value": 1
}, {
"target": 28,
"source": 14,
"value": 1
}, {
"target": 28,
"source": 20,
"value": 1
}, {
"target": 28,
"source": 25,
"value": 1
}, {
"target": 28,
"source": 28,
"value": 1
}, {
"target": 28,
"source": 31,
"value": 1
}, {
"target": 28,
"source": 34,
"value": 1
}, {
"target": 29,
"source": 20,
"value": 1
}, {
"target": 30,
"source": 21,
"value": 1
}, {
"target": 31,
"source": 24,
"value": 1
}, {
"target": 32,
"source": 15,
"value": 1
}, {
"target": 32,
"source": 17,
"value": 1
}, {
"target": 32,
"source": 23,
"value": 1
}, {
"target": 33,
"source": 15,
"value": 1
}, {
"target": 34,
"source": 21,
"value": 1
}, {
"target": 35,
"source": 21,
"value": 1
}, {
"target": 36,
"source": 9,
"value": 1
}, {
"target": 36,
"source": 19,
"value": 1
}, {
"target": 36,
"source": 33,
"value": 1
}, {
"target": 37,
"source": 0,
"value": 1
}, {
"target": 38,
"source": 22,
"value": 1
}, {
"target": 39,
"source": 5,
"value": 1
}, {
"target": 39,
"source": 19,
"value": 1
}, {
"target": 39,
"source": 32,
"value": 1
}, {
"target": 40,
"source": 1,
"value": 1
}, {
"target": 40,
"source": 7,
"value": 1
}, {
"target": 40,
"source": 25,
"value": 1
}, {
"target": 41,
"source": 34,
"value": 1
}, {
"target": 42,
"source": 11,
"value": 1
}, {
"target": 42,
"source": 25,
"value": 1
}, {
"target": 43,
"source": 27,
"value": 1
}, {
"target": 44,
"source": 32,
"value": 1
}, {
"target": 45,
"source": 8,
"value": 1
}, {
"target": 45,
"source": 10,
"value": 1
}, {
"target": 46,
"source": 21,
"value": 1
}, {
"target": 47,
"source": 30,
"value": 1
}, {
"target": 48,
"source": 13,
"value": 1
}, {
"target": 48,
"source": 29,
"value": 1
}, {
"target": 48,
"source": 34,
"value": 1
}, {
"target": 49,
"source": 2,
"value": 1
}, {
"target": 49,
"source": 6,
"value": 1
}, {
"target": 50,
"source": 4,
"value": 1
}, {
"target": 51,
"source": 0,
"value": 1
}, {
"target": 52,
"source": 16,
"value": 1
}, {
"target": 52,
"source": 29,
"value": 1
}, {
"target": 53,
"source": 4,
"value": 1
}, {
"target": 54,
"source": 27,
"value": 1
}, {
"target": 55,
"source": 9,
"value": 1
}, {
"target": 55,
"source": 12,
"value": 1
}, {
"target": 55,
"source": 14,
"value": 1
}, {
"target": 55,
"source": 19,
"value": 1
}, {
"target": 55,
"source": 20,
"value": 1
}, {
"target": 55,
"source": 22,
"value": 1
}, {
"target": 56,
"source": 24,
"value": 1
}, {
"target": 57,
"source": 0,
"value": 1
}, {
"target": 58,
"source": 30,
"value": 1
}, {
"target": 59,
"source": 34,
"value": 1
}, {
"target": 60,
"source": 5,
"value": 1
}, {
"target": 60,
"source": 15,
"value": 1
}, {
"target": 60,
"source": 29,
"value": 1
}, {
"target": 60,
"source": 34,
"value": 1
}, {
"target": 61,
"source": 14,
"value": 1
}, {
"target": 61,
"source": 28,
"value": 1
}, {
"target": 61,
"source": 34,
"value": 1
}]
}
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<style>
body {
background-color: #ffffff;
}
</style>
<script src='http://d3js.org/d3.v3.min.js'></script>
<title>Инвестиции в FinTech-стартапы</title>
</head>
<body>
<div style='text-align: center'>
<span style='font-family: Roboto; font-weight: 100; font-size: 42px'>Инвестиции в FinTech-стартапы</span>
</div>
<div id='chart' align='center'></div>
<script>
Array.prototype.remove = function() {
var what, a = arguments,
L = a.length,
ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var margin = {
top: 200,
right: 20,
bottom: 50,
left: 20
},
width = 1500 - margin.right - margin.left,
height = width * 1.4 - margin.bottom - margin.top;
var companyRectWidth = 120,
companyRectHeight = 20,
companyRectRx = 10,
companyRectRy = 10;
var investorsCirclesPadding = {
right: 200,
left: 200
},
investorsCirclesSquareMultiplier = 300,
companyRectWidthMultiplier = 30,
investorsTextPadding = 40;
var nOfCompanies,
nOfInvestors;
var clickedCompanies = [],
clickedInvestors = [];
d3.json('data.json', function(error, json) {
var svg = d3.select('#chart').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
nOfCompanies = json.companies.length;
nOfInvestors = json.investors.length;
var companiesYScale = d3.scale.linear()
.domain([0, nOfCompanies - 1])
.range([0, height]);
var investorsYScale = d3.scale.linear()
.domain([0, nOfInvestors / 2])
.range([0, height]);
svg.append('text')
.attr('x', investorsCirclesPadding.left)
.attr('y', -100)
.attr('font-family', 'Roboto')
.attr('font-size', '14px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text('Название фонда');
svg.append('text')
.attr('x', width - investorsCirclesPadding.right)
.attr('y', -100)
.attr('font-family', 'Roboto')
.attr('font-size', '14px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text('Название фонда');
svg.append('text')
.attr('x', width / 2)
.attr('y', -100)
.attr('font-family', 'Roboto')
.attr('font-size', '14px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text('Тип продукта');
var link = svg.selectAll('.link')
.data(json.links)
.enter().append('line')
.attr('class', 'link')
.attr('x1', function(d) {
return (d.source < nOfInvestors / 2 ? (width / 2 - companyRectWidth / 2 - json.companies[d.target].connections * companyRectWidthMultiplier / 2) :
(width / 2 + companyRectWidth / 2 + json.companies[d.target].connections * companyRectWidthMultiplier / 2));
})
.attr('y1', function(d) {
return companiesYScale(d.target);
})
.attr('x2', function(d) {
return (d.source < nOfInvestors / 2 ? investorsCirclesPadding.left : (width - investorsCirclesPadding.right));
})
.attr('y2', function(d) {
return (d.source < nOfInvestors / 2 ? investorsYScale(d.source) : investorsYScale(d.source - nOfInvestors / 2));
})
.attr('stroke', function(d) {
if (json.companies[d.target].color === '-') {
return '#000000';
} else {
return json.companies[d.target].color;
}
})
.attr('stroke-width', .2)
.attr('opacity', 1);
var investor = svg.selectAll('.investor')
.data(json.investors)
.enter().append('g')
.attr('class', 'investor')
.attr('opacity', 1)
.attr('transform', function(d, i) {
return 'translate(' + (i < nOfInvestors / 2 ? investorsCirclesPadding.left : (width - investorsCirclesPadding.right)) + ', ' +
(i < nOfInvestors / 2 ? investorsYScale(i) : investorsYScale(i - nOfInvestors / 2)) + ')';
})
.style('cursor', 'pointer')
.on('click', function(d) {
clickedCompanies = [];
if (clickedInvestors.indexOf(d) === -1) {
clickedInvestors.push(d);
fade(d, .1);
} else {
clickedInvestors.remove(d);
if (clickedInvestors.length === 0) {
fade(d, 1);
} else {
fade(d, .1);
}
}
});
investor.append('circle')
.attr('r', function(d) {
return (Math.sqrt(d.connections * investorsCirclesSquareMultiplier / Math.PI));
})
.attr('fill', function(d) {
if (d.color === '-') {
return '#ffffff';
} else {
return d.color;
}
})
.attr('stroke', 'black')
.attr('stroke-width', function(d) {
if (d.color === '-') {
return .2;
} else {
return 0;
}
});
investor.append('text')
.attr('x', function(d, i) {
return (i < nOfInvestors / 2 ? -investorsTextPadding : investorsTextPadding);
})
.attr('font-family', 'Roboto')
.attr('font-size', '12px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', function(d, i) {
return (i < nOfInvestors / 2 ? 'end' : 'start');
})
.attr('fill', 'black')
.text(function(d) {
return d.name;
});
var company = svg.selectAll('.company')
.data(json.companies)
.enter().append('g')
.attr('class', 'company')
.attr('opacity', 1)
.attr('transform', function(d, i) {
return ('translate(' + width / 2 + ',' + companiesYScale(i) + ')');
})
.style('cursor', 'pointer')
.on('click', function(d) {
clickedInvestors = [];
if (clickedCompanies.indexOf(d) === -1) {
clickedCompanies.push(d);
fade(d, .1);
} else {
clickedCompanies.remove(d);
if (clickedCompanies.length === 0) {
fade(d, 1);
} else {
fade(d, .1);
}
}
});
company.append('rect')
.attr('x', function(d) {
return (-companyRectWidth / 2 - d.connections * companyRectWidthMultiplier / 2);
})
.attr('y', -companyRectHeight / 2)
.attr('rx', companyRectRx)
.attr('ry', companyRectRy)
.attr('width', function(d) {
return (companyRectWidth + d.connections * companyRectWidthMultiplier);
})
.attr('height', companyRectHeight)
.attr('fill', function(d) {
if (d.color === '-') {
return '#ffffff';
} else {
return d.color;
}
})
.attr('stroke', 'black')
.attr('stroke-width', function(d) {
if (d.color === '-') {
return .2;
} else {
return 0;
}
});
company.append('text')
.attr('font-family', 'Roboto')
.attr('font-size', '10px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text(function(d) {
return d.name;
});
function neighboring(array, b) {
for (i = 0; i < array.length; i++) {
var isThereLink;
isThereLink = json.links.some(function(d) {
if (b.group === 2) {
return (array[i].number === d.target && d.source === b.number);
} else {
return (array[i].number === d.source && d.target === b.number);
}
});
if (isThereLink)
return true;
}
}
function isThereConnection(array, number) {
for (i = 0; i < array.length; i++) {
if (array[i].number === number)
return true;
}
return false;
}
function fade(g, opacity) {
svg.selectAll('.link')
.transition()
.attr('opacity', function(o) {
if (g.group === 1) {
return (isThereConnection(clickedCompanies, o.target) ? 1 : opacity);
} else {
return (isThereConnection(clickedInvestors, o.source) ? 1 : opacity);
}
});
if (g.group === 1) {
svg.selectAll('.company')
.transition()
.attr('opacity', function(o) {
return (isThereConnection(clickedCompanies, o.number) ? 1 : opacity);
});
svg.selectAll('.investor')
.transition()
.attr('opacity', function(o) {
return (neighboring(clickedCompanies, o) ? 1 : opacity);
});
} else {
svg.selectAll('.investor')
.transition()
.attr('opacity', function(o) {
return (isThereConnection(clickedInvestors, o.number) ? 1 : opacity);
});
svg.selectAll('.company')
.transition()
.attr('opacity', function(o) {
return (neighboring(clickedInvestors, o) ? 1 : opacity);
});
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment