chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append(defs);
const view = svg.append("rect")
.attr("class", "view")
.attr("x", 0.5)
.attr("y", 0.5)
.attr("width", width - 1)
.attr("height", height - 1);
const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis);
const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis);
const zoom = d3.zoom()
.scaleExtent([1, 40])
.translateExtent([[-100, -100], [width + 90, height + 100]])
.filter(filter)
.on("zoom", zoomed);
return Object.assign(svg.call(zoom).node(), {reset});
function zoomed({ transform }) {
view.attr("transform", transform);
gX.call(xAxis.scale(transform.rescaleX(x)));
gY.call(yAxis.scale(transform.rescaleY(y)));
}
function reset() {
svg.transition()
.duration(750)
.call(zoom.transform, d3.zoomIdentity);
}
// prevent scrolling then apply the default filter
function filter(event) {
event.preventDefault();
return (!event.ctrlKey || event.type === 'wheel') && !event.button;
}
}
defs = () => svg`<defs>
<style>
.axis .domain { display: none; }
.axis line { stroke-opacity: 0.3; shape-rendering: crispEdges; }
.view { fill: url(#gradient); stroke: #000; }
</style>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0.0%" stop-color="#2c7bb6"></stop>
<stop offset="12.5%" stop-color="#00a6ca"></stop>
<stop offset="25.0%" stop-color="#00ccbc"></stop>
<stop offset="37.5%" stop-color="#90eb9d"></stop>
<stop offset="50.0%" stop-color="#ffff8c"></stop>
<stop offset="62.5%" stop-color="#f9d057"></stop>
<stop offset="75.0%" stop-color="#f29e2e"></stop>
<stop offset="87.5%" stop-color="#e76818"></stop>
<stop offset="100.0%" stop-color="#d7191c"></stop>
</linearGradient>
`
x = d3.scaleLinear()
.domain(dataList .map(d => d.time))
.range([0, width - 0]);
y = d3.scaleLinear()
.domain([-1, height + 1])
.range([-1, height + 1])
xAxis = d3.axisBottom(x)
.ticks(((width + 2) / (height + 2)) * 10)
.tickSize(height)
.tickPadding(8 - height)
yAxis = d3.axisRight(y)
.ticks(10)
.tickSize(width)
.tickPadding(8 - width)
dataList = [
{
"time": 1695322980000, "open": 26600.834920405647, "close": 26601.378371701434, "low": 26600.834920405647, "high": 26601.378371701434
}, {
"time": 1695323160000, "open": 26601.378371701434, "close": 26581.34522680538, "low": 26581.34522680538, "high": 26601.378371701434
}, {
"time": 1695323340000, "open": 26581.34522680538, "close": 26581.206174967305, "low": 26581.206174967305, "high": 26581.757586236912
}, {
"time": 1695323520000, "open": 26581.206174967305, "close": 26565.0841932792, "low": 26565.0841932792, "high": 26581.206174967305
}, {
"time": 1695323700000, "open": 26565.0841932792, "close": 26568.70537022083, "low": 26565.0841932792, "high": 26568.964577799437
}, {
"time": 1695323880000, "open": 26568.70537022083, "close": 26569.072300083684, "low": 26568.70537022083, "high": 26570.43549305131
}, {
"time": 1695324060000, "open": 26569.072300083684, "close": 26574.685938501352, "low": 26569.072300083684, "high": 26574.98085671254
}, {
"time": 1695324240000, "open": 26574.685938501352, "close": 26585.471941363252, "low": 26574.685938501352, "high": 26589.19497011135
}, {
"time": 1695324420000, "open": 26585.471941363252, "close": 26585.725963152596, "low": 26584.598098246315, "high": 26585.725963152596
}, {
"time": 1695324600000, "open": 26585.725963152596, "close": 26585.321679228666, "low": 26584.574917166454, "high": 26585.725963152596
}, {
"time": 1695324780000, "open": 26585.321679228666, "close": 26584.396819974452, "low": 26580.128572547364, "high": 26585.321679228666
}, {
"time": 1695324960000, "open": 26584.396819974452, "close": 26590.415282724185, "low": 26583.969255107877, "high": 26590.415282724185
}, {
"time": 1695325140000, "open": 26590.415282724185, "close": 26584.871892473722, "low": 26584.871892473722, "high": 26590.415282724185
}, {
"time": 1695325320000, "open": 26584.871892473722, "close": 26588.00615680379, "low": 26576.577031490957, "high": 26588.00615680379
}, {
"time": 1695325500000, "open": 26588.00615680379, "close": 26603.142477050842, "low": 26586.610200393276, "high": 26603.142477050842
}, {
"time": 1695325680000, "open": 26603.142477050842, "close": 26597.164658200396, "low": 26597.164658200396, "high": 26603.142477050842
}, {
"time": 1695325860000, "open": 26597.164658200396, "close": 26596.22850585899, "low": 26596.22850585899, "high": 26600.592355822886
}, {
"time": 1695326040000, "open": 26596.22850585899, "close": 26603.566695492875, "low": 26596.22850585899, "high": 26603.566695492875
}, {
"time": 1695326220000, "open": 26603.566695492875, "close": 26616.06746410818, "low": 26603.19583978798, "high": 26620.59755745156
}, { "time": 1695326400000, "open": 26616.06746410818, "close": 26602.5615872578, "low": 26596.623359721743, "high": 26616.06746410818 }];
height = 500
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.
