add sample charts
parent
a5fcce735a
commit
8f6a0081e3
@ -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>
|
||||
|
||||
@ -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");
|
||||
*/
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
month,amt
|
||||
1,4000
|
||||
2,6000
|
||||
3,4800
|
||||
4,5100
|
||||
5,5300
|
||||
6,5700
|
||||
7,6200
|
||||
|
@ -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>
|
||||
@ -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;
|
||||
|
||||
}
|
||||
@ -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
|
||||
|
@ -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>
|
||||
|
||||
@ -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")
|
||||
|
||||
}
|
||||
@ -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
|
||||
|
@ -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>
|
||||
|
||||
@ -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")
|
||||
|
||||
Loading…
Reference in New Issue