From c400e8c531d3b7022de1e6780f4b783929d159dd Mon Sep 17 00:00:00 2001 From: Yu Cheng Date: Tue, 28 May 2024 13:37:55 -0400 Subject: [PATCH] remove javascript --- content/post/d3/d3-learning-setup.md | 42 ---------------- static/d3js/scriptstart.js | 73 ---------------------------- 2 files changed, 115 deletions(-) delete mode 100644 content/post/d3/d3-learning-setup.md delete mode 100644 static/d3js/scriptstart.js diff --git a/content/post/d3/d3-learning-setup.md b/content/post/d3/d3-learning-setup.md deleted file mode 100644 index 24fde41e..00000000 --- a/content/post/d3/d3-learning-setup.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -# 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. - -
-
- - \ No newline at end of file diff --git a/static/d3js/scriptstart.js b/static/d3js/scriptstart.js deleted file mode 100644 index 955a6e61..00000000 --- a/static/d3js/scriptstart.js +++ /dev/null @@ -1,73 +0,0 @@ -// 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); \ No newline at end of file