визуализация d3.js некоторые британские данные заболевания


Я научил себя Д3 (еще учусь), и уже готовую визуализацию, что я более чем доволен.

Но я думаю (знаю), что код можно улучшить и сделать более эффективным. Например, используйте CSV-файл, для сведения (не знаю, где начать с этого).

Я считаю, что я неплохо разбираюсь в HTML и CSS, но меня немного пугает Д3 и HTML/CSS все немного сумбурно (см. <p></p> как в HTML и CSS файлы).

Я приложил картинку, как он выглядит (не обращайте внимания на данные по Южной Англии: я знаю, что это дублируется, мне придется заменить их с фактическими данными).

@import url("https://fonts.googleapis.com/css?family=Lato:300");

rect {
  stroke: white;
}
text {
  font-family: "Lato";
  fill: white;
  font-size: 8px;
  text-anchor: middle;
}

svg {
  padding-left: 60px;
  padding-top:17px;
  position: fixed;
}

p {
  font-size: 14px;
}

.p1 {
  position: absolute;
  font-family: "Lato";
  font-size: 17px;
  padding-left: 60px;
}

.p2 {
  position: absolute;
  font-family: "Lato";
  font-size: 17px;
  padding-left: 550px;
}

.p3 {
  position: absolute;
  font-family: "Lato";
  padding-left: 60px;
  padding-top: 35px;
}

.p4 {
  position: absolute;
  font-family: "Lato";
  padding-left: 230px;
  padding-top: 35px;
}

.p5 {
  position: absolute;
  font-family: "Lato";
  padding-left: 380px;
  padding-top: 35px;
}

.p6 {
  position: absolute;
  font-family: "Lato";
  padding-left: 60px;
  padding-top: 390px;
}

.p7 {
  position: absolute;
  font-family: "Lato";
  padding-left: 283px;
  padding-top: 390px;
}

.p8 {
  position: absolute;
  font-family: "Lato";
  padding-left: 553px;
  padding-top: 35px;
}

.p9 {
  position: absolute;
  font-family: "Lato";
  padding-left: 723px;
  padding-top: 35px;
}

.p10 {
  position: absolute;
  font-family: "Lato";
  padding-left: 896px;
  padding-top: 35px;
}

.p11 {
  position: absolute;
  font-family: "Lato";
  padding-left: 553px;
  padding-top: 380px;
}

.p12 {
  position: absolute;
  font-family: "Lato";
  padding-left: 900px;
  padding-top: 380px;
}
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            },
            {
              "name": "CKD",
              "value": 3.21,
              "color": "#2F9599",
            },
            {
              "name": "CHD",
              "value": 2.57,
              "color": "#E8175D",
            },
            {
              "name": "Diabetes",
              "value": 11.92,
              "color": "#474747",
            },
            {
              "name": "Stroke",
              "value": 1.18,
              "color": "#CC527A",
            }
          ]
        },
        {
        "name": "Leeds",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.52,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.29,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.71,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.82,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Liverpool",
        "children": [
          {
            "name": "Cancer",
            "value": 2.50,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 5.90,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.71,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 6.70,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.88,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Manchester",
        "children": [
          {
            "name": "Cancer",
            "value": 1.78,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 2.95,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.61,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.05,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Sheffield",
        "children": [
          {
            "name": "Cancer",
            "value": 2.54,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 4.57,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 3.85,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 7.08,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 2.13,
            "color": "#CC527A",
          }
        ]
      },
    ]
  },
  {
    "name": "South England",
    "children": [
      {
        "name": "Brighton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Bristol",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Luton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Milton Keynes",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color":"#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      {
        "name": "Southampton",
        "children": [
          {
            "name": "Cancer",
            "value": 1.18,
            "color": "#A8A7A7",
          },
          {
            "name": "CKD",
            "value": 3.21,
            "color": "#2F9599",
          },
          {
            "name": "CHD",
            "value": 2.57,
            "color": "#E8175D",
          },
          {
            "name": "Diabetes",
            "value": 11.92,
            "color": "#474747",
          },
          {
            "name": "Stroke",
            "value": 1.18,
            "color": "#CC527A",
          }
        ]
      },
      ]
    }
  ]
};

var treemapLayout = d3.treemap()
  .size([1000, 600])
  .paddingTop(20)
  .paddingInner(8);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

  nodes
    .append('rect')
    .attr('width', function(d) { return d.x1 - d.x0; })
    .attr('height', function(d) { return d.y1 - d.y0; })
    .attr('opacity', function(d) { return 0.8 /* has to be like d.value / max or so */ })
    .attr('fill', function(d) { if (d.data.color) {
                                  return d.data.color
                                } else {
                                  return "white"
                                }})
  nodes
    .append('text')
    .attr('dx', 10)
    .attr('dy', 8)
  .text(function(d) {
      return d.data.value;
  });


  </script>
</body>

Screenshot of output



156
2
задан 15 февраля 2018 в 10:02 Источник Поделиться
Комментарии
1 ответ

Как уже очень хорошо объяснил в комментариях, на карте не лучшего визуального кодирования для представления данных. Однако, подсказывая, как лучше представлять данные, которые вы возможно не по теме, даже для проверки кода. Имея это в виду, я буду решать только пару тем в коде, касающиеся наилучшей практики, специально, что некрасиво <p> позиционирование.

Как я уже сказал, создание HTML <p> элементы и их позиционирование в CSS является не только странным и громоздким, но она также будет шкура вам в несколько способов. Общим (и фразеологии) способ создания названия города, используя самые Д3 макет у вас есть, в самой СВГ.

Прежде всего, не используйте магические числа. Явно задать ширину и высоту...

var width = 1000,
height = 600;

... и используйте их, чтобы добавить свой СВГ:

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

Затем вы можете использовать эти значения в макете:

var treemapLayout = d3.treemap()
.size([width, height])
.paddingTop(20)
.paddingInner(8);

Теперь наступает самая важная часть, которая печатает имена города. Во-первых, избавиться от всего, что HTML и CSS о <p> элементы. Кроме того, удалить position: fixed для СВГ.

Иметь в виду, что ваш план имеет все x и y позиции вам необходимо. Итак, чтобы напечатать названия городов, в которых есть depth === 2просто сделай:

var cities = nodes.filter(function(d) {
return d.depth === 2
}).append("text")
.attr("class", "city")
.attr("dy", "1em")
.text(function(d) {
return d.data.name;
});

Наконец, это хорошая идея, назвав свой выбор. Например:

var rects = nodes.append('rect')
//etc...

Если вы хотите печатать названия регионов, просто использовать ту же логику.

Вот ваш код с этими изменениями:



var data = {
"name": "England",
"children": [{
"name": "North England",
"children": [{
"name": "Bradford City",
"children": [{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Leeds",
"children": [{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.52,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.29,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.71,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.82,
"color": "#CC527A",
}
]
},
{
"name": "Liverpool",
"children": [{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 5.90,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.71,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.70,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.88,
"color": "#CC527A",
}
]
},
{
"name": "Manchester",
"children": [{
"name": "Cancer",
"value": 1.78,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 2.95,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.61,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.05,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
{
"name": "Sheffield",
"children": [{
"name": "Cancer",
"value": 2.54,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 4.57,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.85,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.08,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
]
},
{
"name": "South England",
"children": [{
"name": "Brighton",
"children": [{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Bristol",
"children": [{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Luton",
"children": [{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Milton Keynes",
"children": [{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Southampton",
"children": [{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
]
}
]
};

var width = 1000,
height = 600;

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

var treemapLayout = d3.treemap()
.size([width, height])
.paddingTop(20)
.paddingInner(8);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
return d.value;
});

treemapLayout(rootNode);

var nodes = svg.selectAll(null)
.data(rootNode.descendants())
.enter()
.append('g')
.attr('transform', function(d) {
return 'translate(' + [d.x0, d.y0] + ')'
});

var rects = nodes.append('rect')
.attr('width', function(d) {
return d.x1 - d.x0;
})
.attr('height', function(d) {
return d.y1 - d.y0;
})
.attr('opacity', function(d) {
return 0.8 /* has to be like d.value / max or so */
})
.attr('fill', function(d) {
if (d.data.color) {
return d.data.color
} else {
return "white"
}
})

var cities = nodes.filter(function(d) {
return d.depth === 2
}).append("text")
.attr("class", "city")
.attr("dy", "1em")
.text(function(d) {
return d.data.name;
})

var labels = nodes.append('text')
.attr("class", "label")
.attr('dx', 10)
.attr('dy', 8)
.text(function(d) {
return d.data.value;
});


rect {
stroke: white;
}

.city {
fill: darkslategray;
font-size: 12px;
}

.label {
font-family: "Lato";
fill: white;
font-size: 8px;
text-anchor: middle;
}

svg {
padding-left: 60px;
padding-top: 17px;
}

p {
font-size: 14px;
}


<script src="https://d3js.org/d3.v4.min.js"></script>



0
ответ дан 19 февраля 2018 в 01:02 Источник Поделиться