<commit_before># Modest Canvas
Some useful chart modules using [d3js](https://d3js.org) (v4).

## Charts
* Renders svg, so no loss of resolution when zoomed
* Supports window resize and adapts to the width of the parent

### Donut Chart
* Create pretty interactive donut charts
* Supports onclick attributes
* Bounce on mouse out
* Automatic sizing of fonts based on the width of chart container
#### Illustration
![](./lib/donut_chart/donut_chart.gif)
#### Usage
```
<head>
  <script type="text/javascript" src="//path/to/d3.v4.min.js"></script>
  <script type="text/javascript" src="//path/to/donut_chart.js"></script>
  <link rel="stylesheet" type="text/css" href="//path/to/donut_chart.css">
</head>
```
```
<div class="chart_container"></div>
```
```
<script type="text/javascript">
  var dataJson = {
    values: [
      {
        category: "California",
        value: 256,
        color: '#428ab5',
        onclick: "console.log('clicked California');"
      },
      {
        category: "Oregon",
        value: 123,
        color: '#A7A7A7',
        onclick: "console.log('clicked Oregon');"
      },
      {
        category: "Unknown",
        value: 55,
        color: "#CECECE"
      }
    ],
    center_text: {
      enabled: true,
      text: "CenterText",
      color: '#428ab5'
    },
    center_subtext: {<commit_msg>add category subtext in donut example<commit_after># Modest Canvas
Some useful chart modules using [d3js](https://d3js.org) (v4).

## Charts
* Renders svg, so no loss of resolution when zoomed
* Supports window resize and adapts to the width of the parent

### Donut Chart
* Create pretty interactive donut charts
* Supports onclick attributes
* Bounce on mouse out
* Automatic sizing of fonts based on the width of chart container
#### Illustration
![](./lib/donut_chart/donut_chart.gif)
#### Usage
```
<head>
  <script type="text/javascript" src="//path/to/d3.v4.min.js"></script>
  <script type="text/javascript" src="//path/to/donut_chart.js"></script>
  <link rel="stylesheet" type="text/css" href="//path/to/donut_chart.css">
</head>
```
```
<div class="chart_container"></div>
```
```
<script type="text/javascript">
  var dataJson = {
    values: [
      {
        category: "California",
        value: 256,
        color: '#428ab5',
        onclick: "console.log('clicked California');",
        center_subtext: "Category: California"
      },
      {
        category: "Oregon",
        value: 123,
        color: '#A7A7A7',
        onclick: "console.log('clicked Oregon');",
        center_subtext: "Category: Oregon"
      },
      {
        category: "Unknown",
        value: 55,
        color: "#CECECE",
        center_subtext: "Category: Unknown"        
      }
    ],
    center_text: {
      enabled: true,
      text: "CenterText",
      color: '#428ab5'
    },
    center_subtext: {
{'fraction_non_alphanumeric': 0.15452305526223162, 'fraction_numerical': 0.01689545934530095, 'mean_word_length': 2.8561736770691994, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '580950', 'n_tokens_mistral': 956, 'n_tokens_neox': 906, 'n_words': 234}