<commit_before>## Epoch - The Fastly Charting Library
By <NAME>

### Introduction

Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two different aspects of
visualization programming: **static charts** for creating historical reports, and **real-time charts** for displaying frequently 
updating timeseries data.

### Getting Started

1. [d3](https://github.com/mbostock/d3) and [jQuery](https://github.com/jquery/jquery) are required, so make sure you are including
them in your page.
2. Locate and download the `epoch.X.Y.Z.min.js` and `epoch.X.Y.Z.min.css` files in this repository, and place
them in your project (note: `X.Y.Z` is a placeholder for the current version of Epoch).
3. Include all the required JavaScript and CSS files into your source in the usual manner (probably in the head of the HTML document).
4. Read the examples and documentation below
5. Code, let cool, and enjoy (serves millions)

### A "quick & dirty" Introduction

Here are the basic steps you need to follow to create a multiseries area chart using Epoch:

**1) Include the appropriate scripts and styles**

```html
<head>
  <!-- include jquery and d3 HERE -->
  <script src="js/jquery.min.js"></script>
  <script src="js/d3.min.js"></script>
  <script src="js/epoch.X.Y.Z.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/epoch.X.Y.Z.min.css">
</head>
```

**2) Create the a container div for the chart**

```html
<div id="area" class="category10" style="width: 700px; height: 200px;"></div>
```

* Epoch will size the chart to fix the explicit dimensions of the container
* The class name "category10" refers to the categorical color scheme to use
  when rendering the chart. Other options are `category20` (default), 
  `category20b`, and `category20c`. See the 
  [d3 categorical color docs](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
  for more information.

**3) Setup the chart's data**

```javascript
var data = [
  { label: 'Layer 1', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2} ] },
  { label: 'Layer 2', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 4} ] }
];
```

* Each type of chart has a specific data format it expects. For the most part they are
  very similar but make sure to read the documentation below to see required format
  for the type of chart you are using.

**4) Initialize, place, and draw the chart**

```javascript
var areaChartInstance = $('#area').epoch({ type: 'area', data: data });
```

* We use custom jQuery method `.epoch` to create the chart. It will automatically place it as child
  of the our container div and size it to fill the div completely.
* The `.epoch` function returns a programming interface with with to interact with the chart
  (in this example it is assigned to the `areaChartInstance` variable). Primarily you can use this to
  update the chart with new data (ex: `areaChartInstance.update(myNewData);`).


### Static Charts

Epoch's **Static** charts are implemented using d3 over a thin class hieracrchy. The classes perform common tasks (such as setting up
scales, axes, etc.) while the individual charts implement their own specialized drawing routines. 

Every static chart was built to use the same basic workflow, here's an overview:

1. Create an HTML container.
  - Epoch automagically sizes charts to fit their containers.
  - `<div id="myChart" style="width: 200px; height: 200px"></div>`
2. Fetch and format your data.
  - Each type of chart uses a specific (though often familiar) data format.<commit_msg>readmeyarg<commit_after>## Epoch - The Fastly Charting Library
By <NAME>

### Introduction

Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two different aspects of
visualization programming: **static charts** for creating historical reports, and **real-time charts** for displaying frequently 
updating timeseries data.

### Getting Started

1. [d3](https://github.com/mbostock/d3) and [jQuery](https://github.com/jquery/jquery) are required, so make sure you are including
them in your page.
2. Locate and download the `epoch.X.Y.Z.min.js` and `epoch.X.Y.Z.min.css` files in this repository, and place
them in your project (note: `X.Y.Z` is a placeholder for the current version of Epoch).
3. Include all the required JavaScript and CSS files into your source in the usual manner (probably in the head of the HTML document).
4. Read the examples and documentation below
5. Code, let cool, and enjoy (serves millions)

### A "quick & dirty" Introduction

Here are the basic steps you need to follow to create a multiseries area chart using Epoch:

**1) Include the appropriate scripts and styles**

```html
<head>
  <!-- include jquery and d3 HERE -->
  <script src="js/jquery.min.js"></script>
  <script src="js/d3.min.js"></script>
  <script src="js/epoch.X.Y.Z.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/epoch.X.Y.Z.min.css">
</head>
```

**2) Create the a container div for the chart**

```html
<div id="area" class="category10" style="width: 700px; height: 200px;"></div>
```

* Epoch will size the chart to fix the explicit dimensions of the container
* The class name "category10" refers to the categorical color scheme to use
  when rendering the chart. Other options are `category20` (default), 
  `category20b`, and `category20c`. See the 
  [d3 categorical color docs](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
  for more information.

**3) Setup the chart's data**

```javascript
var data = [
  { label: 'Layer 1', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2} ] },
  { label: 'Layer 2', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 4} ] }
];
```

* Each chart type expects a certain data format. For the most part they are very similar to
  the example given above. Some types of charts (e.g. pie, guage, heatmap) require rather
  different formats. Make sure to read the chart-by-chart documentation below to see exactly
  what each type expects.

**4) Initialize, place, and draw the chart**

```javascript
var areaChartInstance = $('#area').epoch({ type: 'area', data: data });
```

* We use custom jQuery method `.epoch` to create the chart. It will automatically place it as child
  of the our container div and size it to fill the div completely.
* The `.epoch` function returns a programming interface with with to interact with the chart
  (in this example it is assigned to the `areaChartInstance` variable). Primarily you can use this to
  update the chart with new data (ex: `areaChartInstance.update(myNewData);`).


### Static Charts

Epoch's **Static** charts are implemented using d3 over a thin class hieracrchy. The classes perform common tasks (such as setting up
scales, axes, etc.) while the individual charts implement their own specialized drawing routines. 

Every static chart was built to use the same basic workflow, here's an overview:

1. Create an HTML container.
  - Epoch automagically sizes charts to fit their containers.
  - `<div id="myChart" style="width: 200px; height: 200px"></div>`
2. Fetch and format your data.
  - Each type of chart uses a specific (though often familiar) data format.
{'fraction_non_alphanumeric': 0.11221395092362835, 'fraction_numerical': 0.01488833746898263, 'mean_word_length': 4.242052023121388, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1805924', 'n_tokens_mistral': 2209, 'n_tokens_neox': 2090, 'n_words': 988}