added text effect and bar chart

Lelseac · Dec 2, 2024 · 771167f · 771167f
1 parent efbac3b
commit 771167f
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 2 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -15,15 +15,21 @@
   <body>
     <main>
       <header>
-        <h1>Chelsea Long is a journalist based in Berkeley, California.</h1>
+        <!-- <h1>Chelsea Long is a journalist based in Berkeley, California.</h1> -->
+        <h1>Chelsea Long is a journalist who
+          <span
+             class="txt-rotate"
+             data-period="2000"
+             data-rotate='[ "writes.", "analyzes data.", " will eventually make cool graphics."]'></span>
+        </h1>
       <nav>
         <ul> 
           <li><a href="https://github.com/Lelseac">Github</a></li>
           <li><a href="https://www.linkedin.com/in/chelseablong/">Linkedin</a></li>
         </ul>
       </nav>             
         <p>Chelsea Long is a master's student at UC Berkeley's Graduate School of Journalism.</p> 
-        <p>This summer, she'll join the Mississippi Center for Investigative Reporting team at Mississippi Today as a data reporting intern.</p> 
+        <p>This summer, she'll join the Investigative Reporting team at Mississippi Today as an investigative reporting intern.</p> 
         <p>She was born and raised on Florida's Space Coast and received her bachelor's degree from Florida State Univeristy.
         </p>
         <p>Here's her <a href="file:///Users/chelsealong/Desktop/Job%20Applications/Chelsea%20Long_Resume.pdf">resume</a>.</p>
@@ -79,6 +85,76 @@ <h2>Other Clips</h2>
           </ul>
       </section>
 
+      <section>
+        <h2>Class Projects</h2>
+        <ul>
+          <li><a href="projects/d3_bar_chart/">D3 bar chart showing seafarer deaths.</a></li>
+        </ul>
+    </section>
+
     </main>  
+
+    <script>
+
+var TxtRotate = function(el, toRotate, period) {
+  this.toRotate = toRotate;
+  this.el = el;
+  this.loopNum = 0;
+  this.period = parseInt(period, 10) || 2000;
+  this.txt = '';
+  this.tick();
+  this.isDeleting = false;
+};
+
+TxtRotate.prototype.tick = function() {
+  var i = this.loopNum % this.toRotate.length;
+  var fullTxt = this.toRotate[i];
+
+  if (this.isDeleting) {
+    this.txt = fullTxt.substring(0, this.txt.length - 1);
+  } else {
+    this.txt = fullTxt.substring(0, this.txt.length + 1);
+  }
+
+  var colours = ["red", "green", "blue", "yellow", "orange"]
+  this.el.innerHTML = '<span class="wrap" style="color: ' + colours[i] + '">'+this.txt+'</span>';
+
+  var that = this;
+  var delta = 300 - Math.random() * 100;
+
+  if (this.isDeleting) { delta /= 2; }
+
+  if (!this.isDeleting && this.txt === fullTxt) {
+    delta = this.period;
+    this.isDeleting = true;
+  } else if (this.isDeleting && this.txt === '') {
+    this.isDeleting = false;
+    this.loopNum++;
+    delta = 500;
+  }
+
+  setTimeout(function() {
+    that.tick();
+  }, delta);
+};
+
+window.onload = function() {
+  var elements = document.getElementsByClassName('txt-rotate');
+  for (var i=0; i<elements.length; i++) {
+    var toRotate = elements[i].getAttribute('data-rotate');
+    var period = elements[i].getAttribute('data-period');
+    if (toRotate) {
+      new TxtRotate(elements[i], JSON.parse(toRotate), period);
+    }
+  }
+  // INJECT CSS
+  var css = document.createElement("style");
+  css.type = "text/css";
+  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
+  document.body.appendChild(css);
+};
+
+
+    </script>
   </body>
 </html>
diff --git a/projects/d3_bar_chart/d3-chart-hw.csv b/projects/d3_bar_chart/d3-chart-hw.csv
@@ -0,0 +1,15 @@
+cause,count
+Unknown,24
+Cardiovascular condition,13
+Cardiac arrest,10
+Suicide,4
+Unknown ,1
+Suicide ,1
+Severe burns and steam inhalation,1
+Sepsis,1
+Respitory infection,1
+Pulmonary thromboesolism,1
+Induced abortion,1
+Hypovolemic shock,1
+Febrile thrombocytopenia,1
+Aortic dissection,1
diff --git a/projects/d3_bar_chart/index.html b/projects/d3_bar_chart/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bar Chart</title>
+</head>
+<body>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+    <script>
+
+        const width =  800;
+        const height = 800;
+        const margin = {top: 10, right: 10, bottom: 120, left: 230}; 
+
+        const svg = d3.select("body")
+            .append("svg")
+            .attr("width", width)
+            .attr("height", height);
+
+        const g = svg.append("g")
+            .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+        const scaleY = d3.scaleBand()
+            .rangeRound([margin.top, height - margin.top - margin.bottom])
+            .padding(0.1);
+
+        const scaleX = d3.scaleLinear()
+            .range([0, width - margin.left - margin.right]);
+
+        d3.csv("d3-chart-hw.csv").then(function (data) {
+
+            data.forEach(function(d){
+                d.count= +d.count;
+            })
+
+            data = data.sort((a,b)=> (a.cause - b.cause)); 
+
+            scaleY.domain(data.map(d => d.cause));
+            scaleX.domain([0, d3.max(data, d => d.count)]);
+
+            g.selectAll(".bar")
+                .data(data)
+                .enter()
+                .append("rect")
+                .attr("x", 0)
+                .attr("y", d => scaleY(d.cause))
+                .attr("width", d => scaleX(d.count))
+                .attr("height", d => scaleY.bandwidth())
+                .attr("fill", "red");
+
+            svg.append("g")
+                .attr("transform",`translate(${margin.left},${height - margin.bottom})` )
+                .call(d3.axisBottom(scaleX))
+                .selectAll("text")
+                // .attr("transform", "rotate(-60)")
+                .attr("text-anchor", "middle");
+
+
+            svg.append("g")
+                .attr("transform",`translate(${margin.left},${margin.top})` )
+                .call(d3.axisLeft(scaleY));
+        })
+
+        //how do i add a title and label fo x and y axis? how do I upload to github?
+
+    </script>
+</body>
+</html>