From 8f6a0081e3f00bf51bd1578052d3b83226facf68 Mon Sep 17 00:00:00 2001 From: yikth Date: Fri, 28 Aug 2020 15:59:54 +0800 Subject: [PATCH] add sample charts --- chart1/svgChart.html | 16 ++++++++++ chart1/svgChart.js | 32 +++++++++++++++++++ chart2/expensestrend.csv | 8 +++++ chart2/svgGraphs.html | 69 ++++++++++++++++++++++++++++++++++++++++ chart3/chartstyle.css | 15 +++++++++ chart3/expenses.csv | 8 +++++ chart3/svgChart2.html | 20 ++++++++++++ chart3/svgChart2.js | 65 +++++++++++++++++++++++++++++++++++++ chart4/expenses.csv | 8 +++++ chart4/svgChart3.html | 33 +++++++++++++++++++ chart4/svgChart3.js | 60 ++++++++++++++++++++++++++++++++++ 11 files changed, 334 insertions(+) create mode 100644 chart1/svgChart.html create mode 100644 chart1/svgChart.js create mode 100644 chart2/expensestrend.csv create mode 100644 chart2/svgGraphs.html create mode 100644 chart3/chartstyle.css create mode 100644 chart3/expenses.csv create mode 100644 chart3/svgChart2.html create mode 100644 chart3/svgChart2.js create mode 100644 chart4/expenses.csv create mode 100644 chart4/svgChart3.html create mode 100644 chart4/svgChart3.js 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") +