diff --git a/chart1/svgChart.html b/chart1/svgChart.html
new file mode 100644
index 0000000..fa65fb5
--- /dev/null
+++ b/chart1/svgChart.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chart1/svgChart.js b/chart1/svgChart.js
new file mode 100644
index 0000000..4ff5813
--- /dev/null
+++ b/chart1/svgChart.js
@@ -0,0 +1,32 @@
+function myFunction() {
+
+var data = [4, 8, 15, 16, 23, 42];
+var svg = d3.select("body")
+ .append('svg')
+ .attr("width",500)
+ .attr("height",200);
+
+// callback function form the string "translate(20, i*25)"
+svg.selectAll("rect")
+ .data(data)
+ .enter().append("rect")
+ .attr("transform",function(d, i) { return "translate(" + 20 + "," + i*25 + ")" })
+ .attr("fill","blue")
+ .attr("height",20)
+ .attr("width", function(d) { return d * 10 + "px"; });
+
+svg.selectAll("text")
+.data(data)
+.enter().append("text")
+.attr("transform",function(d, i) { return "translate(0," + Number(i*25+15) + ")" })
+.attr("fill",'red')
+.text(function(d) { return d });
+
+/* Transition
+var t = d3.transition()
+ .delay(2000).duration(2000);
+d3.selectAll("rect")
+ .transition(t)
+ .style("fill", "red");
+ */
+}
\ No newline at end of file
diff --git a/chart2/expensestrend.csv b/chart2/expensestrend.csv
new file mode 100644
index 0000000..10beb5c
--- /dev/null
+++ b/chart2/expensestrend.csv
@@ -0,0 +1,8 @@
+month,amt
+1,4000
+2,6000
+3,4800
+4,5100
+5,5300
+6,5700
+7,6200
\ No newline at end of file
diff --git a/chart2/svgGraphs.html b/chart2/svgGraphs.html
new file mode 100644
index 0000000..23f96d6
--- /dev/null
+++ b/chart2/svgGraphs.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/chart3/chartstyle.css b/chart3/chartstyle.css
new file mode 100644
index 0000000..2b8d974
--- /dev/null
+++ b/chart3/chartstyle.css
@@ -0,0 +1,15 @@
+.arc text {
+ font: 18px arial;
+ text-anchor: middle;
+ }
+
+ .arc path {
+ stroke: #fff;
+ }
+
+.title {
+ fill: green;
+ font-size: 24px;
+ font-weight: italic;
+
+ }
\ No newline at end of file
diff --git a/chart3/expenses.csv b/chart3/expenses.csv
new file mode 100644
index 0000000..583b3f9
--- /dev/null
+++ b/chart3/expenses.csv
@@ -0,0 +1,8 @@
+items,amt
+Fun,480.00
+Clothing,270.00
+Eating-Out,300.00
+Education,960.00
+Medical,500.0
+Utilities,300.0
+Transport,335.0
\ No newline at end of file
diff --git a/chart3/svgChart2.html b/chart3/svgChart2.html
new file mode 100644
index 0000000..7059ce1
--- /dev/null
+++ b/chart3/svgChart2.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chart3/svgChart2.js b/chart3/svgChart2.js
new file mode 100644
index 0000000..235b9cb
--- /dev/null
+++ b/chart3/svgChart2.js
@@ -0,0 +1,65 @@
+function myFunction() {
+
+ var svg = d3.select("svg"),
+ width = svg.attr("width"),
+ height = svg.attr("height"),
+ radius = Math.min(width, height) / 2;
+
+ //The SVG element is a container used to group other SVG elements.
+ var g = svg.append("g")
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+// set the color scale
+ var color = d3.scaleOrdinal([
+ 'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
+ ]);
+
+ // Compute the position of each group on the pie:
+ var pie = d3.pie().value(function(d) {
+ return d.amt;
+ });
+ //radius for the arc
+ var path = d3.arc()
+ .outerRadius(radius - 10).innerRadius(0);
+
+ //radius for the label
+ var label = d3.arc()
+ .outerRadius(radius).innerRadius(radius - 80);
+
+
+ d3.csv("expenses.csv", function(data) {
+
+ console.log(data);
+
+ /* if (error) {
+ throw error;
+ }
+ */
+
+ // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
+ var arc = g.selectAll(".arc")
+ .data(pie(data))
+ .enter()
+ .append("g")
+ .attr("class", "arc");
+
+ arc.append("path")
+ .attr("d", path)
+ .attr("fill", function(d) { return color(d.data.items); });
+
+ //console.log(arc);
+
+ arc.append("text").attr("transform", function(d) {
+ return "translate(" + label.centroid(d) + ")";
+ })
+
+ .text(function(d) { return d.data.items; });
+
+ });
+
+ svg.append("g")
+ .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
+ .append("text").text("Expenses this Month - July 2020")
+ .attr("class", "title")
+
+}
\ No newline at end of file
diff --git a/chart4/expenses.csv b/chart4/expenses.csv
new file mode 100644
index 0000000..583b3f9
--- /dev/null
+++ b/chart4/expenses.csv
@@ -0,0 +1,8 @@
+items,amt
+Fun,480.00
+Clothing,270.00
+Eating-Out,300.00
+Education,960.00
+Medical,500.0
+Utilities,300.0
+Transport,335.0
\ No newline at end of file
diff --git a/chart4/svgChart3.html b/chart4/svgChart3.html
new file mode 100644
index 0000000..2beae12
--- /dev/null
+++ b/chart4/svgChart3.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chart4/svgChart3.js b/chart4/svgChart3.js
new file mode 100644
index 0000000..278c896
--- /dev/null
+++ b/chart4/svgChart3.js
@@ -0,0 +1,60 @@
+ var svg = d3.select("svg"),
+ width = svg.attr("width"),
+ height = svg.attr("height"),
+ radius = Math.min(width, height) / 2;
+
+ var g = svg.append("g")
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+ var color = d3.scaleOrdinal([
+ 'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
+ ]);
+
+ var pie = d3.pie().value(function(d) {
+ return d.amt;
+ });
+
+ var path = d3.arc()
+ .outerRadius(radius - 10).innerRadius(0);
+
+ var label = d3.arc()
+ .outerRadius(radius).innerRadius(radius - 80);
+
+ d3.csv("expenses.csv", function(data) {
+
+ console.log(data);
+
+
+
+ /* if (error) {
+ throw error;
+ }
+ */
+ var arc = g.selectAll(".arc")
+ .data(pie(data))
+ .enter()
+ .append("g")
+ .attr("class", "arc");
+
+
+
+ arc.append("path")
+ .attr("d", path)
+ .attr("fill", function(d) { return color(d.data.items); });
+
+
+ console.log(arc);
+
+ arc.append("text").attr("transform", function(d) {
+ return "translate(" + label.centroid(d) + ")";
+ })
+
+ .text(function(d) { return d.data.items; });
+
+ });
+
+ svg.append("g")
+ .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
+ .append("text").text("Expenses this Month - July 2020")
+ .attr("class", "title")
+