D3 ‘d3-dotmatrix’ library


I posted my initial question here (how to create a dot matrix chart with D3):
D3 Dot Matrix Chart

I received a helpful answer directing me to:
https://github.com/arpitnarechania/d3-dotmatrix

I believe I correctly installed d3-dotmatrix. Yet when I attempt to run even the sample code, nothing is generated, and I receive no error messages in the console. Any words of advice would be appreciated. I’m new to D3 and struggling. Thank you.

<!-- https://github.com/arpitnarechania/d3-dotmatrix -->
<!-- https://arpitnarechania.github.io/d3-dotmatrix/ -->

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dot Matrix Chart</title>

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="DotMatrix.js"></script>


<style>
    body {
        font: 12px Arial;
    }

    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    .tooltip {
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        font-size: 12px;
        left: 130px;
        padding: 10px;
        position: absolute;
        text-align: center;
        top: 95px;
        z-index: 10;
        display: block;
        opacity: 0;
    }

    .title {
        font-size: 16px;
    }

    #DotMatrix {
        width: 800px;
        height: 800px;
    }
</style>
<div id="DotMatrix"></div>

<script>

    // data
    var dataset =
        [
            { group: "Group 1", category: "Category 1", count: 48 },
            { group: "Group 1", category: "Category 2", count: 27 },
            { group: "Group 1", category: "Category 3", count: 12 },
            { group: "Group 1", category: "Category 4", count: 16 },
            { group: "Group 2", category: "Category 1", count: 35 },
            { group: "Group 2", category: "Category 2", count: 12 },
            { group: "Group 2", category: "Category 3", count: 16 },
            { group: "Group 2", category: "Category 4", count: 42 },
            { group: "Group 3", category: "Category 1", count: 39 },
            { group: "Group 3", category: "Category 2", count: 25 },
            { group: "Group 3", category: "Category 3", count: 26 },
            { group: "Group 3", category: "Category 4", count: 46 },
        ];

    var chartOptions = {
        dot_radius: 10,
        no_of_circles_in_a_row: 10,
        dot_padding_left: 5,
        dot_padding_right: 5,
        dot_padding_top: 5,
        dot_padding_bottom: 5
    };
    DotMatrixChart(dataset, chartOptions);

</script>

Source: JavaSript – Stack Overflow

November 24, 2021
Category : News
Tags: charts | D3.js | dot-matrix | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.