Is it possible to create a Chord Diagram chart using the D3 library?

Asked

Viewed 58 times

1

It is possible to create a chart in Chord using the library d3?

Follows graph data structure in format JSON:

    {"links": [
    {
        "id": "11",
        "color": "#d96500\r\n\r\n",
        "source": "Norte ",
        "target": "Norte",
        "id2": "11",
        "value": "110042",
        "total": "112827",
        "percentagem": "97.53"
    },
    {
        "id": "11",
        "color": "#bdb66c\r\n",
        "source": "Norte ",
        "target": "Algarve",
        "id2": "15",
        "value": "148",
        "total": "112827",
        "percentagem": "0.13"
    },
    {
        "id": "11",
        "color": "#bdaf57\r\n",
        "source": "Norte ",
        "target": "Centro",
        "id2": "16",
        "value": "1533",
        "total": "112827",
        "percentagem": "1.36"
    },
    {
        "id": "11",
        "color": "#fffbc4\r\n",
        "source": "Norte ",
        "target": "Lisboa",
        "id2": "17",
        "value": "810",
        "total": "112827",
        "percentagem": "0.72"
    },
    {
        "id": "11",
        "color": "#f5b367",
        "source": "Norte ",
        "target": "Alentejo",
        "id2": "18",
        "value": "180",
        "total": "112827",
        "percentagem": "0.16"
    },
    {
        "id": "11",
        "color": "#f5b367\r\n",
        "source": "Norte ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "66",
        "total": "112827",
        "percentagem": "0.06"
    },
    {
        "id": "11",
        "color": "#decf00\r\n",
        "source": "Norte ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "48",
        "total": "112827",
        "percentagem": "0.04"
    },
    {
        "id": "15",
        "color": "#d96500\r\n\r\n",
        "source": "Algarve ",
        "target": "Norte",
        "id2": "11",
        "value": "37",
        "total": "11633",
        "percentagem": "0.32"
    },
    {
        "id": "15",
        "color": "#bdb66c\r\n",
        "source": "Algarve ",
        "target": "Algarve",
        "id2": "15",
        "value": "11202",
        "total": "11633",
        "percentagem": "96.30"
    },
    {
        "id": "15",
        "color": "#bdaf57\r\n",
        "source": "Algarve ",
        "target": "Centro",
        "id2": "16",
        "value": "53",
        "total": "11633",
        "percentagem": "0.46"
    },
    {
        "id": "15",
        "color": "#fffbc4\r\n",
        "source": "Algarve ",
        "target": "Lisboa",
        "id2": "17",
        "value": "240",
        "total": "11633",
        "percentagem": "2.06"
    },
    {
        "id": "15",
        "color": "#f5b367",
        "source": "Algarve ",
        "target": "Alentejo",
        "id2": "18",
        "value": "95",
        "total": "11633",
        "percentagem": "0.82"
    },
    {
        "id": "15",
        "color": "#f5b367\r\n",
        "source": "Algarve ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "4",
        "total": "11633",
        "percentagem": "0.03"
    },
    {
        "id": "15",
        "color": "#decf00\r\n",
        "source": "Algarve ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "2",
        "total": "11633",
        "percentagem": "0.02"
    },
    {
        "id": "16",
        "color": "#d96500\r\n\r\n",
        "source": "Centro ",
        "target": "Norte",
        "id2": "11",
        "value": "1211",
        "total": "68002",
        "percentagem": "1.78"
    },
    {
        "id": "16",
        "color": "#bdb66c\r\n",
        "source": "Centro ",
        "target": "Algarve",
        "id2": "15",
        "value": "143",
        "total": "68002",
        "percentagem": "0.21"
    },
    {
        "id": "16",
        "color": "#bdaf57\r\n",
        "source": "Centro ",
        "target": "Centro",
        "id2": "16",
        "value": "63709",
        "total": "68002",
        "percentagem": "93.69"
    },
    {
        "id": "16",
        "color": "#fffbc4\r\n",
        "source": "Centro ",
        "target": "Lisboa",
        "id2": "17",
        "value": "2249",
        "total": "68002",
        "percentagem": "3.31"
    },
    {
        "id": "16",
        "color": "#f5b367",
        "source": "Centro ",
        "target": "Alentejo",
        "id2": "18",
        "value": "617",
        "total": "68002",
        "percentagem": "0.91"
    },
    {
        "id": "16",
        "color": "#f5b367\r\n",
        "source": "Centro ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "39",
        "total": "68002",
        "percentagem": "0.06"
    },
    {
        "id": "16",
        "color": "#decf00\r\n",
        "source": "Centro ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "34",
        "total": "68002",
        "percentagem": "0.05"
    },
    {
        "id": "17",
        "color": "#d96500\r\n\r\n",
        "source": "Lisboa ",
        "target": "Norte",
        "id2": "11",
        "value": "279",
        "total": "83584",
        "percentagem": "0.33"
    },
    {
        "id": "17",
        "color": "#bdb66c\r\n",
        "source": "Lisboa ",
        "target": "Algarve",
        "id2": "15",
        "value": "272",
        "total": "83584",
        "percentagem": "0.33"
    },
    {
        "id": "17",
        "color": "#bdaf57\r\n",
        "source": "Lisboa ",
        "target": "Centro",
        "id2": "16",
        "value": "960",
        "total": "83584",
        "percentagem": "1.15"
    },
    {
        "id": "17",
        "color": "#fffbc4\r\n",
        "source": "Lisboa ",
        "target": "Lisboa",
        "id2": "17",
        "value": "81247",
        "total": "83584",
        "percentagem": "97.20"
    },
    {
        "id": "17",
        "color": "#f5b367",
        "source": "Lisboa ",
        "target": "Alentejo",
        "id2": "18",
        "value": "726",
        "total": "83584",
        "percentagem": "0.87"
    },
    {
        "id": "17",
        "color": "#f5b367\r\n",
        "source": "Lisboa ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "46",
        "total": "83584",
        "percentagem": "0.06"
    },
    {
        "id": "17",
        "color": "#decf00\r\n",
        "source": "Lisboa ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "54",
        "total": "83584",
        "percentagem": "0.06"
    },
    {
        "id": "18",
        "color": "#d96500\r\n\r\n",
        "source": "Alentejo ",
        "target": "Norte",
        "id2": "11",
        "value": "46",
        "total": "21572",
        "percentagem": "0.21"
    },
    {
        "id": "18",
        "color": "#bdb66c\r\n",
        "source": "Alentejo ",
        "target": "Algarve",
        "id2": "15",
        "value": "195",
        "total": "21572",
        "percentagem": "0.90"
    },
    {
        "id": "18",
        "color": "#bdaf57\r\n",
        "source": "Alentejo ",
        "target": "Centro",
        "id2": "16",
        "value": "508",
        "total": "21572",
        "percentagem": "2.35"
    },
    {
        "id": "18",
        "color": "#fffbc4\r\n",
        "source": "Alentejo ",
        "target": "Lisboa",
        "id2": "17",
        "value": "1265",
        "total": "21572",
        "percentagem": "5.86"
    },
    {
        "id": "18",
        "color": "#f5b367",
        "source": "Alentejo ",
        "target": "Alentejo",
        "id2": "18",
        "value": "19542",
        "total": "21572",
        "percentagem": "90.59"
    },
    {
        "id": "18",
        "color": "#f5b367\r\n",
        "source": "Alentejo ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "8",
        "total": "21572",
        "percentagem": "0.04"
    },
    {
        "id": "18",
        "color": "#decf00\r\n",
        "source": "Alentejo ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "8",
        "total": "21572",
        "percentagem": "0.04"
    },
    {
        "id": "20",
        "color": "#d96500\r\n\r\n",
        "source": "Região Autónoma dos Açores ",
        "target": "Norte",
        "id2": "11",
        "value": "33",
        "total": "7079",
        "percentagem": "0.47"
    },
    {
        "id": "20",
        "color": "#bdb66c\r\n",
        "source": "Região Autónoma dos Açores ",
        "target": "Algarve",
        "id2": "15",
        "value": "8",
        "total": "7079",
        "percentagem": "0.11"
    },
    {
        "id": "20",
        "color": "#bdaf57\r\n",
        "source": "Região Autónoma dos Açores ",
        "target": "Centro",
        "id2": "16",
        "value": "42",
        "total": "7079",
        "percentagem": "0.59"
    },
    {
        "id": "20",
        "color": "#fffbc4\r\n",
        "source": "Região Autónoma dos Açores ",
        "target": "Lisboa",
        "id2": "17",
        "value": "132",
        "total": "7079",
        "percentagem": "1.86"
    },
    {
        "id": "20",
        "color": "#f5b367",
        "source": "Região Autónoma dos Açores ",
        "target": "Alentejo",
        "id2": "18",
        "value": "11",
        "total": "7079",
        "percentagem": "0.16"
    },
    {
        "id": "20",
        "color": "#f5b367\r\n",
        "source": "Região Autónoma dos Açores ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "6838",
        "total": "7079",
        "percentagem": "96.60"
    },
    {
        "id": "20",
        "color": "#decf00\r\n",
        "source": "Região Autónoma dos Açores ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "15",
        "total": "7079",
        "percentagem": "0.21"
    },
    {
        "id": "30",
        "color": "#d96500\r\n\r\n",
        "source": "Região Autónoma da Madeira ",
        "target": "Norte",
        "id2": "11",
        "value": "71",
        "total": "7537",
        "percentagem": "0.94"
    },
    {
        "id": "30",
        "color": "#bdb66c\r\n",
        "source": "Região Autónoma da Madeira ",
        "target": "Algarve",
        "id2": "15",
        "value": "6",
        "total": "7537",
        "percentagem": "0.08"
    },
    {
        "id": "30",
        "color": "#bdaf57\r\n",
        "source": "Região Autónoma da Madeira ",
        "target": "Centro",
        "id2": "16",
        "value": "53",
        "total": "7537",
        "percentagem": "0.70"
    },
    {
        "id": "30",
        "color": "#fffbc4\r\n",
        "source": "Região Autónoma da Madeira ",
        "target": "Lisboa",
        "id2": "17",
        "value": "92",
        "total": "7537",
        "percentagem": "1.22"
    },
    {
        "id": "30",
        "color": "#f5b367",
        "source": "Região Autónoma da Madeira ",
        "target": "Alentejo",
        "id2": "18",
        "value": "17",
        "total": "7537",
        "percentagem": "0.23"
    },
    {
        "id": "30",
        "color": "#f5b367\r\n",
        "source": "Região Autónoma da Madeira ",
        "target": "Região Autónoma dos Açores",
        "id2": "20",
        "value": "7",
        "total": "7537",
        "percentagem": "0.09"
    },
    {
        "id": "30",
        "color": "#decf00\r\n",
        "source": "Região Autónoma da Madeira ",
        "target": "Região Autónoma da Madeira",
        "id2": "30",
        "value": "7291",
        "total": "7537",
        "percentagem": "96.74"
    }
] ,"nodes": [
    {
        "name": "Norte ",
        "color": "#d96500\r\n\r\n",
        "xpos": "0"
    },
    {
        "name": "Norte",
        "color": "#d96500\r\n\r\n",
        "xpos": "1"
    },
    {
        "name": "Algarve ",
        "color": "#bdb66c\r\n",
        "xpos": "0"
    },
    {
        "name": "Algarve",
        "color": "#bdb66c\r\n",
        "xpos": "1"
    },
    {
        "name": "Centro ",
        "color": "#bdaf57\r\n",
        "xpos": "0"
    },
    {
        "name": "Centro",
        "color": "#bdaf57\r\n",
        "xpos": "1"
    },
    {
        "name": "Lisboa ",
        "color": "#fffbc4\r\n",
        "xpos": "0"
    },
    {
        "name": "Lisboa",
        "color": "#fffbc4\r\n",
        "xpos": "1"
    },
    {
        "name": "Alentejo ",
        "color": "#f5b367",
        "xpos": "0"
    },
    {
        "name": "Alentejo",
        "color": "#f5b367",
        "xpos": "1"
    },
    {
        "name": "Região Autónoma dos Açores ",
        "color": "#f5b367\r\n",
        "xpos": "0"
    },
    {
        "name": "Região Autónoma dos Açores",
        "color": "#f5b367\r\n",
        "xpos": "1"
    },
    {
        "name": "Região Autónoma da Madeira ",
        "color": "#decf00\r\n",
        "xpos": "0"
    },
    {
        "name": "Região Autónoma da Madeira",
        "color": "#decf00\r\n",
        "xpos": "1"
    }
]}

other data other data from the file

javascript d3.js

  • You want to know if the library receives a json as a parameter?

  • 4

    with this example instead of Matrix.json I have to generate from origin , destination ,quantiadade http://answall.com/questions/150496/gr%C3%A1fico-Chord-usado-o-D3-js

  • Colleague, welcome to SOPT. This site is not a forum. If you haven’t done it yet, do the [tour] and mainly read [Ask]. You even posted the link to another question of yours that looks exactly the same.

  • @Luizvieira agree that the question referenced in the link should be even closed, now this one can even be portrayed, agree. BS: I’ll copy your sentence, it was good.

  • @user2964140 I do not know a single diagram that cannot be done using the D3.js. you can consult the documentation for this type of chart: D3-Chord and the following examples: Uber Rides by Neighborhood, The Euro Debt Crisis and Chord Diagram

  • your comment failed to help your question. Stop, think, reflect on where you want to go, understand your doubt, this is essential. Try to do this, otherwise it will be difficult for you to express yourself. This is a tip for your life. Express yourself objectively.

  • my doubt is even in the matrix

  • @durtto Hi. I don’t know if I understood what you meant. You suggested to leave this open and close the other as duplicate of this? If yes, whatever. The PA can (should actually) [Edit] this (any one, in fact) to improve it.

  • User[...], which matrix? So, what is the doubt about the matrix? Anyway, both in this and in the other question your question is "Is it possible to create a graph"? And the answer is yes. Edit the question to make it directly clear exactly what your difficulty is.

  • P.S.: And, seriously, read [Ask]. It will help you. :)

Show 5 more comments

1 answer

1

I took as an example the Uber Rides by Neighborhood which is available on the d3.js.

the first step, would convert your source to the format used in the example.:

var data = {"links": [
  {
    "id": "11",
    "color": "#d96500\r\n\r\n",
    "source": "Norte ",
    "target": "Norte",
    "id2": "11",
    "value": "110042",
    "total": "112827",
    "percentagem": "97.53"
  },
  {
    "id": "11",
    "color": "#bdb66c\r\n",
    "source": "Norte ",
    "target": "Algarve",
    "id2": "15",
    "value": "148",
    "total": "112827",
    "percentagem": "0.13"
  },
  {
    "id": "11",
    "color": "#bdaf57\r\n",
    "source": "Norte ",
    "target": "Centro",
    "id2": "16",
    "value": "1533",
    "total": "112827",
    "percentagem": "1.36"
  },
  {
    "id": "11",
    "color": "#fffbc4\r\n",
    "source": "Norte ",
    "target": "Lisboa",
    "id2": "17",
    "value": "810",
    "total": "112827",
    "percentagem": "0.72"
  },
  {
    "id": "11",
    "color": "#f5b367",
    "source": "Norte ",
    "target": "Alentejo",
    "id2": "18",
    "value": "180",
    "total": "112827",
    "percentagem": "0.16"
  },
  {
    "id": "11",
    "color": "#f5b367\r\n",
    "source": "Norte ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "66",
    "total": "112827",
    "percentagem": "0.06"
  },
  {
    "id": "11",
    "color": "#decf00\r\n",
    "source": "Norte ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "48",
    "total": "112827",
    "percentagem": "0.04"
  },
  {
    "id": "15",
    "color": "#d96500\r\n\r\n",
    "source": "Algarve ",
    "target": "Norte",
    "id2": "11",
    "value": "37",
    "total": "11633",
    "percentagem": "0.32"
  },
  {
    "id": "15",
    "color": "#bdb66c\r\n",
    "source": "Algarve ",
    "target": "Algarve",
    "id2": "15",
    "value": "11202",
    "total": "11633",
    "percentagem": "96.30"
  },
  {
    "id": "15",
    "color": "#bdaf57\r\n",
    "source": "Algarve ",
    "target": "Centro",
    "id2": "16",
    "value": "53",
    "total": "11633",
    "percentagem": "0.46"
  },
  {
    "id": "15",
    "color": "#fffbc4\r\n",
    "source": "Algarve ",
    "target": "Lisboa",
    "id2": "17",
    "value": "240",
    "total": "11633",
    "percentagem": "2.06"
  },
  {
    "id": "15",
    "color": "#f5b367",
    "source": "Algarve ",
    "target": "Alentejo",
    "id2": "18",
    "value": "95",
    "total": "11633",
    "percentagem": "0.82"
  },
  {
    "id": "15",
    "color": "#f5b367\r\n",
    "source": "Algarve ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "4",
    "total": "11633",
    "percentagem": "0.03"
  },
  {
    "id": "15",
    "color": "#decf00\r\n",
    "source": "Algarve ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "2",
    "total": "11633",
    "percentagem": "0.02"
  },
  {
    "id": "16",
    "color": "#d96500\r\n\r\n",
    "source": "Centro ",
    "target": "Norte",
    "id2": "11",
    "value": "1211",
    "total": "68002",
    "percentagem": "1.78"
  },
  {
    "id": "16",
    "color": "#bdb66c\r\n",
    "source": "Centro ",
    "target": "Algarve",
    "id2": "15",
    "value": "143",
    "total": "68002",
    "percentagem": "0.21"
  },
  {
    "id": "16",
    "color": "#bdaf57\r\n",
    "source": "Centro ",
    "target": "Centro",
    "id2": "16",
    "value": "63709",
    "total": "68002",
    "percentagem": "93.69"
  },
  {
    "id": "16",
    "color": "#fffbc4\r\n",
    "source": "Centro ",
    "target": "Lisboa",
    "id2": "17",
    "value": "2249",
    "total": "68002",
    "percentagem": "3.31"
  },
  {
    "id": "16",
    "color": "#f5b367",
    "source": "Centro ",
    "target": "Alentejo",
    "id2": "18",
    "value": "617",
    "total": "68002",
    "percentagem": "0.91"
  },
  {
    "id": "16",
    "color": "#f5b367\r\n",
    "source": "Centro ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "39",
    "total": "68002",
    "percentagem": "0.06"
  },
  {
    "id": "16",
    "color": "#decf00\r\n",
    "source": "Centro ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "34",
    "total": "68002",
    "percentagem": "0.05"
  },
  {
    "id": "17",
    "color": "#d96500\r\n\r\n",
    "source": "Lisboa ",
    "target": "Norte",
    "id2": "11",
    "value": "279",
    "total": "83584",
    "percentagem": "0.33"
  },
  {
    "id": "17",
    "color": "#bdb66c\r\n",
    "source": "Lisboa ",
    "target": "Algarve",
    "id2": "15",
    "value": "272",
    "total": "83584",
    "percentagem": "0.33"
  },
  {
    "id": "17",
    "color": "#bdaf57\r\n",
    "source": "Lisboa ",
    "target": "Centro",
    "id2": "16",
    "value": "960",
    "total": "83584",
    "percentagem": "1.15"
  },
  {
    "id": "17",
    "color": "#fffbc4\r\n",
    "source": "Lisboa ",
    "target": "Lisboa",
    "id2": "17",
    "value": "81247",
    "total": "83584",
    "percentagem": "97.20"
  },
  {
    "id": "17",
    "color": "#f5b367",
    "source": "Lisboa ",
    "target": "Alentejo",
    "id2": "18",
    "value": "726",
    "total": "83584",
    "percentagem": "0.87"
  },
  {
    "id": "17",
    "color": "#f5b367\r\n",
    "source": "Lisboa ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "46",
    "total": "83584",
    "percentagem": "0.06"
  },
  {
    "id": "17",
    "color": "#decf00\r\n",
    "source": "Lisboa ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "54",
    "total": "83584",
    "percentagem": "0.06"
  },
  {
    "id": "18",
    "color": "#d96500\r\n\r\n",
    "source": "Alentejo ",
    "target": "Norte",
    "id2": "11",
    "value": "46",
    "total": "21572",
    "percentagem": "0.21"
  },
  {
    "id": "18",
    "color": "#bdb66c\r\n",
    "source": "Alentejo ",
    "target": "Algarve",
    "id2": "15",
    "value": "195",
    "total": "21572",
    "percentagem": "0.90"
  },
  {
    "id": "18",
    "color": "#bdaf57\r\n",
    "source": "Alentejo ",
    "target": "Centro",
    "id2": "16",
    "value": "508",
    "total": "21572",
    "percentagem": "2.35"
  },
  {
    "id": "18",
    "color": "#fffbc4\r\n",
    "source": "Alentejo ",
    "target": "Lisboa",
    "id2": "17",
    "value": "1265",
    "total": "21572",
    "percentagem": "5.86"
  },
  {
    "id": "18",
    "color": "#f5b367",
    "source": "Alentejo ",
    "target": "Alentejo",
    "id2": "18",
    "value": "19542",
    "total": "21572",
    "percentagem": "90.59"
  },
  {
    "id": "18",
    "color": "#f5b367\r\n",
    "source": "Alentejo ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "8",
    "total": "21572",
    "percentagem": "0.04"
  },
  {
    "id": "18",
    "color": "#decf00\r\n",
    "source": "Alentejo ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "8",
    "total": "21572",
    "percentagem": "0.04"
  },
  {
    "id": "20",
    "color": "#d96500\r\n\r\n",
    "source": "Região Autónoma dos Açores ",
    "target": "Norte",
    "id2": "11",
    "value": "33",
    "total": "7079",
    "percentagem": "0.47"
  },
  {
    "id": "20",
    "color": "#bdb66c\r\n",
    "source": "Região Autónoma dos Açores ",
    "target": "Algarve",
    "id2": "15",
    "value": "8",
    "total": "7079",
    "percentagem": "0.11"
  },
  {
    "id": "20",
    "color": "#bdaf57\r\n",
    "source": "Região Autónoma dos Açores ",
    "target": "Centro",
    "id2": "16",
    "value": "42",
    "total": "7079",
    "percentagem": "0.59"
  },
  {
    "id": "20",
    "color": "#fffbc4\r\n",
    "source": "Região Autónoma dos Açores ",
    "target": "Lisboa",
    "id2": "17",
    "value": "132",
    "total": "7079",
    "percentagem": "1.86"
  },
  {
    "id": "20",
    "color": "#f5b367",
    "source": "Região Autónoma dos Açores ",
    "target": "Alentejo",
    "id2": "18",
    "value": "11",
    "total": "7079",
    "percentagem": "0.16"
  },
  {
    "id": "20",
    "color": "#f5b367\r\n",
    "source": "Região Autónoma dos Açores ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "6838",
    "total": "7079",
    "percentagem": "96.60"
  },
  {
    "id": "20",
    "color": "#decf00\r\n",
    "source": "Região Autónoma dos Açores ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "15",
    "total": "7079",
    "percentagem": "0.21"
  },
  {
    "id": "30",
    "color": "#d96500\r\n\r\n",
    "source": "Região Autónoma da Madeira ",
    "target": "Norte",
    "id2": "11",
    "value": "71",
    "total": "7537",
    "percentagem": "0.94"
  },
  {
    "id": "30",
    "color": "#bdb66c\r\n",
    "source": "Região Autónoma da Madeira ",
    "target": "Algarve",
    "id2": "15",
    "value": "6",
    "total": "7537",
    "percentagem": "0.08"
  },
  {
    "id": "30",
    "color": "#bdaf57\r\n",
    "source": "Região Autónoma da Madeira ",
    "target": "Centro",
    "id2": "16",
    "value": "53",
    "total": "7537",
    "percentagem": "0.70"
  },
  {
    "id": "30",
    "color": "#fffbc4\r\n",
    "source": "Região Autónoma da Madeira ",
    "target": "Lisboa",
    "id2": "17",
    "value": "92",
    "total": "7537",
    "percentagem": "1.22"
  },
  {
    "id": "30",
    "color": "#f5b367",
    "source": "Região Autónoma da Madeira ",
    "target": "Alentejo",
    "id2": "18",
    "value": "17",
    "total": "7537",
    "percentagem": "0.23"
  },
  {
    "id": "30",
    "color": "#f5b367\r\n",
    "source": "Região Autónoma da Madeira ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "7",
    "total": "7537",
    "percentagem": "0.09"
  },
  {
    "id": "30",
    "color": "#decf00\r\n",
    "source": "Região Autónoma da Madeira ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "7291",
    "total": "7537",
    "percentagem": "96.74"
  }
] ,"nodes": [
  {
    "name": "Norte ",
    "color": "#d96500\r\n\r\n",
    "xpos": "0"
  },
  {
    "name": "Norte",
    "color": "#d96500\r\n\r\n",
    "xpos": "1"
  },
  {
    "name": "Algarve ",
    "color": "#bdb66c\r\n",
    "xpos": "0"
  },
  {
    "name": "Algarve",
    "color": "#bdb66c\r\n",
    "xpos": "1"
  },
  {
    "name": "Centro ",
    "color": "#bdaf57\r\n",
    "xpos": "0"
  },
  {
    "name": "Centro",
    "color": "#bdaf57\r\n",
    "xpos": "1"
  },
  {
    "name": "Lisboa ",
    "color": "#fffbc4\r\n",
    "xpos": "0"
  },
  {
    "name": "Lisboa",
    "color": "#fffbc4\r\n",
    "xpos": "1"
  },
  {
    "name": "Alentejo ",
    "color": "#f5b367",
    "xpos": "0"
  },
  {
    "name": "Alentejo",
    "color": "#f5b367",
    "xpos": "1"
  },
  {
    "name": "Região Autónoma dos Açores ",
    "color": "#f5b367\r\n",
    "xpos": "0"
  },
  {
    "name": "Região Autónoma dos Açores",
    "color": "#f5b367\r\n",
    "xpos": "1"
  },
  {
    "name": "Região Autónoma da Madeira ",
    "color": "#decf00\r\n",
    "xpos": "0"
  },
  {
    "name": "Região Autónoma da Madeira",
    "color": "#decf00\r\n",
    "xpos": "1"
  }
]}

var cities = data.nodes.filter(function (node, indice) {
  return node.xpos == 0;
}).map(function (node, indice) {
  return {
    indice: indice,
    name: node.name.trim(),
    color: node.color.substring(0, 7).toUpperCase()
  }
});

var matrix = [];
data.links.forEach(function (node, indice) {
  var source = cities.filter(function (city, indice) {
    return city.name == node.source.trim();
  })[0].indice;
  var target = cities.filter(function (city, indice) {
    return city.name == node.target.trim();
  })[0].indice;
  if (!matrix[source])
    matrix[source] = [];
  matrix[source][target] = parseInt(node.value);
});

the resulting JSON will be similar to the following.:

var cities = [{"indice":0,"name":"Norte","color":"#D96500"},{"indice":1,"name":"Algarve","color":"#BDB66C"},{"indice":2,"name":"Centro","color":"#BDAF57"},{"indice":3,"name":"Lisboa","color":"#FFFBC4"},{"indice":4,"name":"Alentejo","color":"#F5B367"},{"indice":5,"name":"Região Autónoma dos Açores","color":"#F5B367"},{"indice":6,"name":"Região Autónoma da Madeira","color":"#DECF00"}];
var matrix = [[110042,148,1533,810,180,66,48],[37,11202,53,240,95,4,2],[1211,143,63709,2249,617,39,34],[279,272,960,81247,726,46,54],[46,195,508,1265,19542,8,8],[33,8,42,132,11,6838,15],[71,6,53,92,17,7,7291]];

as a last step, run the following script to render the chart.:

var formatPercent = d3.format(".1%");

var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);

var layout = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.ascending);

var path = d3.svg.chord()
.radius(innerRadius);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "circle")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("circle")
.attr("r", outerRadius);

// Compute the chord layout.
layout.matrix(matrix);

// Add a group per neighborhood.
var group = svg.selectAll(".group")
.data(layout.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseover", mouseover);

// Add a mouseover title.
group.append("title").text(function(d, i) {
  return cities[i].name + ": " + formatPercent(d.value) + " of origins";
});

// Add the group arc.
var groupPath = group.append("path")
.attr("id", function(d, i) { return "group" + i; })
.attr("d", arc)
.style("fill", function(d, i) { return cities[i].color; });

// Add a text label.
var groupText = group.append("text")
.attr("x", 6)
.attr("dy", 15);

groupText.append("textPath")
.attr("xlink:href", function(d, i) { return "#group" + i; })
.text(function(d, i) { return cities[i].name; });

// Remove the labels that don't fit. :(
groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
.remove();

// Add the chords.
var chord = svg.selectAll(".chord")
.data(layout.chords)
.enter().append("path")
.attr("class", "chord")
.style("fill", function(d) { return cities[d.source.index].color; })
.attr("d", path);

// Add an elaborate mouseover title for each chord.
chord.append("title").text(function(d) {
  return cities[d.source.index].name
  + " → " + cities[d.target.index].name
  + ": " + formatPercent(d.source.value)
  + "\n" + cities[d.target.index].name
  + " → " + cities[d.source.index].name
  + ": " + formatPercent(d.target.value);
});

function mouseover(d, i) {
  chord.classed("fade", function(p) {
    return p.source.index != i
    && p.target.index != i;
  });
}

As the script got a bit long, it was not possible to put the full example directly in the answer, but you can check the following fiddle.: JSFiddle

  • I wanted in percentages like this in the example and not absolute value

  • @user2964140 Tobymosque has made an excellent effort to help you and basically solve your problem. Have you tried this last adaptation? (I ask to make sure that you do your part of trying to take the next step with the help that has been given here...)

  • yes I did.but now I’m having a problem making the output with php not working

  • $body = $("body"); $body.addClass("loading") var data= D3.json(".. /querys/Chord.php") . header("Content-Type", "application/x-www-form-urlencoded") . post('ano=' + anoid + '&sexo=' + sexo + '&meiovida=' + meiovida + '&faixaetaria=' + faixaetaria + '&alfabeto=' + alfabeto + '&opcaoresidencia=' + opcaoresidencia + action)&#xA; $body.removeClass("loading");

  • I will put other data here http://pastebin.com/xSeCLc3F

  • @user2964140 in this case you should put the new problem in a new question. So that each question/answer becomes more specific.

Show 1 more comment

Browser other questions tagged javascript d3.js

You are not signed in. Login or sign up in order to post.