JavaScript_Aliens_Are_Real/app.js at master · nguyenndt278/JavaScript_Aliens_Are_Real · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
var ufos = data;
var tbody= d3.select("tbody");
var button = d3.select("#button_one");
var button_reset=d3.select("#button_reset");
var select_date=d3.select("#select-date");
var select_city=d3.select("#select-city");
var select_state=d3.select("#select-state");
var select_country=d3.select("#select-country");
var select_shape=d3.select("#select-shape");

function capitalize(string) {
  return charAt(0).toUpperCase() + string.slice(1);
}

function dateFilter() {
  var inputValue = d3.select("#date-input").property("value");
  var filteredData = ufos.filter(ufo => ufo.datetime === inputValue);
  d3.event.preventDefault();
  var list = d3.select(".summary");
  list.html("");
  filteredData.forEach((data) => {
    var row=tbody.append("tr");
    Object.entries(data).forEach(([key, value]) => {
      var cell=row.append("td");
      cell.text(value);})})}

function cityFilter() {
  var inputValue = d3.select("#date-input").property("value");
  var inputValue1=inputValue.toString().toLowerCase();
  var filteredData = ufos.filter(ufo => ufo.city === inputValue1);
  d3.event.preventDefault();
  var list = d3.select(".summary");
  list.html("");
  filteredData.forEach((data) => {
    var row=tbody.append("tr");
    Object.entries(data).forEach(([key, value]) => {
      var cell=row.append("td");
      cell.text(value);})})};

function stateFilter() {
  var inputValue = d3.select("#date-input").property("value");
  var inputValue1=inputValue.toString().toLowerCase();
  var filteredData = ufos.filter(ufo => ufo.state === inputValue1);
  d3.event.preventDefault();
  var list = d3.select(".summary");
  list.html("");
  filteredData.forEach((data) => {
    var row=tbody.append("tr");
    Object.entries(data).forEach(([key, value]) => {
      var cell=row.append("td");
      cell.text(value);})})};

function countryFilter() {
  var inputValue = d3.select("#date-input").property("value");
  var inputValue1=inputValue.toString().toLowerCase();
  var filteredData = ufos.filter(ufo => ufo.country === inputValue1);
  d3.event.preventDefault();
  var list = d3.select(".summary");
  list.html("");
  filteredData.forEach((data) => {
    var row=tbody.append("tr");
    Object.entries(data).forEach(([key, value]) => {
      var cell=row.append("td");
      cell.text(value);})})};

function shapeFilter() {
  var inputValue = d3.select("#date-input").property("value");
  var inputValue1=inputValue.toString().toLowerCase();
  var filteredData = ufos.filter(ufo => ufo.shape === inputValue1);
  d3.event.preventDefault();
  var list = d3.select(".summary");
  list.html("");
  filteredData.forEach((data) => {
    var row=tbody.append("tr");
    Object.entries(data).forEach(([key, value]) => {
      var cell=row.append("td");
      cell.text(value);})})};

function reset()  {
  d3.select("#date-input").property("value","");
  d3.select(".summary").html("");
};

select_date.on("click", function(){
  d3.select(".summary").html("");
  button.on("click", dateFilter);
  d3.select("h5").text("Filter by Date");
  d3.select(".form-control").attr("placeholder", "1/1/2010");
  d3.select("#date-input").property("value", "");
});

select_city.on("click", function(){
  d3.select(".summary").html("");
  button.on("click", cityFilter);
  d3.select("h5").text("Filter by City");
  d3.select(".form-control").attr("placeholder", "benton");
  d3.select("#date-input").property("value", "");
});

select_state.on("click", function(){
  d3.select(".summary").html("");
  button.on("click", stateFilter);
  d3.select("h5").text("Filter by State");
  d3.select(".form-control").attr("placeholder", "ar");
  d3.select("#date-input").property("value", "");
});

select_country.on("click", function(){
  d3.select(".summary").html("");
  button.on("click", countryFilter);
  d3.select("h5").text("Filter by Country");
  d3.select(".form-control").attr("placeholder", "us");
  d3.select("#date-input").property("value", "");
});

select_shape.on("click", function(){
  d3.select(".summary").html("");
  button.on("click", shapeFilter);
  d3.select("h5").text("Filter by Shape");
  d3.select(".form-control").attr("placeholder", "circle");
  d3.select("#date-input").property("value", "");
});

button_reset.on("click", reset);