D3 Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order Book Visualization</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .axis path,
        .axis line {
            fill: none;
            shape-rendering: crispEdges;
        }
    </style>
</head>
<body>
    <svg width="800" height="400"></svg>
    <script>
        let orderBookStateVis = {
            MinY: 100,  // Example value
            MaxY: 300,  // Example value
            MinX: -100,   // Example value
            MaxX: 100     // Example value
        };

        // Define the chart dimensions
        const svg = d3.select("svg"),
            margin = { top: 100, right: 30, bottom: 40, left: 40 },
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom;

        const g = svg.append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        const y = d3.scaleLinear()
            .domain([orderBookStateVis.MinY, orderBookStateVis.MaxY])
            .range([height, 0]);

        const x = d3.scaleLinear()
            .domain([orderBookStateVis.MinX, orderBookStateVis.MaxX])
            .range([0, width]);

        const yAxis = g.append("g")
            .attr("class", "y-axis")
            .call(d3.axisLeft(y));

        const xAxis = g.append("g")
            .attr("class", "x-axis")
            .call(d3.axisBottom(x).tickSizeOuter(0))
            .attr("transform", `translate(0,${height})`);

        // Zoom behavior
        const zoom = d3.zoom()
            .scaleExtent([0.5, 5])
            .translateExtent([[0, 0], [width, height]])
            .extent([[0, 0], [width, height]])
            .on("zoom", zoomed);

        svg.call(zoom);

        // Reset view function
        function resetZoom() {
            svg.transition().duration(750).call(zoom.transform,...

CSS

#chart rect {
    fill: steelblue;
}

#chart text {
    fill: white;
    font: 10px Helvetica;
    text-anchor: end;
}