arpitnarechania/d3-dotmatrix

Open Source Javascript library to render Dot Matrix Charts

d3-dotmatrix's Issues

I found some bug in readme.md

I can't draw anything using the readme.md,I found some bugs.

To use this library then, simply include d3.js, DotMatrix.js and DotMatrix.css:

<script src="/path/to/d3.min.js"></script> <script src="/path/to/dist/DotMatrix.css"></script> <script src="/path/to/dist/DotMatrix.js"></script>

1.I don't think the css file can be import in this way,right?

To use this library, you must create a container element and instantiate a new DotMatrixChart:

2.The ID is wrong.I read codes,is shoule be "DotMatrixChart".

It is my fist time use "issues" in github, and my English is not very good,Im sorry if I make some mistakes.

how to set color gradients

hi, can you please update to resize, and also how can I setup up different colors, even a gradient using a scale of 1 to 10 or groups.

Trains - red
People - blue
people in trains blue/red

React Integration

Hi! First, thank you for developing this dot-matrix D3 application.
Premise: I am quite new to D3 and frontend frameworks. I need to use this code inside a React component. Could you help me figure how this works?

Here's my current jsx component's code :

import React, {Component} from 'react';
import * as d3 from "d3";
import '../../public/assets/DotMatrix';
import '../../public/assets/DotMatrix.css';

class DotMatrixChart extends Component {
  componentDidMount() {
      this.drawChart();
  }
  drawChart() {
      //const data = this.props.data;

      const svg = d3.select("#dotMatrix").append("svg")
      .attr("width", this.props.width)
      .attr("height", this.props.height);
      
      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 chart_options = {
    dot_radius : 5,
    no_of_circles_in_a_row: 40,
        dot_padding_left : 5,
        dot_padding_right : 5,
        dot_padding_top : 5,
        dot_padding_bottom : 5
}

DotMatrixChart(dataset, chart_options);
  
}
render() {
    return <div id={"#" + this.props.id}></div>
}
}

export default DotMatrixChart;

On my App.js, I have wrapped the component into a <div id="dotMatrix"></div>

I receive the following errors from console:

Please if you can, let me know what I am doing wrong. Thank you very much in advance 🙏🏼