Force Layout with Canvas

readme.json

{"nodes":[{"index":0},{"index":1},{"index":2},{"index":3},{"index":4},{"index":5},{"index":6},{"index":7},{"index":8},{"index":9},{"index":10},{"index":11},{"index":12},{"index":13},{"index":14},{"index":15},{"index":16},{"index":17},{"index":18},{"index":19},{"index":20},{"index":21},{"index":22},{"index":23},{"index":24},{"index":25},{"index":26},{"index":27},{"index":28},{"index":29},{"index":30},{"index":31},{"index":32},{"index":33},{"index":34},{"index":35},{"index":36},{"index":37},{"index":38},{"index":39},{"index":40},{"index":41},{"index":42},{"index":43},{"index":44},{"index":45},{"index":46},{"index":47},{"index":48},{"index":49},{"index":50},{"index":51},{"index":52},{"index":53},{"index":54},{"index":55},{"index":56},{"index":57},{"index":58},{"index":59},{"index":60},{"index":61},{"index":62},{"index":63},{"index":64},{"index":65},{"index":66},{"index":67},{"index":68},{"index":69},{"index":70},{"index":71},{"index":72},{"index":73},{"index":74},{"index":75},{"index":76},{"index":77},{"index":78},{"index":79},{"index":80},{"index":81},{"index":82},{"index":83},{"index":84},{"index":85},{"index":86},{"index":87},{"index":88},{"index":89},{"index":90},{"index":91},{"index":92},{"index":93},{"index":94},{"index":95},{"index":96},{"index":97},{"index":98},{"index":99},{"index":100},{"index":101},{"index":102},{"index":103},{"index":104},{"index":105},{"index":106},{"index":107},{"index":108},{"index":109},{"index":110},{"index":111},{"index":112},{"index":113},{"index":114},{"index":115},{"index":116},{"index":117},{"index":118},{"index":119},{"index":120},{"index":121},{"index":122},{"index":123},{"index":124},{"index":125},{"index":126},{"index":127},{"index":128},{"index":129},{"index":130},{"index":131},{"index":132},{"index":133},{"index":134},{"index":135},{"index":136},{"index":137},{"index":138},{"index":139},{"index":140},{"index":141},{"index":142},{"index":143},{"index":144},{"index":145},{"index":146},{"index":147},{"index":148},{"index":149},{"index":150},{"index":151},{"index":152},{"index":153},{"index":154},{"index":155},{"index":156},{"index":157},{"index":158},{"index":159},{"index":160}],"links":[{"source":{"index":0},"target":{"index":0}},{"source":{"index":1},"target":{"index":0}},{"source":{"index":15},"target":{"index":0}},{"source":{"index":16},"target":{"index":0}},{"source":{"index":17},"target":{"index":0}},{"source":{"index":31},"target":{"index":0}},{"source":{"index":64},"target":{"index":0}},{"source":{"index":65},"target":{"index":0}},{"source":{"index":79},"target":{"index":0}},{"source":{"index":1},"target":{"index":1}},{"source":{"index":2},"target":{"index":1}},{"source":{"index":16},"target":{"index":1}},{"source":{"index":17},"target":{"index":1}},{"source":{"index":18},"target":{"index":1}},{"source":{"index":64},"target":{"index":1}},{"source":{"index":65},"target":{"index":1}},{"source":{"index":66},"target":{"index":1}},{"source":{"index":2},"target":{"index":2}},{"source":{"index":3},"target":{"index":2}},{"source":{"index":17},"target":{"index":2}},{"source":{"index":18},"target":{"index":2}},{"source":{"index":19},"target":{"index":2}},{"source":{"index":65},"target":{"index":2}},{"source":{"index":66},"target":{"index":2}},{"source":{"index":67},"target":{"index":2}},{"source":{"index":3},"target":{"index":3}},{"source":{"index":4},"target":{"index":3}},{"source":{"index":18},"target":{"index":3}},{"source":{"index":19},"target":{"index":3}},{"source":{"index":20},"target":{"index":3}},{"source":{"index":66},"target":{"index":3}},{"source":{"index":67},"target":{"index":3}},{"source":{"index":68},"target":{"index":3}},{"source":{"index":4},"target":{"index":4}},{"source":{"index":5},"target":{"index":4}},{"source":{"index":19},"target":{"index":4}},{"source":{"index":20},"target":{"index":4}},{"source":{"index":21},"target":{"index":4}},{"source":{"index":67},"target":{"index":4}},{"source":{"index":68},"target":{"index":4}},{"source":{"index":69},"target":{"index":4}},{"source":{"index":5},"target":{"index":5}},{"source":{"index":6},"target":{"index":5}},{"source":{"index":20},"target":{"index":5}},{"source":{"index":21},"target":{"index":5}},{"source":{"index":22},"target":{"index":5}},{"source":{"index":68},"target":{"index":5}},{"source":{"index":69},"target":{"index":5}},{"source":{"index":70},"target":{"index":5}},{"source":{"index":6},"target":{"index":6}},{"source":{"index":7},"target":{"index":6}},{"source":{"index":21},"target":{"index":6}},{"source":{"index":22},"target":{"index":6}},{"source":{"index":23},"target":{"index":6}},{"source":{"index":69},"target":{"index":6}},{"source":{"index":70},"target":{"index":6}},{"source":{"index":71},"target":{"index":6}},{"source":{"index":7},"target":{"index":7}},{"source":{"index":8},"target":{"index":7}},{"source":{"index":22},"target":{"index":7}},{"source":{"index":23},"target":{"index":7}},{"source":{"index":24},"target":{"index":7}},{"source":{"index":70},"target":{"index":7}},{"source":{"index":71},"target":{"index":7}},{"source":{"index":72},"target":{"index":7}},{"source":{"index":8},"target":{"index":8}},{"source":{"index":9},"target":{"index":8}},{"source":{"index":23},"target":{"index":8}},{"source":{"index":24},"target":{"index":8}},{"source":{"index":25},"target":{"index":8}},{"source":{"index":71},"target":{"index":8}},{"source":{"index":72},"target":{"index":8}},{"source":{"index":73},"target":{"index":8}},{"source":{"index":9},"target":{"index":9}},{"source":{"index":10},"target":{"index":9}},{"source":{"index":24},"target":{"index":9}},{"source":{"index":25},"target":{"index":9}},{"source":{"index":26},"target":{"index":9}},{"source":{"index":72},"target":{"index":9}},{"source":{"index":73},"target":{"index":9}},{"source":{"index":74},"target":{"index":9}},{"source":{"index":10},"target":{"index":10}},{"source":{"index":11},"target":{"index":10}},{"source":{"index":25},"target":{"index":10}},{"source":{"index":26},"target":{"index":10}},{"source":{"index":27},"target":{"index":10}},{"source":{"index":73},"target":{"index":10}},{"source":{"index":74},"target":{"index":10}},{"source":{"index":75},"target":{"index":10}},{"source":{"index":11},"target":{"index":11}},{"source":{"index":12},"target":{"index":11}},{"source":{"index":26},"target":{"index":11}},{"source":{"index":27},"target":{"index":11}},{"source":{"index":28},"target":{"index":11}},{"source":{"index":74},"target":{"index":11}},{"source":{"index":75},"target":{"index":11}},{"source":{"index":76},"target":{"index":11}},{"source":{"index":12},"target":{"index":12}},{"source":{"index":13},"target":{"index":12}},{"source":{"index":27},"target":{"index":12}},{"source":{"index":28},"target":{"index":12}},{"source":{"index":29},"target":{"index":12}},{"source":{"index":75},"target":{"index":12}},{"source":{"index":76},"target":{"index":12}},{"source":{"index":77},"target":{"index":12}},{"source":{"index":13},"target":{"index":13}},{"source":{"index":14},"target":{"index":13}},{"source":{"index":28},"target":{"index":13}},{"source":{"index":29},"target":{"index":13}},{"source":{"index":30},"target":{"index":13}},{"source":{"index":76},"target":{"index":13}},{"source":{"index":77},"target":{"index":13}},{"source":{"index":78},"target":{"index":13}},{"source":{"index":14},"target":{"index":14}},{"source":{"index":15},"target":{"index":14}},{"source":{"index":29},"target":{"index":14}},{"source":{"index":30},"target":{"index":14}},{"source":{"index":31},"target":{"index":14}},{"source":{"index":77},"target":{"index":14}},{"source":{"index":78},"target":{"index":14}},{"source":{"index":79},"target":{"index":14}},{"source":{"index":15},"target":{"index":15}},{"source":{"index":16},"target":{"index":15}},{"source":{"index":30},"target":{"index":15}},{"source":{"index":31},"target":{"index":15}},{"source":{"index":64},"target":{"index":15}},{"source":{"index":78},"target":{"index":15}},{"source":{"index":79},"target":{"index":15}},{"source":{"index":16},"target":{"index":16}},{"source":{"index":17},"target":{"index":16}},{"source":{"index":31},"target":{"index":16}},{"source":{"index":32},"target":{"index":16}},{"source":{"index":33},"target":{"index":16}},{"source":{"index":47},"target":{"index":16}},{"source":{"index":17},"target":{"index":17}},{"source":{"index":18},"target":{"index":17}},{"source":{"index":32},"target":{"index":17}},{"source":{"index":33},"target":{"index":17}},{"source":{"index":34},"target":{"index":17}},{"source":{"index":18},"target":{"index":18}},{"source":{"index":19},"target":{"index":18}},{"source":{"index":33},"target":{"index":18}},{"source":{"index":34},"target":{"index":18}},{"source":{"index":35},"target":{"index":18}},{"source":{"index":19},"target":{"index":19}},{"source":{"index":20},"target":{"index":19}},{"source":{"index":34},"target":{"index":19}},{"source":{"index":35},"target":{"index":19}},{"source":{"index":36},"target":{"index":19}},{"source":{"index":20},"target":{"index":20}},{"source":{"index":21},"target":{"index":20}},{"source":{"index":35},"target":{"index":20}},{"source":{"index":36},"target":{"index":20}},{"source":{"index":37},"target":{"index":20}},{"source":{"index":21},"target":{"index":21}},{"source":{"index":22},"target":{"index":21}},{"source":{"index":36},"target":{"index":21}},{"source":{"index":37},"target":{"index":21}},{"source":{"index":38},"target":{"index":21}},{"source":{"index":22},"target":{"index":22}},{"source":{"index":23},"target":{"index":22}},{"source":{"index":37},"target":{"index":22}},{"source":{"index":38},"target":{"index":22}},{"source":{"index":39},"target":{"index":22}},{"source":{"index":23},"target":{"index":23}},{"source":{"index":24},"target":{"index":23}},{"source":{"index":38},"target":{"index":23}},{"source":{"index":39},"target":{"index":23}},{"source":{"index":40},"target":{"index":23}},{"source":{"index":24},"target":{"index":24}},{"source":{"index":25},"target":{"index":24}},{"source":{"index":39},"target":{"index":24}},{"source":{"index":40},"target":{"index":24}},{"source":{"index":41},"target":{"index":24}},{"source":{"index":25},"target":{"index":25}},{"source":{"index":26},"target":{"index":25}},{"source":{"index":40},"target":{"index":25}},{"source":{"index":41},"target":{"index":25}},{"source":{"index":42},"target":{"index":25}},{"source":{"index":26},"target":{"index":26}},{"source":{"index":27},"target":{"index":26}},{"source":{"index":41},"target":{"index":26}},{"source":{"index":42},"target":{"index":26}},{"source":{"index":43},"target":{"index":26}},{"source":{"index":27},"target":{"index":27}},{"source":{"index":28},"target":{"index":27}},{"source":{"index":42},"target":{"index":27}},{"source":{"index":43},"target":{"index":27}},{"source":{"index":44},"target":{"index":27}},{"source":{"index":28},"target":{"index":28}},{"source":{"index":29},"target":{"index":28}},{"source":{"index":43},"target":{"index":28}},{"source":{"index":44},"target":{"index":28}},{"source":{"index":45},"target":{"index":28}},{"source":{"index":29},"target":{"index":29}},{"source":{"index":30},"target":{"index":29}},{"source":{"index":44},"target":{"index":29}},{"source":{"index":45},"target":{"index":29}},{"source":{"index":46},"target":{"index":29}},{"source":{"index":30},"target":{"index":30}},{"source":{"index":31},"target":{"index":30}},{"source":{"index":45},"target":{"index":30}},{"source":{"index":46},"target":{"index":30}},{"source":{"index":47},"target":{"index":30}},{"source":{"index":31},"target":{"index":31}},{"source":{"index":32},"target":{"index":31}},{"source":{"index":46},"target":{"index":31}},{"source":{"index":47},"target":{"index":31}},{"source":{"index":32},"target":{"index":32}},{"source":{"index":33},"target":{"index":32}},{"source":{"index":47},"target":{"index":32}},{"source":{"index":48},"target":{"index":32}},{"source":{"index":49},"target":{"index":32}},{"source":{"index":63},"target":{"index":32}},{"source":{"index":33},"target":{"index":33}},{"source":{"index":34},"target":{"index":33}},{"source":{"index":48},"target":{"index":33}},{"source":{"index":49},"target":{"index":33}},{"source":{"index":50},"target":{"index":33}},{"source":{"index":34},"target":{"index":34}},{"source":{"index":35},"target":{"index":34}},{"source":{"index":49},"target":{"index":34}},{"source":{"index":50},"target":{"index":34}},{"source":{"index":51},"target":{"index":34}},{"source":{"index":35},"target":{"index":35}},{"source":{"index":36},"target":{"index":35}},{"source":{"index":50},"target":{"index":35}},{"source":{"index":51},"target":{"index":35}},{"source":{"index":52},"target":{"index":35}},{"source":{"index":36},"target":{"index":36}},{"source":{"index":37},"target":{"index":36}},{"source":{"index":51},"target":{"index":36}},{"source":{"index":52},"target":{"index":36}},{"source":{"index":53},"target":{"index":36}},{"source":{"index":37},"target":{"index":37}},{"source":{"index":38},"target":{"index":37}},{"source":{"index":52},"target":{"index":37}},{"source":{"index":53},"target":{"index":37}},{"source":{"index":54},"target":{"index":37}},{"source":{"index":38},"target":{"index":38}},{"source":{"index":39},"target":{"index":38}},{"source":{"index":53},"target":{"index":38}},{"source":{"index":54},"target":{"index":38}},{"source":{"index":55},"target":{"index":38}},{"source":{"index":39},"target":{"index":39}},{"source":{"index":40},"target":{"index":39}},{"source":{"index":54},"target":{"index":39}},{"source":{"index":55},"target":{"index":39}},{"source":{"index":56},"target":{"index":39}},{"source":{"index":40},"target":{"index":40}},{"source":{"index":41},"target":{"index":40}},{"source":{"index":55},"target":{"index":40}},{"source":{"index":56},"target":{"index":40}},{"source":{"index":57},"target":{"index":40}},{"source":{"index":41},"target":{"index":41}},{"source":{"index":42},"target":{"index":41}},{"source":{"index":56},"target":{"index":41}},{"source":{"index":57},"target":{"index":41}},{"source":{"index":58},"target":{"index":41}},{"source":{"index":42},"target":{"index":42}},{"source":{"index":43},"target":{"index":42}},{"source":{"index":57},"target":{"index":42}},{"source":{"index":58},"target":{"index":42}},{"source":{"index":59},"target":{"index":42}},{"source":{"index":43},"target":{"index":43}},{"source":{"index":44},"target":{"index":43}},{"source":{"index":58},"target":{"index":43}},{"source":{"index":59},"target":{"index":43}},{"source":{"index":60},"target":{"index":43}},{"source":{"index":44},"target":{"index":44}},{"source":{"index":45},"target":{"index":44}},{"source":{"index":59},"target":{"index":44}},{"source":{"index":60},"target":{"index":44}},{"source":{"index":61},"target":{"index":44}},{"source":{"index":45},"target":{"index":45}},{"source":{"index":46},"target":{"index":45}},{"source":{"index":60},"target":{"index":45}},{"source":{"index":61},"target":{"index":45}},{"source":{"index":62},"target":{"index":45}},{"source":{"index":46},"target":{"index":46}},{"source":{"index":47},"target":{"index":46}},{"source":{"index":61},"target":{"index":46}},{"source":{"index":62},"target":{"index":46}},{"source":{"index":63},"target":{"index":46}},{"source":{"index":47},"target":{"index":47}},{"source":{"index":48},"target":{"index":47}},{"source":{"index":62},"target":{"index":47}},{"source":{"index":63},"target":{"index":47}},{"source":{"index":48},"target":{"index":48}},{"source":{"index":49},"target":{"index":48}},{"source":{"index":63},"target":{"index":48}},{"source":{"index":49},"target":{"index":49}},{"source":{"index":50},"target":{"index":49}},{"source":{"index":50},"target":{"index":50}},{"source":{"index":51},"target":{"index":50}},{"source":{"index":51},"target":{"index":51}},{"source":{"index":52},"target":{"index":51}},{"source":{"index":52},"target":{"index":52}},{"source":{"index":53},"target":{"index":52}},{"source":{"index":53},"target":{"index":53}},{"source":{"index":54},"target":{"index":53}},{"source":{"index":54},"target":{"index":54}},{"source":{"index":55},"target":{"index":54}},{"source":{"index":55},"target":{"index":55}},{"source":{"index":56},"target":{"index":55}},{"source":{"index":56},"target":{"index":56}},{"source":{"index":57},"target":{"index":56}},{"source":{"index":57},"target":{"index":57}},{"source":{"index":58},"target":{"index":57}},{"source":{"index":58},"target":{"index":58}},{"source":{"index":59},"target":{"index":58}},{"source":{"index":59},"target":{"index":59}},{"source":{"index":60},"target":{"index":59}},{"source":{"index":60},"target":{"index":60}},{"source":{"index":61},"target":{"index":60}},{"source":{"index":61},"target":{"index":61}},{"source":{"index":62},"target":{"index":61}},{"source":{"index":62},"target":{"index":62}},{"source":{"index":63},"target":{"index":62}},{"source":{"index":63},"target":{"index":63}},{"source":{"index":64},"target":{"index":64}},{"source":{"index":65},"target":{"index":64}},{"source":{"index":79},"target":{"index":64}},{"source":{"index":80},"target":{"index":64}},{"source":{"index":81},"target":{"index":64}},{"source":{"index":95},"target":{"index":64}},{"source":{"index":65},"target":{"index":65}},{"source":{"index":66},"target":{"index":65}},{"source":{"index":80},"target":{"index":65}},{"source":{"index":81},"target":{"index":65}},{"source":{"index":82},"target":{"index":65}},{"source":{"index":66},"target":{"index":66}},{"source":{"index":67},"target":{"index":66}},{"source":{"index":81},"target":{"index":66}},{"source":{"index":82},"target":{"index":66}},{"source":{"index":83},"target":{"index":66}},{"source":{"index":67},"target":{"index":67}},{"source":{"index":68},"target":{"index":67}},{"source":{"index":82},"target":{"index":67}},{"source":{"index":83},"target":{"index":67}},{"source":{"index":84},"target":{"index":67}},{"source":{"index":68},"target":{"index":68}},{"source":{"index":69},"target":{"index":68}},{"source":{"index":83},"target":{"index":68}},{"source":{"index":84},"target":{"index":68}},{"source":{"index":85},"target":{"index":68}},{"source":{"index":69},"target":{"index":69}},{"source":{"index":70},"target":{"index":69}},{"source":{"index":84},"target":{"index":69}},{"source":{"index":85},"target":{"index":69}},{"source":{"index":86},"target":{"index":69}},{"source":{"index":70},"target":{"index":70}},{"source":{"index":71},"target":{"index":70}},{"source":{"index":85},"target":{"index":70}},{"source":{"index":86},"target":{"index":70}},{"source":{"index":87},"target":{"index":70}},{"source":{"index":71},"target":{"index":71}},{"source":{"index":72},"target":{"index":71}},{"source":{"index":86},"target":{"index":71}},{"source":{"index":87},"target":{"index":71}},{"source":{"index":88},"target":{"index":71}},{"source":{"index":72},"target":{"index":72}},{"source":{"index":73},"target":{"index":72}},{"source":{"index":87},"target":{"index":72}},{"source":{"index":88},"target":{"index":72}},{"source":{"index":89},"target":{"index":72}},{"source":{"index":73},"target":{"index":73}},{"source":{"index":74},"target":{"index":73}},{"source":{"index":88},"target":{"index":73}},{"source":{"index":89},"target":{"index":73}},{"source":{"index":90},"target":{"index":73}},{"source":{"index":74},"target":{"index":74}},{"source":{"index":75},"target":{"index":74}},{"source":{"index":89},"target":{"index":74}},{"source":{"index":90},"target":{"index":74}},{"source":{"index":91},"target":{"index":74}},{"source":{"index":75},"target":{"index":75}},{"source":{"index":76},"target":{"index":75}},{"source":{"index":90},"target":{"index":75}},{"source":{"index":91},"target":{"index":75}},{"source":{"index":92},"target":{"index":75}},{"source":{"index":76},"target":{"index":76}},{"source":{"index":77},"target":{"index":76}},{"source":{"index":91},"target":{"index":76}},{"source":{"index":92},"target":{"index":76}},{"source":{"index":93},"target":{"index":76}},{"source":{"index":77},"target":{"index":77}},{"source":{"index":78},"target":{"index":77}},{"source":{"index":92},"target":{"index":77}},{"source":{"index":93},"target":{"index":77}},{"source":{"index":94},"target":{"index":77}},{"source":{"index":78},"target":{"index":78}},{"source":{"index":79},"target":{"index":78}},{"source":{"index":93},"target":{"index":78}},{"source":{"index":94},"target":{"index":78}},{"source":{"index":95},"target":{"index":78}},{"source":{"index":79},"target":{"index":79}},{"source":{"index":80},"target":{"index":79}},{"source":{"index":94},"target":{"index":79}},{"source":{"index":95},"target":{"index":79}},{"source":{"index":80},"target":{"index":80}},{"source":{"index":81},"target":{"index":80}},{"source":{"index":95},"target":{"index":80}},{"source":{"index":96},"target":{"index":80}},{"source":{"index":97},"target":{"index":80}},{"source":{"index":111},"target":{"index":80}},{"source":{"index":81},"target":{"index":81}},{"source":{"index":82},"target":{"index":81}},{"source":{"index":96},"target":{"index":81}},{"source":{"index":97},"target":{"index":81}},{"source":{"index":98},"target":{"index":81}},{"source":{"index":82},"target":{"index":82}},{"source":{"index":83},"target":{"index":82}},{"source":{"index":97},"target":{"index":82}},{"source":{"index":98},"target":{"index":82}},{"source":{"index":99},"target":{"index":82}},{"source":{"index":83},"target":{"index":83}},{"source":{"index":84},"target":{"index":83}},{"source":{"index":98},"target":{"index":83}},{"source":{"index":99},"target":{"index":83}},{"source":{"index":100},"target":{"index":83}},{"source":{"index":84},"target":{"index":84}},{"source":{"index":85},"target":{"index":84}},{"source":{"index":99},"target":{"index":84}},{"source":{"index":100},"target":{"index":84}},{"source":{"index":101},"target":{"index":84}},{"source":{"index":85},"target":{"index":85}},{"source":{"index":86},"target":{"index":85}},{"source":{"index":100},"target":{"index":85}},{"source":{"index":101},"target":{"index":85}},{"source":{"index":102},"target":{"index":85}},{"source":{"index":86},"target":{"index":86}},{"source":{"index":87},"target":{"index":86}},{"source":{"index":101},"target":{"index":86}},{"source":{"index":102},"target":{"index":86}},{"source":{"index":103},"target":{"index":86}},{"source":{"index":87},"target":{"index":87}},{"source":{"index":88},"target":{"index":87}},{"source":{"index":102},"target":{"index":87}},{"source":{"index":103},"target":{"index":87}},{"source":{"index":104},"target":{"index":87}},{"source":{"index":88},"target":{"index":88}},{"source":{"index":89},"target":{"index":88}},{"source":{"index":103},"target":{"index":88}},{"source":{"index":104},"target":{"index":88}},{"source":{"index":105},"target":{"index":88}},{"source":{"index":89},"target":{"index":89}},{"source":{"index":90},"target":{"index":89}},{"source":{"index":104},"target":{"index":89}},{"source":{"index":105},"target":{"index":89}},{"source":{"index":106},"target":{"index":89}},{"source":{"index":90},"target":{"index":90}},{"source":{"index":91},"target":{"index":90}},{"source":{"index":105},"target":{"index":90}},{"source":{"index":106},"target":{"index":90}},{"source":{"index":107},"target":{"index":90}},{"source":{"index":91},"target":{"index":91}},{"source":{"index":92},"target":{"index":91}},{"source":{"index":106},"target":{"index":91}},{"source":{"index":107},"target":{"index":91}},{"source":{"index":108},"target":{"index":91}},{"source":{"index":92},"target":{"index":92}},{"source":{"index":93},"target":{"index":92}},{"source":{"index":107},"target":{"index":92}},{"source":{"index":108},"target":{"index":92}},{"source":{"index":109},"target":{"index":92}},{"source":{"index":93},"target":{"index":93}},{"source":{"index":94},"target":{"index":93}},{"source":{"index":108},"target":{"index":93}},{"source":{"index":109},"target":{"index":93}},{"source":{"index":110},"target":{"index":93}},{"source":{"index":94},"target":{"index":94}},{"source":{"index":95},"target":{"index":94}},{"source":{"index":109},"target":{"index":94}},{"source":{"index":110},"target":{"index":94}},{"source":{"index":111},"target":{"index":94}},{"source":{"index":95},"target":{"index":95}},{"source":{"index":96},"target":{"index":95}},{"source":{"index":110},"target":{"index":95}},{"source":{"index":111},"target":{"index":95}},{"source":{"index":96},"target":{"index":96}},{"source":{"index":97},"target":{"index":96}},{"source":{"index":111},"target":{"index":96}},{"source":{"index":112},"target":{"index":96}},{"source":{"index":113},"target":{"index":96}},{"source":{"index":127},"target":{"index":96}},{"source":{"index":97},"target":{"index":97}},{"source":{"index":98},"target":{"index":97}},{"source":{"index":112},"target":{"index":97}},{"source":{"index":113},"target":{"index":97}},{"source":{"index":114},"target":{"index":97}},{"source":{"index":98},"target":{"index":98}},{"source":{"index":99},"target":{"index":98}},{"source":{"index":113},"target":{"index":98}},{"source":{"index":114},"target":{"index":98}},{"source":{"index":115},"target":{"index":98}},{"source":{"index":99},"target":{"index":99}},{"source":{"index":100},"target":{"index":99}},{"source":{"index":114},"target":{"index":99}},{"source":{"index":115},"target":{"index":99}},{"source":{"index":116},"target":{"index":99}},{"source":{"index":100},"target":{"index":100}},{"source":{"index":101},"target":{"index":100}},{"source":{"index":115},"target":{"index":100}},{"source":{"index":116},"target":{"index":100}},{"source":{"index":117},"target":{"index":100}},{"source":{"index":101},"target":{"index":101}},{"source":{"index":102},"target":{"index":101}},{"source":{"index":116},"target":{"index":101}},{"source":{"index":117},"target":{"index":101}},{"source":{"index":118},"target":{"index":101}},{"source":{"index":102},"target":{"index":102}},{"source":{"index":103},"target":{"index":102}},{"source":{"index":117},"target":{"index":102}},{"source":{"index":118},"target":{"index":102}},{"source":{"index":119},"target":{"index":102}},{"source":{"index":103},"target":{"index":103}},{"source":{"index":104},"target":{"index":103}},{"source":{"index":118},"target":{"index":103}},{"source":{"index":119},"target":{"index":103}},{"source":{"index":120},"target":{"index":103}},{"source":{"index":104},"target":{"index":104}},{"source":{"index":105},"target":{"index":104}},{"source":{"index":119},"target":{"index":104}},{"source":{"index":120},"target":{"index":104}},{"source":{"index":121},"target":{"index":104}},{"source":{"index":105},"target":{"index":105}},{"source":{"index":106},"target":{"index":105}},{"source":{"index":120},"target":{"index":105}},{"source":{"index":121},"target":{"index":105}},{"source":{"index":122},"target":{"index":105}},{"source":{"index":106},"target":{"index":106}},{"source":{"index":107},"target":{"index":106}},{"source":{"index":121},"target":{"index":106}},{"source":{"index":122},"target":{"index":106}},{"source":{"index":123},"target":{"index":106}},{"source":{"index":107},"target":{"index":107}},{"source":{"index":108},"target":{"index":107}},{"source":{"index":122},"target":{"index":107}},{"source":{"index":123},"target":{"index":107}},{"source":{"index":124},"target":{"index":107}},{"source":{"index":108},"target":{"index":108}},{"source":{"index":109},"target":{"index":108}},{"source":{"index":123},"target":{"index":108}},{"source":{"index":124},"target":{"index":108}},{"source":{"index":125},"target":{"index":108}},{"source":{"index":109},"target":{"index":109}},{"source":{"index":110},"target":{"index":109}},{"source":{"index":124},"target":{"index":109}},{"source":{"index":125},"target":{"index":109}},{"source":{"index":126},"target":{"index":109}},{"source":{"index":110},"target":{"index":110}},{"source":{"index":111},"target":{"index":110}},{"source":{"index":125},"target":{"index":110}},{"source":{"index":126},"target":{"index":110}},{"source":{"index":127},"target":{"index":110}},{"source":{"index":111},"target":{"index":111}},{"source":{"index":112},"target":{"index":111}},{"source":{"index":126},"target":{"index":111}},{"source":{"index":127},"target":{"index":111}},{"source":{"index":112},"target":{"index":112}},{"source":{"index":113},"target":{"index":112}},{"source":{"index":127},"target":{"index":112}},{"source":{"index":128},"target":{"index":112}},{"source":{"index":129},"target":{"index":112}},{"source":{"index":143},"target":{"index":112}},{"source":{"index":113},"target":{"index":113}},{"source":{"index":114},"target":{"index":113}},{"source":{"index":128},"target":{"index":113}},{"source":{"index":129},"target":{"index":113}},{"source":{"index":130},"target":{"index":113}},{"source":{"index":114},"target":{"index":114}},{"source":{"index":115},"target":{"index":114}},{"source":{"index":129},"target":{"index":114}},{"source":{"index":130},"target":{"index":114}},{"source":{"index":131},"target":{"index":114}},{"source":{"index":115},"target":{"index":115}},{"source":{"index":116},"target":{"index":115}},{"source":{"index":130},"target":{"index":115}},{"source":{"index":131},"target":{"index":115}},{"source":{"index":132},"target":{"index":115}},{"source":{"index":116},"target":{"index":116}},{"source":{"index":117},"target":{"index":116}},{"source":{"index":131},"target":{"index":116}},{"source":{"index":132},"target":{"index":116}},{"source":{"index":133},"target":{"index":116}},{"source":{"index":117},"target":{"index":117}},{"source":{"index":118},"target":{"index":117}},{"source":{"index":132},"target":{"index":117}},{"source":{"index":133},"target":{"index":117}},{"source":{"index":134},"target":{"index":117}},{"source":{"index":118},"target":{"index":118}},{"source":{"index":119},"target":{"index":118}},{"source":{"index":133},"target":{"index":118}},{"source":{"index":134},"target":{"index":118}},{"source":{"index":135},"target":{"index":118}},{"source":{"index":119},"target":{"index":119}},{"source":{"index":120},"target":{"index":119}},{"source":{"index":134},"target":{"index":119}},{"source":{"index":135},"target":{"index":119}},{"source":{"index":136},"target":{"index":119}},{"source":{"index":120},"target":{"index":120}},{"source":{"index":121},"target":{"index":120}},{"source":{"index":135},"target":{"index":120}},{"source":{"index":136},"target":{"index":120}},{"source":{"index":137},"target":{"index":120}},{"source":{"index":121},"target":{"index":121}},{"source":{"index":122},"target":{"index":121}},{"source":{"index":136},"target":{"index":121}},{"source":{"index":137},"target":{"index":121}},{"source":{"index":138},"target":{"index":121}},{"source":{"index":122},"target":{"index":122}},{"source":{"index":123},"target":{"index":122}},{"source":{"index":137},"target":{"index":122}},{"source":{"index":138},"target":{"index":122}},{"source":{"index":139},"target":{"index":122}},{"source":{"index":123},"target":{"index":123}},{"source":{"index":124},"target":{"index":123}},{"source":{"index":138},"target":{"index":123}},{"source":{"index":139},"target":{"index":123}},{"source":{"index":140},"target":{"index":123}},{"source":{"index":124},"target":{"index":124}},{"source":{"index":125},"target":{"index":124}},{"source":{"index":139},"target":{"index":124}},{"source":{"index":140},"target":{"index":124}},{"source":{"index":141},"target":{"index":124}},{"source":{"index":125},"target":{"index":125}},{"source":{"index":126},"target":{"index":125}},{"source":{"index":140},"target":{"index":125}},{"source":{"index":141},"target":{"index":125}},{"source":{"index":142},"target":{"index":125}},{"source":{"index":126},"target":{"index":126}},{"source":{"index":127},"target":{"index":126}},{"source":{"index":141},"target":{"index":126}},{"source":{"index":142},"target":{"index":126}},{"source":{"index":143},"target":{"index":126}},{"source":{"index":127},"target":{"index":127}},{"source":{"index":128},"target":{"index":127}},{"source":{"index":142},"target":{"index":127}},{"source":{"index":143},"target":{"index":127}},{"source":{"index":128},"target":{"index":128}},{"source":{"index":129},"target":{"index":128}},{"source":{"index":143},"target":{"index":128}},{"source":{"index":144},"target":{"index":128}},{"source":{"index":145},"target":{"index":128}},{"source":{"index":159},"target":{"index":128}},{"source":{"index":129},"target":{"index":129}},{"source":{"index":130},"target":{"index":129}},{"source":{"index":144},"target":{"index":129}},{"source":{"index":145},"target":{"index":129}},{"source":{"index":146},"target":{"index":129}},{"source":{"index":130},"target":{"index":130}},{"source":{"index":131},"target":{"index":130}},{"source":{"index":145},"target":{"index":130}},{"source":{"index":146},"target":{"index":130}},{"source":{"index":147},"target":{"index":130}},{"source":{"index":131},"target":{"index":131}},{"source":{"index":132},"target":{"index":131}},{"source":{"index":146},"target":{"index":131}},{"source":{"index":147},"target":{"index":131}},{"source":{"index":148},"target":{"index":131}},{"source":{"index":132},"target":{"index":132}},{"source":{"index":133},"target":{"index":132}},{"source":{"index":147},"target":{"index":132}},{"source":{"index":148},"target":{"index":132}},{"source":{"index":149},"target":{"index":132}},{"source":{"index":133},"target":{"index":133}},{"source":{"index":134},"target":{"index":133}},{"source":{"index":148},"target":{"index":133}},{"source":{"index":149},"target":{"index":133}},{"source":{"index":150},"target":{"index":133}},{"source":{"index":134},"target":{"index":134}},{"source":{"index":135},"target":{"index":134}},{"source":{"index":149},"target":{"index":134}},{"source":{"index":150},"target":{"index":134}},{"source":{"index":151},"target":{"index":134}},{"source":{"index":135},"target":{"index":135}},{"source":{"index":136},"target":{"index":135}},{"source":{"index":150},"target":{"index":135}},{"source":{"index":151},"target":{"index":135}},{"source":{"index":152},"target":{"index":135}},{"source":{"index":136},"target":{"index":136}},{"source":{"index":137},"target":{"index":136}},{"source":{"index":151},"target":{"index":136}},{"source":{"index":152},"target":{"index":136}},{"source":{"index":153},"target":{"index":136}},{"source":{"index":137},"target":{"index":137}},{"source":{"index":138},"target":{"index":137}},{"source":{"index":152},"target":{"index":137}},{"source":{"index":153},"target":{"index":137}},{"source":{"index":154},"target":{"index":137}},{"source":{"index":138},"target":{"index":138}},{"source":{"index":139},"target":{"index":138}},{"source":{"index":153},"target":{"index":138}},{"source":{"index":154},"target":{"index":138}},{"source":{"index":155},"target":{"index":138}},{"source":{"index":139},"target":{"index":139}},{"source":{"index":140},"target":{"index":139}},{"source":{"index":154},"target":{"index":139}},{"source":{"index":155},"target":{"index":139}},{"source":{"index":156},"target":{"index":139}},{"source":{"index":140},"target":{"index":140}},{"source":{"index":141},"target":{"index":140}},{"source":{"index":155},"target":{"index":140}},{"source":{"index":156},"target":{"index":140}},{"source":{"index":157},"target":{"index":140}},{"source":{"index":141},"target":{"index":141}},{"source":{"index":142},"target":{"index":141}},{"source":{"index":156},"target":{"index":141}},{"source":{"index":157},"target":{"index":141}},{"source":{"index":158},"target":{"index":141}},{"source":{"index":142},"target":{"index":142}},{"source":{"index":143},"target":{"index":142}},{"source":{"index":157},"target":{"index":142}},{"source":{"index":158},"target":{"index":142}},{"source":{"index":159},"target":{"index":142}},{"source":{"index":143},"target":{"index":143}},{"source":{"index":144},"target":{"index":143}},{"source":{"index":158},"target":{"index":143}},{"source":{"index":159},"target":{"index":143}},{"source":{"index":144},"target":{"index":144}},{"source":{"index":145},"target":{"index":144}},{"source":{"index":159},"target":{"index":144}},{"source":{"index":160},"target":{"index":144}},{"source":{"index":145},"target":{"index":145}},{"source":{"index":146},"target":{"index":145}},{"source":{"index":160},"target":{"index":145}},{"source":{"index":146},"target":{"index":146}},{"source":{"index":147},"target":{"index":146}},{"source":{"index":160},"target":{"index":146}},{"source":{"index":147},"target":{"index":147}},{"source":{"index":148},"target":{"index":147}},{"source":{"index":160},"target":{"index":147}},{"source":{"index":148},"target":{"index":148}},{"source":{"index":149},"target":{"index":148}},{"source":{"index":160},"target":{"index":148}},{"source":{"index":149},"target":{"index":149}},{"source":{"index":150},"target":{"index":149}},{"source":{"index":160},"target":{"index":149}},{"source":{"index":150},"target":{"index":150}},{"source":{"index":151},"target":{"index":150}},{"source":{"index":160},"target":{"index":150}},{"source":{"index":151},"target":{"index":151}},{"source":{"index":152},"target":{"index":151}},{"source":{"index":160},"target":{"index":151}},{"source":{"index":152},"target":{"index":152}},{"source":{"index":153},"target":{"index":152}},{"source":{"index":160},"target":{"index":152}},{"source":{"index":153},"target":{"index":153}},{"source":{"index":154},"target":{"index":153}},{"source":{"index":160},"target":{"index":153}},{"source":{"index":154},"target":{"index":154}},{"source":{"index":155},"target":{"index":154}},{"source":{"index":160},"target":{"index":154}},{"source":{"index":155},"target":{"index":155}},{"source":{"index":156},"target":{"index":155}},{"source":{"index":160},"target":{"index":155}},{"source":{"index":156},"target":{"index":156}},{"source":{"index":157},"target":{"index":156}},{"source":{"index":160},"target":{"index":156}},{"source":{"index":157},"target":{"index":157}},{"source":{"index":158},"target":{"index":157}},{"source":{"index":160},"target":{"index":157}},{"source":{"index":158},"target":{"index":158}},{"source":{"index":159},"target":{"index":158}},{"source":{"index":160},"target":{"index":158}},{"source":{"index":159},"target":{"index":159}},{"source":{"index":160},"target":{"index":159}},{"source":{"index":160},"target":{"index":160}}]}

README.md

This example demonstrates rendering a D3 force-directed graph using Canvas rather than SVG. The performance is slightly better than SVG, but unlike the SVG version, the nodes in this one are not draggable.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
<script>

var width = 960,
    height = 500;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .size([width, height]);

d3.json("readme.json", function(graph) {
  var context = canvas.node().getContext("2d");

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();

  function tick() {
    context.clearRect(0, 0, width, height);

    // draw links
    context.strokeStyle = "#ccc";
    context.beginPath();
    graph.links.forEach(function(d) {
      context.moveTo(d.source.x, d.source.y);
      context.lineTo(d.target.x, d.target.y);
    });
    context.stroke();

    // draw nodes
    context.fillStyle = "steelblue";
    context.beginPath();
    graph.nodes.forEach(function(d) {
      context.arc(d.x, d.y, 4.5, 0, 2 * Math.PI);
    });
    context.fill();
  }
});

</script>

This is awesome Mike. I am looking for one to my current force layout (SVG based has poor performance in FF). But how to make the nodes clickable & drag able.

Thanks.

You can combine sigma.js (to draw the graph and canvas events) and d3js to do the layout