Thiết kế website giá rẻ

Question

I would like to create this plot in D3.js v7.

[![enter image description here][1]][1]

To do so, I wrote the following script:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3 Histogram</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        body {
            font-family: "Arial", sans-serif;
        }
        .bar {
            fill: steelblue;
        }
        .axis-label {
            font-size: 14px;
        }
        .grid line {
            stroke: lightgray;
            stroke-opacity: 0.7;
            shape-rendering: crispEdges;
        }
        .grid path {
            stroke-width: 0;
        }
        .background-rect {
            fill: #f0f0f0;
        }
    </style>
</head>
<body>
    <script>
        // Set the dimensions and margins of the graph
        const margin = { top: 20, right: 20, bottom: 70, left: 50 },
            width = 600 - margin.left - margin.right,
            height = 600 - margin.top - margin.bottom;

        // Append the SVG object to the body of the page
        const svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        // Add a background rectangle
        svg.append("rect")
            .attr("class", "background-rect")
            .attr("width", width)
            .attr("height", height)
            .attr("fill", "#f0f0f0");

        // Parse the CSV data
        d3.csv("penguins.csv").then(function(data) {
            console.log(data)
            // Convert flipper_length_mm to numbers
            data.forEach(d => d.flipper_length_mm = +d.flipper_length_mm);

            // Set the x scale
            const x = d3.scaleLinear()
                .domain([170, 240])
                .range([0, width]);

            // Set the histogram parameters
            const histogram = d3.bin()
                .value(d => d.flipper_length_mm)
                .domain(x.domain())
                .thresholds(x.ticks(12));

            // Group the data for the bars
            const bins = histogram(data);

            // Set the y scale
            const y = d3.scaleLinear()
                .domain([0, d3.max(bins, d => d.length)])
                .range([height, 0]);

            // Add the x gridlines
            svg.append("g")
                .attr("class", "grid")
                .attr("transform", `translate(0,${height})`)
                .call(d3.axisBottom(x)
                    .tickSize(-height)
                    .tickFormat(""));

            // Add the y gridlines
            svg.append("g")
                .attr("class", "grid")
                .call(d3.axisLeft(y)
                    .tickSize(-width)
                    .tickFormat(""));

            // Append the bars
            svg.selectAll("rect.bar")
                .data(bins)
                .enter().append("rect")
                .attr("class", "bar")
                .attr("x", 1)
                .attr("transform", d => `translate(${x(d.x0)}, ${y(d.length)})`)
                .attr("width", d => x(d.x1) - x(d.x0) - 1)
                .attr("height", d => height - y(d.length));

            // Add the x axis
            svg.append("g")
                .attr("transform", `translate(0,${height})`)
                .call(d3.axisBottom(x))
                .selectAll("text")
                .attr("transform", "rotate(-45)")
                .style("text-anchor", "end");

            // Add the y axis
            svg.append("g")
                .call(d3.axisLeft(y));

            // Add axis labels
            svg.append("text")
                .attr("class", "axis-label")
                .attr("transform", `translate(${width / 2}, ${height + margin.bottom - 20})`)
                .style("text-anchor", "middle")
                .text("flipper_length_mm");

            svg.append("text")
                .attr("class", "axis-label")
                .attr("transform", "rotate(-90)")
                .attr("y", -margin.left + 20)
                .attr("x", -(height / 2))
                .style("text-anchor", "middle")
                .text("Count");
        });
    </script>
</body>
</html>

Because of character limit, I cannot include csv file in HTML file, so here it https://github.com/mwaskom/seaborn-data/blob/master/penguins.csv

However, in original seaborn histogram, y-axis is up to 80, but mine is up to 60. Why is that? I look at the code and error messages, but only saw that **Document. domain: string Deprecated symbol used, consult docs for better alternative ** How can I have the exact same histogram of seaborn shown in the first image using d3 js v7?

However
[1]: https://i.sstatic.net/TM7cZsoJ.png

Thiết kế website giá rẻ

Danh mục

Converting Seaborn into D3 Plot