xxxxxxxxxx
<meta charset='utf-8'>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
<title>Updating Linechart</title>
</head>
<body>
<div id="option">
<input name="updateButton" type="button" value="Update" onclick="updateData()"/>
</div>
</body>
<script>
// Define width/height, dateParser, x/yScale (just range), x/yAxes
var margin = {top: 30, right: 20, bottom: 30, left: 20}
width = 600 - margin.left - margin.right
height = 400 - margin.top - margin.bottom
var parseDate = d3.timeParse("%d-%b-%y")
var xScale = d3.scaleTime().range([0,width])
var yScale = d3.scaleLinear().range([height,0])
var xAxis = d3.axisBottom().scale(xScale).ticks(6)
var yAxis = d3.axisRight().scale(yScale).ticks(5)
// Define the line
var lineGen = d3.line()
.x(function(d){ return xScale(d.date)})
.y(function(d){ return yScale(d.close)})
// Draw SVG (adding margins) and Group to hold parts (transforming by top and left margin)
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("background-color", "lightgrey")
.attr("transform","translate(0,10)")
var g = svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`)
//Ingest the data
d3.csv("data.csv", function(data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = +d.close;
})
// Add domains to scales
xScale.domain(d3.extent(data, function(d){return d.date}))
yScale.domain([0, d3.max(data, function(d){return d.close})])
//Call the axes
g.append("g").attr("class", "axis").attr("id","xAxis")
.attr("transform",`translate(0,${height})`)
.call(xAxis)
g.append("g").attr("class", "axis").attr("id","yAxis")
.call(yAxis)
//Draw the line
g.append("path")
.attr("class","line")
.attr("d", lineGen(data))
})
function updateData(){
//Get new data
d3.csv("data_alt.csv", function(data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = +d.close;
})
//Change domains, used to create lineGen + axes
xScale.domain(d3.extent(data, function(d){ return d.date}))
yScale.domain([0,d3.max(data, function(d){return d.close})])
//Change data on line
g.select(".line")
.transition()
.duration(500)
.attr("d", lineGen(data))
g.select("#xAxis")
.transition()
.duration(500)
.call(xAxis)
g.select("#yAxis")
.transition()
.duration(500)
.call(yAxis)
})
}
</script>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js