function update (sen_data, stock_data)
{
//update the heatmap
var g = d3.select("svg").selectAll("g#heatmap");
g.remove();
var viz = d3.select("svg#viz");
var heat_map =viz.append("g");
heat_map
.attr("width", width)
.attr("height", c_height)
.attr('id', 'heatmap')
.attr("transform",`translate(${heat_margin.left},${heat_margin.top + cellSize * 1.5})`)
.on("mouseleave", left);
drawheat(heat_map,sen_data);
//update the line chart
//update the axis
mutable x = d3.scaleTime()
.domain(d3.extent(stock_data, d => d.date))
.range([margin.left, margin.left+l_width])
mutable y = d3.scaleLinear()
.domain([d3.min(stock_data,d=>d.close), d3.max(stock_data,d=>d.close)]).nice()
.range([c_height + l_height - margin.bottom+heat_margin.top, c_height + heat_margin.top+ margin.top+30])
viz.selectAll("g.xaxis").remove()
viz.selectAll("g.yaxis").remove()
viz.append("g")
.attr("class", "xaxis")
.call(xAxis)
viz.append("g")
.attr("class", "yaxis")
.call(yAxis)
var t = d3.transition()
.duration(500)
.ease(d3.easeLinear);
d3
.select(".line")
.transition(t)
.attr("d", line(stock_data))
}
cellSize = 18
width = 1000
c_height = cellSize *9
l_width = 600
l_height = 500
legend_width = 150
legend_height = 20
timeWeek = d3.timeMonday
countDay = d => (d.getDay() + 6) % 7
format_stock = d3.format(".5")
format = d3.format("+.2")
formatDate = d3.timeFormat("%x")
formatDay = d => ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()]
formatMonth = d3.timeFormat("%b")
h_color = d3.scaleSequential(d3.interpolateRdYlGn).domain([-0.3,0.7])
axisScale = d3.scaleLinear()
.domain(h_color.domain())
.range([width-legend_width-margin.right, width-margin.right])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
