nus-fintech-sg
/
DevToolKit1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add sample charts

Browse Source
main
yikth 5 years ago
parent a5fcce735a
commit 8f6a0081e3
11 changed files with 334 additions and 0 deletions
Show Stats Download Patch File Download Diff File

16
chart1/svgChart.html
Unescape Escape View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="svgChart.js"></script>
</head>
<body>
<button onclick="myFunction()">click me</button>
</body>
</html>

32
chart1/svgChart.js
Unescape Escape View File

@ -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");
*/
}

8
chart2/expensestrend.csv
Unescape Escape View File

@ -0,0 +1,8 @@
month,amt
1,4000
2,6000
3,4800
4,5100
5,5300
6,5700
7,6200
1 month amt
2 1 4000
3 2 6000
4 3 4800
5 4 5100
6 5 5300
7 6 5700
8 7 6200

69
chart2/svgGraphs.html
Unescape Escape View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
.line {
fill: none;
stroke: green;
stroke-width: 5px;
}
</style>
</head>
<body>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.month); })
.y(function(d) { return y(d.amt); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").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 + ")");
// Get the data
d3.csv("expensestrend.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.month = d.month;
d.amt = +d.amt;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.month; }));
y.domain([0, d3.max(data, function(d) { return d.amt; })]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
});
</script>
</body>
</html>

15
chart3/chartstyle.css
Unescape Escape View File

@ -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;
}

8
chart3/expenses.csv
Unescape Escape View File

@ -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
1 items amt
2 Fun 480.00
3 Clothing 270.00
4 Eating-Out 300.00
5 Education 960.00
6 Medical 500.0
7 Utilities 300.0
8 Transport 335.0

20
chart3/svgChart2.html
Unescape Escape View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="chartstyle.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="svgChart2.js"></script>
</head>
<body>
<svg width = "400" height = "450"></svg>
<button onclick="myFunction()">click me</button>
</body>
</html>

65
chart3/svgChart2.js
Unescape Escape View File

@ -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 <g> 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")
}

8
chart4/expenses.csv
Unescape Escape View File

@ -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
1 items amt
2 Fun 480.00
3 Clothing 270.00
4 Eating-Out 300.00
5 Education 960.00
6 Medical 500.0
7 Utilities 300.0
8 Transport 335.0

33
chart4/svgChart3.html
Unescape Escape View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<style>
.arc text {
font: 18px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-size: 24px;
font-weight: italic;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "450"></svg>
<script src="svgChart3.js"></script>
</body>
</html>

60
chart4/svgChart3.js
Unescape Escape View File

@ -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")
Write Preview
Loading…
Cancel
Save