Charts built with D3
Published
Edited
Sep 15, 2020
chartTransition = d3.transition()
.duration(500)
.attrTween("opacity", function(){
return d3.interpolate(0.3, 1);
})
chart = {
let svg, canvas, candleSticks, pointer, zoom, candleSticksGroup, indicator,zoomBase;
zoom = d3.zoom().scaleExtent([1, 1])
.on("zoom", function(){
let transform = d3.event.transform;
transform.y = 0;
let horzLinearScaleNew = transform.rescaleX(horzLinearScale);
horzAxis.scale(horzLinearScaleNew);
candleSticksGroup.attr("transform", `translate(${transform.x},0)`);
let axis = canvas.select("g.axis.bottom")
.call(horzAxis)
.attr("transform", `translate(0, ${height})`)
axis.select(".domain").remove();
axis.selectAll("text")
.attr("fill", "white")
})
svg = d3.create("svg")
.attr("viewBox", `0 0 ${chartWidth} ${chartHeight}`)
.style("background-color", "#000066")
.style("cursor", "pointer");
svg.append("defs")
.append("pattern")
.attr("id", "bg")
.attr("width", 120)
.attr("height", 80)
.attr("patternUnits", "userSpaceOnUse")
.append("rect")
.attr("width", 120)
.attr("height", 80)
.attr("fill", "none")
.attr("stroke", "#F0F3F4")
.attr("stroke-width", 0.1)
.attr("stroke-dasharray", "5 5")
canvas = svg.append("g").classed("canvas", true).attr("transform", `translate(${margin.left}, ${margin.top})`);
candleSticksGroup = canvas.append("g").classed("candlesticks", true)
candleSticks = candleSticksGroup.selectAll("g.candlestick")
.data(newDataset)
.join("g")
.classed("candlestick", true)
.attr("transform", (d)=>{
return `translate(${horzScale(d.date)}, 0)`;
})
.attr("fill", (d)=>(d.open > d.close ? "red" : "green"))
.attr("stroke", (d)=>(d.open > d.close ? "red" : "green"))
candleSticks.append("rect")
.classed("realbody", true)
.attr("y", (d)=>{
return vertScale(d.close > d.open ? d.open : d.close);
})
.attr("x", 0)
.attr("width", horzScale.bandwidth())
.attr("height", (d)=>{
return Math.abs(d.close - d.open)
});
candleSticks.append("line")
.classed("wick", true)
.attr("x1", (d)=>(horzScale.bandwidth()/2))
.attr("y1", (d)=>vertScale(d.high))
.attr("x2", (d)=>(horzScale.bandwidth()/2))
.attr("y2", (d)=>vertScale(d.low))
.attr("stroke-width", 1)
pointer = canvas.append("g")
.classed("pointer", true)
.attr("transform", `translate(${width}, ${height})`);
pointer.append("rect")
.attr("width", margin.right)
.attr("height", 20)
.attr("fill", "green")
pointer.append("text")
.attr("fill", "white")
.attr("y", 16)
.attr("x", margin.right / 2)
.attr("font-size","1.2em")
.attr("text-anchor", "middle")
.text("0");
canvas.append("g").classed("axis right", true).call(vertAxisRight);
canvas.append("g")
.classed("axis bottom", true)
.call(horzAxis)
.attr("transform", `translate(0, ${height})`)
.selectAll("text")
.attr("fill", "white");
zoomBase = svg.append("rect")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("fill", "url(#bg)")
.call(zoom.transform, d3.zoomIdentity.translate((width-horzDist), 0))
.call(zoom)
svg.selectAll("text").attr("fill", "white")
return svg.node()
}
{
let svg = d3.create("svg")
.attr("viewBox", `0 0 ${chartWidth} ${300 + margin.top + margin.bottom}`);
let canvas = svg.append("g").classed("canvas", true).attr("transform", `translate(${margin.left}, ${margin.top})`);
canvas.append("g")
.attr("fill", "red")
.selectAll("rect")
.data(newDataset)
.join("rect")
.attr("x", (d)=>{
return horzScale(d.date);
})
.attr("y", (d)=>{
return volumesChartScale(d.close);
})
.attr("width", (d)=>{
return horzScale.bandwidth();
})
.attr("height", (d)=>{
return 300 - volumesChartScale(d.close);
})
canvas.append("g").call(volumesChartAxis);
return svg.node()
}
chartWidth = width + margin.left + margin.bottom
chartHeight = height + margin.top + margin.bottom
horzDist = newDataset.length * 10
horzScale = d3.scaleBand(newDataset.map((d)=>d.date), [0, horzDist]).padding(0.2);
horzLinearScale = d3.scaleUtc(d3.extent(newDataset, (d)=>d.date), [0,horzDist]);
horzAxis = d3.axisBottom(horzLinearScale).ticks(500).tickFormat(d3.timeFormat("%b, %Y"))
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.
