วันพุธที่ 11 กุมภาพันธ์ พ.ศ. 2558

Prepare for Assignment 1

Begin with D3.js

     ใช้ตารางสรุปยอดขายรถยนต์ในไทย ประจำเดือน ธันวาคม พ.ศ.2557 ในการทำ chart


รูปที่ 1 ตารางสรุปยอดขายรถยนต์ในไทย ประจำเดือนธันวาคม 57
1.Histrogram
แสดง chart ในแบบ Histogram
Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
.chart div {
  font: 10px sans-serif;
  background-color: orange;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>
<body>
<div class="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [33073,15646, 13369, 5658, 5283, 3471,2799,2097,1874];

var chart = d3.select(".chart");
var bar = chart.selectAll("div");
var barUpdate = bar.data(data);
var barEnter = barUpdate.enter().append("div");
barEnter.style("width", function(d) { return d / 50 + "px"; });
barEnter.text(function(d) { return d; });

</script>
</body>
</html>

Refer from : bost.ocks.org


2. Pie
แสดง chart ในแบบ Pie

Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
        text {
                font-family: sans-serif;
                font-size: 12px;
                fill: white;
        }
 
        </style>
</head>
<body>
        <script type="text/javascript">
 
        //Width and height
        var w = 400;
        var h = 400;
        var dataset = [ 33073, 15646, 13369, 5658, 5283, 3471, 2799,2097,1874 ];
        var outerRadius = w / 2;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
                       
        var pie = d3.layout.pie();
               
        //Easy colors accessible via a 10-step ordinal scale
        var color = d3.scale.category10();
 
        //Create SVG element
        var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
                       
        //Set up groups
        var arcs = svg.selectAll("g.arc")
                  .data(pie(dataset))
                  .enter()
                  .append("g")
                  .attr("class", "arc")
                  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
                       
        //Draw arc paths
        arcs.append("path")
            .attr("fill", function(d, i) {
                return color(i);
            })
            .attr("d", arc);
                       
        //Labels
        arcs.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.value;
            });
                                               
        </script>
</body>
</html>
Refer from : bl.ocks.org
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอังคารที่ 10 กุมภาพันธ์ พ.ศ. 2558

Exercise 3

Exercise 3 - Try more Web-based Tools

     ทดลองใช้เว็บ Web-based Tools  อื่นๆซึ่งใน Exercise นี้ ผมได้เลือกเว็บ charts.hohli มาใช้ในการ create chart online

ภาพแสดง table ที่ใช้ในการกรอกข้อมูล

     มีการ preview chart ในขณะที่เรากำลังกรอกข้อมูล

Preview graph instant

     ข้อดี
        - เหมาะสำหรับข้อมูลที่มี ไม่กี่ชนิด
        - ใช้งานสะดวก ไม่ซับซ้อน
   
     ข้อเสีย
       - ไม่เหมาะกับข้อมูลที่มีหลายชนิด
       - ไม่สามารถ import ไฟล์ ใดๆ ได้เลย ตัวอย่างเช่น csv


    เมื่อกด Generate จะได้
After press generate


กราฟที่ได้ 


ข้อมูลจาก headlightmag








Bubble chart

          Bubble chart เป็นแผนภูมิแบบฟองอากาศ ซึ่งในแต่ละฟอง สามารถกำหนดค่าพารามิเตอร์ได้ถึง 3 ค่า คือ ค่า X , ค่า Y และค่ารัศมี ของฟอง Bubble chart มักถูกใช้ในการนำเสนอข้อมูลทางการเงิน ดังภาพ


Refer from : https://docs.oracle.com
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: ความคิดเห็น (Atom)