Skip to content

Instantly share code, notes, and snippets.

@jungleyang68

jungleyang68/.update.revert

Last active June 23, 2020 02:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jungleyang68/6af9e75800598fa31cfaa7e1a5678e08 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jungleyang68/6af9e75800598fa31cfaa7e1a5678e08 to your computer and use it in GitHub Desktop.
Download ZIP
practice example of update and revert button
Raw
.update.revert
license: gpl-3.0
Raw
README.md
Raw
data-alt.csv
date close
10-May-12 99.55
8-May-12 76.86
6-May-12 67.62
4-May-12 64.48
2-May-12 60.98
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 90.28
23-Apr-12 106.70
20-Apr-12 94.98
19-Apr-12 85.44
18-Apr-12 73.34
17-Apr-12 53.70
16-Apr-12 50.13
13-Apr-12 65.23
12-Apr-12 62.77
11-Apr-12 66.20
10-Apr-12 68.44
9-Apr-12 66.23
5-Apr-12 63.68
4-Apr-12 64.31
3-Apr-12 69.32
2-Apr-12 61.63
Raw
data.csv
date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
18-Apr-12 443.34
17-Apr-12 543.70
16-Apr-12 580.13
13-Apr-12 605.23
12-Apr-12 622.77
11-Apr-12 626.20
10-Apr-12 628.44
9-Apr-12 636.23
5-Apr-12 633.68
4-Apr-12 624.31
3-Apr-12 629.32
2-Apr-12 618.63
30-Mar-12 599.55
29-Mar-12 609.86
28-Mar-12 617.62
27-Mar-12 614.48
26-Mar-12 606.98
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 16px Arial;}
path {
stroke: steelblue;
/* stroke: red;--> */
stroke-width: 2;
fill: none;
/* fill: blue; */
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: lightgrey;
/* stroke: black; */
stroke-opacity: 0;
/* stroke-opacity: 0.7; */
shape-rendering: crispEdges;
fill:black; /*文字顏色*/
}
.grid path {
stroke-width: 0;
}
.area {
/* fill: none; */
fill: pink;
stroke-width: 0; /* 寬度必須為零,不然填滿色塊會覆蓋到x,y軸 */
}
.upright {
/* width:1px;
word-wrap: break-word; */
writing-mode: vertical-rl;
text-orientation: upright;
}
text.shadow {
stroke: white;
stroke-width: 2.5px;
opacity: 0.9;
/* for shadow of text while overlaping on top of fill area */
}
<!--tip1:commnet CANT be on top on code!!!!!!!!!!!!!!-->
<!--tip2:DONT put grid on under the area, it WONT SHOW!!-->
<!-- writing-mode: vertical-rl;
text-orientation: upright;-->
}
</style>
<body>
<!-- Add button for update -->
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()" />
<input name="revertButton"
type="button"
value="Revert"
onclick="revertData()" />
</div>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 60},
// width = 1200 - margin.left - margin.right,
width = 400 - margin.left - margin.right,
// width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;//d3js.v3
//d3js.v4
//var parseTime = d3.timeParse("%d-%b-%y");
// Set the ranges-d3js.v3
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// set the ranges-d3js.v4
//var x = d3.scaleTime().range([0, width]);
//var y = d3.scaleLinear().range([height, 0]);
//var y = d3.scale.linear().range([0,height]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5)
//.orient("top").ticks(5)
.tickSize(3)
.tickFormat(d3.time.format("%b %d"));
//.tickFormat("");//With ticks and without tick labels:
//透過將x,y軸之tick格式設為空值(保留tick標記符號,但不顯示label),並且同步將x,y軸之grid線調整為透明(opacity=0)
//並將同步調整繪製格線時之tickFormat(依照x,y軸型態調整,可能為時間或數字)
//可達成x,y軸標記(隱藏x,y軸標籤文字)在內,但x,y軸的文字標籤(其實是grid的)在外側陳列方式
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(4)
//.orient("right").ticks(4)
.tickSize(3)
//.tickSize(0);//Without ticks and with tick labels:
//.tickValues([]);//Without any ticks or tick labels:
//.tickFormat("");//With ticks and without tick labels:
.tickFormat(d3.format(",.0f"));
//new code for fill area under the line(path)(BGN)
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height) //塗色的起點從圖表下方開始起算,
//.y0(0) //塗色的起點從圖表上方開始起算
.y1(function(d) { return y(d.close); });
//new code for fill area under the line(path)(END)
// Define the line
var valueline = d3.svg.line()
//.interpolate("monotone") //for smoothing the line
//tons of method for interpolate
// basis,linear,cardinal,cardinal-closed,monotone
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
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 + ")");
//"translate(" + 25 + "," + 15 + ")");
// // Define grid the axes
// var xAxisGrid = d3.svg.axis().scale(x)
// .orient("bottom").ticks(5) //選擇bottom表示，繪製格線是從下到上(bottom to top)
// .tickSize(-height, 0, 0)
// .tickFormat(d3.time.format("%b %d"))
// var yAxisGrid = d3.svg.axis().scale(y)
// .orient("left").ticks(3) //選擇left表示，繪製格線從左到右
// .tickSize(-width, 0, 0)
// .tickFormat(d3.format(",.0f"))
// // Adds grid line of x-axis
// function make_x_axis() {
// return d3.svg.axis()
// .scale(x)
// .orient("bottom") //選擇bottom表示，繪製格線是從下到上(bottom to top)
// //.orient("top") //選擇top表示，繪製格線是從上到下(top to bottom)
// .ticks(5)
// }
// // Adds grid line of y-axis
// function make_y_axis() {
// return d3.svg.axis()
// .scale(y)
// .orient("left")//選擇left表示，繪製格線從左到右
// //.orient("right") //選擇right表示，繪製格線從右到左
// .ticks(3)
// }
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
//y.domain(d3.extent(data, function(d) { return d.close; }));
//new code for fill area under the line(path)(BGN)
svg.append("path")
//.datum(data)
.attr("class", "area")
.attr("d", area(data));
//new code for fill area under the line(path)(END)
// Add the valueline path.
svg.append("path")
.attr("class", "line")
//.style("stroke-dasharray", ("3, 3")) //dash line
.style("stroke-dasharray", ("5, 5, 5, 5, 5, 5, 10, 5, 10, 5, 10, 5")) //dash line
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") //若不增加此欄位,則X座標軸會跑到圖表上方(原點為左上角)
//.style("stroke-dasharray", ("3, 3")) //將坐標軸改為dash線
//.call(xAxis);
.call(xAxis)
// .selectAll("text")
// .attr("dy", "1.5em");
//.style("text-anchor", "end") //end參數為文字標籤尾巴連結座標軸 start | middle | end
//.style("text-anchor", "start") //start參數為文字標籤起始連結座標軸
//.attr("dx", "-.8em")
// text label for the x axis
svg.append("text")
//.attr("x", width / 2 )
//.attr("y", height + margin.bottom)
.attr("transform","translate(" + (width/2) + " ," +(height+margin.bottom) + ")") //with a single line
.style("text-anchor", "middle")
.text("Date");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
//.style("stroke-dasharray", ("3, 3")) //將坐標軸改為dash線
//.call(yAxis);
.call(yAxis)
// .selectAll("text")
// .attr("dx", "-2.5em");
//.tickSize(0); //with tick with tick label(X)
// text label for the x axis
svg.append("text")
//.attr("transform", "rotate(-90)")
//.attr("y", 0 - margin.left)
//.attr("x",0 - (height / 2))
//.attr("x",0- margin.left*3/4)
.attr("x",0- margin.left*3/4)
.attr("y",height/3)
.attr("class","upright")
.attr("dy", "1em")
.text("數字")
.style("text-anchor", "middle");
//.text("Value");
// //Draw the x-axis grid
// svg.append("g")
// .attr("class", "grid")
// //但若是mkae_x_axis程式設定時，選擇orient為bottom時(從下到上繪圖)，則X軸格線須調整座標軸位置
// //將其繪圖起始位置調整至圖表左下角開始繪製(原點為左上角)
// .attr("transform", "translate(0," + height + ")") //若不增加此欄位,則X軸格線會跑到圖表上方
// //.call(xAxisGrid)
// .call(make_x_axis()
// .tickSize(-height, 0, 0)
// //.tickFormat("")
// .tickFormat(d3.time.format("%b %d"))
// )
// //Draw the y-axis grid
// svg.append("g")
// .attr("class", "grid")
// //.call(yAxisGrid)
// //若mkae_y_axis程式設定時，選擇orient為right時(從右到左開始繪圖),則Y軸格線會跑到圖表左方,
// //.attr("transform", "translate(" + width + ",0)") //須同步調整座標軸起始位置
// .call(make_y_axis()
// .tickSize(-width, 0, 0)
// //.tickFormat("")
// .tickFormat(d3.format(",.0f"))
// )
//若要增加文字陰影效果，需先列出陰影，再放上文字
// add shadowy background to tilte to the table
svg.append("text")
.attr("x", (width / 2)) //將標題置中於畫框中間
//.attr("y", 0 - (margin.top / 2)) //將標題至於上邊界的一半
.attr("y", 25) //將標題至於上邊界的一半
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.attr("class", "shadow") //shadowy background
.text("Value vs Date Graph");
// add tilte to the table
svg.append("text")
//.attr("class", "shadow") //shadowy background
.attr("x", (width / 2)) //將標題置中於畫框中間
//.attr("y", 0 - (margin.top / 2)) //將標題至於上邊界的一半
.attr("y", 25) //將標題至於上邊界的一半
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
});
function updateData() {
// Get the data again
d3.csv("data-alt.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Select the section we want to apply our changes to
var svg = d3.select("body").transition();
// Make the changes
svg.select(".area") // change the area
.duration(750)
.attr("d", area(data));
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis)
// .selectAll("text")
// .attr("dy", "1.5em");//X軸在更新資料時，都會重新移動??why???
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis)
// .selectAll("text")
// .attr("dx", "-2.5em"); //Y軸在更新資料時，卻都不會動????
});
}
function revertData() {
// Get the data again
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Select the section we want to apply our changes to
var svg = d3.select("body").transition();
// Make the changes
svg.select(".area") // change the area
.duration(750)
.attr("d", area(data));
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis)
// .selectAll("text")
// .attr("dy", "1.5em");//X軸在更新資料時，都會重新移動??why???
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis)
// .selectAll("text")
// .attr("dx", "-2.5em"); //Y軸在更新資料時，卻都不會動????
});
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment