[D3.js] CSV, TSV, JSON, XML 시각화

codingman (64)in #kr-dev • 6 years ago

[D3.js] CSV, TSV, JSON, XML 시각화

오늘은 지금까지 CSV, TSV, JSON, XML 데이터 파일을 읽어오는 실험만 하였습니다. 정확히 해당 데이터 값을 콘솔창에서 확인 햇는데 이번에는 특정 이미지화 해서 데이터를 시각화 하는 실험을 하겠습니다.

1. CSV 데이터 파일 시각화

지난시간에 읽은 CSV 데이터 파일을 circle 모양으로 시각화를 한번 해보았습니다.

[data.csv] : 데이터 간격은 콤마(,) 입니다.

x,y
50,50
100,150
150,50
200,150
250,50

[소스]

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

    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");

    d3.csv("data.csv").then(function(data){
        var circle = svg.selectAll("circle").data(data)
               .enter().append("circle")
                 .attr("cx",function(d){return d.x;})
                 .attr("cy",function(d){return d.y;})
                 .attr("r",10)
                 .attr("fill","red");
    });
    function type(d){
      d.x=+d.x;  //parseFloat(d.x);
      d.y=+d.y;  //parseFloat(d.y);
      return d;
    }
  </script>
</body>

[결과]

2. TSV 데이터 파일 시각화

지난시간에 읽은 TSV 데이터 파일을 circle 모양으로 시각화를 한번 해보았습니다.

[data.tsv] : 데이터 간격은 Tab 간격입니다.

[소스] : 코딩은 CSV랑 동일합니다.

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

    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");

    d3.tsv("data.tsv").then(function(data){
        var circle = svg.selectAll("circle").data(data)
               .enter().append("circle")
                 .attr("cx",function(d){return d.x;})
                 .attr("cy",function(d){return d.y;})
                 .attr("r",10)
                 .attr("fill","red");
    });
    function type(d){
      d.x=+d.x;  //parseFloat(d.x);
      d.y=+d.y;  //parseFloat(d.y);
      return d;
    }
  </script>
</body>

[결과]

3. JSON 데이터 파일 시각화

지난시간에 읽은 JSON 데이터 파일을 circle 모양으로 시각화를 한번 해보았습니다.

[data.json]

[
  {
    "x": "50",
    "y": "50"
  },
  {
    "x": "100",
    "y": "150"
  },
  {
    "x": "150",
    "y": "50"
  },
  {
    "x": "200",
    "y": "150"
  },
  {
    "x": "250",
    "y": "50"
  }
]

[소스] : 코딩은 CSV랑 유사 합니다.

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

<body>
  <script>

    var svg = d3.select("body").append("svg")
          .attr("width",500)
          .attr("height",500)
          .style("background-color","yellow");

    d3.json("data.json",type).then(function(data){
        var circle = svg.selectAll("circle").data(data)
               .enter().append("circle")
                 .attr("cx",function(d){return d.x;})
                 .attr("cy",function(d){return d.y;})
                 .attr("r",10)
                 .attr("fill","red");
    });
    function type(d){
      d.x=+d.x;  //parseFloat(d.x);
      d.y=+d.y;  //parseFloat(d.y);
      return d;
    }
  </script>

</body>

[결과]

4. XML 데이터 파일 시각화

지난시간에 읽은 XML 데이터 파일을 막대형 차트 모양으로 시각화를 한번 해보았습니다.

[data.xml]

<?xml version="1.0" encoding="UTF-8" ?>

<data>
  <x>50</x>
  <x>100</x>
  <x>150</x>
  <x>200</x>
  <x>250</x>  
</data>

[소스] : 데이터가 한개임으로 지난시간 배운 막대형 차트를 이용하여 적용해 보죠.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>codingman</title>
    <style>
    .chart div {
      font: 10px sans-serif;
      background-color: steelblue;
      text-align: right;
      padding: 3px;
      margin: 1px;
      color: white;
    }
    </style>
  </head>
  <body>
    <div class="chart"></div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>

      d3.xml("data.xml").then(function(data){
       d3.select(".chart").selectAll("div").data(data.documentElement.getElementsByTagName("x"))
          .enter().append("div")
          .style("width", function(d) { return  d.textContent + "px"; })
          .text(function(d) { return d.textContent; });
         });
    </script>
  </body>
</html>

[결과]