CSE332_SampleCode/dataBind.html at master · ayushGHub/CSE332_SampleCode · GitHub

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!-- Author : Ayush Kumar - aykumar@cs.stonybrook.edu -->

<!DOCTYPE html>
<html lang="en">
<head>
  <!--  <script src="../d3.min.js"></script> Use D3 library from CDN -->
     <script src="https://d3js.org/d3.v4.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/style.css"></link>

</head>
<body>
  <!--  <p> This is my World </p>-->

    <script>
       var myData = ["Hello World!", "Hello D3","Hello JavaScript"];

         var p = d3.select("body")
                 .selectAll("p")
                 .data(myData)
                 // .enter()
                 // .append('h1')
                 .text(function (d, i) {
                     return d;
                 });

         // var myData = [1, 2, 3, 4, 5];
         //
         //  var p = d3.select("body")
         //            .selectAll("p")
         //            .data(myData) //only one paragraph element in the DOM.
         //            .text(function (d, i) {
         //                 return d;
         //             });
           // var s = d3.select("body")
           //       .selectAll("p")
           //       .data(myData)
           //       .enter() //Creates a selection with placeholder references for missing elements
           //
           //    //   .append("span")
           //       .text(function(d) { return d + " "; });


          // var data = [4, 1, 6, 2, 8, 9];
          // var body = d3.select("body")
          //              .selectAll("span")
          //              .data(data)
          //              .enter().append("span")
          //              .style('color', function(d) {
          //                  if (d % 2 === 0) {
          //                      return "green";
          //                  } else {
          //                      return "red";
          //                  }
          //              })
          //              .text(function(d) { return d + " "; });


// d3.csv("/data/eyet.csv", function(error, data) {
//
//     d3.select("body")
//         .selectAll("p")
//         .data(data)
//         .enter()
//         .append("p")
//       /*  .style('color', function(d) {
//             if (d.Timestamp % 2 === 0) {
//                 return "green";
//             } else {
//                 return "red";
//             }
//         })*/
//         .text(function(d) {
//             return d.Timestamp + ", " + d.StimuliName;
//         });
//
// });


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