Assignment_LookAndFeel/Aboutus.html at master · Banula2208/Assignment_LookAndFeel · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>

<html lang="en" xml:lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div>
      <header>
        <nav>
            <a href="Index.html">
              <h1 class="logo-label white-font">URBAN BIKE WORKS</h1>
            </a>
            <ul>
              <li>
                <a href="Index.html" class="white-font"><b>HOME</b></a>
              </li>
              <li>
                <a href="Services.Html" class="white-font"><b>SERVICES</b></a>
              </li>
              <li>
                <a href="Dashboard.html" class="white-font"><b>DASHBOARD</b></a>
              </li>
              <li>
                <a href="Bikes.Html" class="white-font"><b>BIKES</b></a>
              </li>
              <li>
                <a href="Aboutus.html" class="white-font"><b>ABOUT US</b></a>
              </li>
            </ul>
          </nav>
      </header>

      <!-- Main content that should be edited -->
      <div class="about-section">
        <h3 class="text-style">ABOUT US</h3>
        <div class="about-article-container">
          <img
            src="Arun.jpg"
            width="100px"
          />
          <h2>Arun Kumar Pathipati</h2>
          <p>Experienced System Engineer with three years specializing in PLM Teamcenter at TATA Consultancy Services, adept at optimizing processes and fostering collaboration for the product development lifecycle. Passionate about leveraging data for insightful decision-making, I pursued a master's in Business Analytics at the University of South Florida, solidifying my skills in the dynamic intersection of technology and innovation.

Contributions: I have created a Dashboard page for the service orders which shows the service history of the customer. I have made use of CRUD operations to create a new field "ADD DATA" to enter the new customer details. Also, there is a button to see the additional details of the customer.
          </p>
        </div>

        <div class="about-article-container">
            <img
              src="Sampreeth.jpg"
              width="100px"
            />
            <h2>Sampreeth Maturi</h2>
            <p>Analytics expert with over 5 years of experience driving insights and optimizing processes for major corporations. Specializes in improving forecasting models and identifying actionable metrics to guide business decisions.
Contributions: On the services page, I have created a dashboard for the services offered and how much we charge. Making use of CRUD operations, we can even add a new service that includes the Name of the service, Bike, and Price of it. Also, Edit and Remove option for existing services.
            </p>
          </div>

          <div class="about-article-container">
            <img
              src="Dinesh.jpg"
              width="100px"
            />
            <h2>Dinesh Datta Pendyala</h2>
            <p>
Experienced Data professional with a strong background in Analyzing and Visualizing data, and building and optimizing data pipelines. Have five years of experience working Supply chain Analyst and Business Analyst in Amazon and Swiggy India.Bringing strengths in attention-to-detail, interpersonal skills, and process optimization to drive efficient outcomes.

Contributions: I have created a Home page that tells about the company and services offered by the website. I contributed to the navigation aspects of the homepage, including writing the code for the banner components
            </p>
          </div>

          <div class="about-article-container">
            <img
              src="Sandeep.jpg"
              width="100px"
            />
            <h2>Sandeep Banula</h2>
            <p> I'm a business analyst who figures out how companies can work better. I help teams understand each other, turning business needs into practical steps for improvement. My goal is to make sure decisions are based on data, and I work towards helping the company succeed by finding smart solutions.
Contributions: For the About Us page, have added the information of all team members. Created Entity-Relationship diagram. I have contributed to building a bike page to see their sales orders. Also, built a graph which shows the service percentages of different bikes.
            </p>
          </div>

        </div>
        <h3 class="text-style">BIKE TYPE SERVICE PERCENTAGES</h3>
      <div class="">
        <div class="d3js12 image" style="width: auto;">


          <div class="margin-about">
            <h3></h3>


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

          <svg id="chart" width="auto" height="400" class="chart"></svg>
        </div>


        </div>
        <style>
          h3 {
            font-size: 1.5em;
            text-align: center;
          }
          .d3js12 {
            text-align: center;
          }
          svg text {
            font-size: 16px;
          }
        </style>
      </div>
      </div>
        <h3 class="text-style">ENTITY RELATION DIAGRAM</h3>


        <div class="img-container margin-left-twefi">
            <div class="image ">
          <img src="erpicd.jpg"></img>
          </div>
        </div>

      </div>
      <div>
        <h3 class="text-style">GITHUB LINK</h3>
        <ul class="">
          <li>
        <label class="">
          https://crypto.stanford.edu/cs142/lectures/url.html
        </label>
        </li>
        <ul>
        </div>
      <div class="">
      <h3 class="text-style">API ENDPOINTS</h3>
      <div class="table-about">
      <div class="table-content" id="table-content-purchase">

        <ul class="li-about">
          <li><b>End Point:</b> https://motorcycles-by-api-ninjas.p.rapidapi.com/v1/motorcycles?make=Kawasaki&model=Ninja</li>

          <li><b>KEY</b>  d3d998a782mshd5354a54cd09284p1b522ejsn43b7af1e5eee</li>
          <li><b>HOST:</b>  https://motorcycles-by-api-ninjas.p.rapidapi.com/</li>
        </ul>


        <div class="table-row">
          <div class="table-data"><b></b></div>
          <div class="table-data-about"></div>

        </div>
        <div class="table-row">
          <div class="table-data"><b></b></div>
          <div class="table-data-about"></div>
        </div>
      </div>
      </div>
      <div>

      </div>
      </div>

    </div>
  </body>
</html>

<script
  type="text/javascript"
  src="https://code.jquery.com/jquery-1.7.1.min.js"
></script>
<script>


$(document).ready(function () {
  const data = [
    { rating: "Sport", percentage: 60.0 },
    { rating: "Sport Touring", percentage: 40.0 }
];

const chart = d3.select("#chart");

const margin = { top: 20, right: 50, bottom: 100, left: 50 }; // Adjusted right and left margins
const width = 500 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const xScale = d3
    .scaleBand()
    .domain(data.map((d) => d.rating))
    .range([0, width])
    .padding(0.1);

const yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]); // Reversed the range for yScale

// Create the x and y axes
const xAxis = d3.axisBottom(xScale); // Changed to xScale
const yAxis = d3.axisLeft(yScale);

// Create a new group for the chart
const g = chart
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

// Create the columns (changed "rect" to "rect")
g.selectAll(".column")
    .data(data)
    .enter()
    .append("rect") // Changed to "rect"
    .attr("class", "column") // Changed to "column"
    .attr("x", (d) => xScale(d.rating)) // Use xScale for x position
    .attr("y", (d) => yScale(d.percentage)) // Use yScale for y position
    .attr("width", xScale.bandwidth())
    .attr("height", (d) => height - yScale(d.percentage)); // Adjusted the height calculation

// Add the x and y axes
g.append("g")
    .attr("class", "axis")
    .attr("transform", `translate(0, ${height})`)
    .call(xAxis);
g.append("g").attr("class", "axis").call(yAxis);

})
</script>