Merge pull request #5 from fischcheng/custom_js

Fix failed build

.github/workflows/gh-pages.yml

@@ -21,7 +21,7 @@ jobs:
           extended: true
 
       - name: Build
-        run: hugo --ignoreCache --minify
+        run: hugo --minify
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

content/post/ccsm_workflow/index.md

@@ -14,7 +14,6 @@ featured: false
 draft: false
 math: true
 diagram: true
-markup: mmark
 
 projects: []
 ---

content/post/d3/index.md

@@ -0,0 +1,42 @@
+---
+# Documentation: https://docs.hugoblox.com/managing-content/
+
+title: "D3 Learning Setup"
+subtitle: ""
+summary: ""
+authors: []
+tags: []
+categories: []
+date: 2024-04-30T23:07:09-04:00
+lastmod: 2024-04-30T23:07:09-04:00
+featured: false
+draft: true
+
+# Featured image
+# To use, add an image named `featured.jpg/png` to your page's folder.
+# Focal points: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
+image:
+  caption: ""
+  focal_point: ""
+  preview_only: false
+
+# Projects (optional).
+#   Associate this post with one or more of your projects.
+#   Simply enter your project's folder or file name without extension.
+#   E.g. `projects = ["internal-project"]` references `content/project/deep-learning/index.md`.
+#   Otherwise, set `projects = []`.
+projects: []
+---
+
+
+
+I'm testing out including a D3 chart javascript. 
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<div id="viz">
+</div>
+<script type="text/javascript" src='/d3js/scriptstart.js'>
+</script>
+<!---
+{{< d3_chart src="/d3js/scriptstart.js" >}}
+{{< figure src="/img/aqi_scale.png" title="An elephant at sunset" >}}
+--->

layouts/shortcodes/d3_chart.html

@@ -0,0 +1,5 @@
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<div id="viz">
+</div>
+<script type="text/javascript" src='{{ .Get "src" }}'>
+</script>

static/d3js/scriptstart.js

@@ -0,0 +1,73 @@
+// Set dimensions and margins for the chart
+
+const margin = { top: 70, right: 30, bottom: 40, left: 80 };
+const width = 1200 - margin.left - margin.right;
+const height = 500 - margin.top - margin.bottom;
+
+// Set up the x and y scales
+
+const x = d3.scaleTime()
+  .range([0, width]);
+
+const y = d3.scaleLinear()
+  .range([height, 0]);
+
+// Create the SVG element and append it to the chart container
+
+const svg = d3.select("#viz")
+  .append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform", `translate(${margin.left},${margin.top})`);
+
+// Create a fake dataset
+
+const dataset = [
+  { date: new Date("2022-01-01"), value: 200 },
+  { date: new Date("2022-02-01"), value: 250 },
+  { date: new Date("2022-03-01"), value: 180 },
+  { date: new Date("2022-04-01"), value: 300 },
+  { date: new Date("2022-05-01"), value: 280 },
+  { date: new Date("2022-06-01"), value: 220 },
+  { date: new Date("2022-07-01"), value: 300 },
+  { date: new Date("2022-08-01"), value: 450 },
+  { date: new Date("2022-09-01"), value: 280 },
+  { date: new Date("2022-10-01"), value: 600 },
+  { date: new Date("2022-11-01"), value: 780 },
+  { date: new Date("2022-12-01"), value: 320 }
+];
+
+// Define the x and y domains
+
+x.domain(d3.extent(dataset, d => d.date));
+y.domain([0, d3.max(dataset, d => d.value)]);
+
+// Add the x-axis
+
+svg.append("g")
+  .attr("transform", `translate(0,${height})`)
+  .call(d3.axisBottom(x)
+    .ticks(d3.timeMonth.every(1)) 
+    .tickFormat(d3.timeFormat("%b %Y"))); 
+
+
+// Add the y-axis
+
+svg.append("g")
+  .call(d3.axisLeft(y))
+
+// Create the line generator
+
+const line = d3.line()
+  .x(d => x(d.date))
+  .y(d => y(d.value));
+
+// Add the line path to the SVG element
+
+svg.append("path")
+  .datum(dataset)
+  .attr("fill", "none")
+  .attr("stroke", "steelblue")
+  .attr("stroke-width", 1)
+  .attr("d", line);