<commit_before>---
layout: component
title: Getting Started
namespace: introduction

example-code: |
    var data = fc.data.random.financial()(50);

    var chart = fc.chart.linearTimeSeries()
        .xDomain(fc.util.extent(data, 'date'))
        .yDomain(fc.util.extent(data, ['high', 'low']));

    var gridlines = fc.annotation.gridline();
    var candlestick = fc.series.candlestick();

    var multi = fc.series.multi()
        .series([gridlines, candlestick]);
    chart.plotArea(multi);

    d3.select('#chart')
        .append('svg')
        .style({
            height: '250px',
            width: '600px'
        })
        .datum(data)
        .call(chart);
---

## Grabbing the code

d3fc and its dependencies (D3, [css-layout](https://github.com/facebook/css-layout)) are available via npm or cdnjs.

### Installing with npm

You can install d3fc and its dependencies via npm as follows:

```
npm install d3fc
```

Once installed, you can reference the d3fc JavaScript, CSS and dependencies within an HTML page as follows:

```html
<script src="node_modules/d3fc/node_modules/d3/d3.js"></script>
<script src="node_modules/d3fc/node_modules/css-layout/dist/css-layout.js"></script>
<script src="node_modules/d3fc/dist/d3fc.js"></script>

<link href="node_modules/d3fc/dist/d3fc.css" rel="stylesheet"/>
```

### Using cdnjs

Alternatively you can link to d3fc and its dependencies directly via cdnjs:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/{{ slice package.dependencies.d3 1 }}/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-layout/{{ slice package.dependencies.css-layout 1 }}/css-layout.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/{{ package.version }}/d3fc.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/d3fc/{{ package.version }}/d3fc.css" rel="stylesheet"/>
```

## A quick chart

If you want a quick verification that everything has installed correctly, the following code will render a simple time series chart:

```html
<div id="chart"></div>
```

```js
{{{example-code}}}
```

Here is how the chart should look:

<div id="chart"></div><commit_msg>Update documentation to reference d3fc bundle<commit_after>---
layout: component
title: Getting Started
namespace: introduction

example-code: |
    var data = fc.data.random.financial()(50);

    var chart = fc.chart.linearTimeSeries()
        .xDomain(fc.util.extent(data, 'date'))
        .yDomain(fc.util.extent(data, ['high', 'low']));

    var gridlines = fc.annotation.gridline();
    var candlestick = fc.series.candlestick();

    var multi = fc.series.multi()
        .series([gridlines, candlestick]);
    chart.plotArea(multi);

    d3.select('#chart')
        .append('svg')
        .style({
            height: '250px',
            width: '600px'
        })
        .datum(data)
        .call(chart);
---

## Grabbing the code

d3fc and its dependencies are available via npm or cdnjs.

### Installing with npm

You can install d3fc and its dependencies via npm as follows:

```
npm install d3fc
```

Once installed, you can reference the d3fc JavaScript, CSS and dependencies within an HTML page as follows:

```html
<script src="node_modules/d3fc/node_modules/d3/d3.js"></script>
<script src="node_modules/d3fc/node_modules/css-layout/dist/css-layout.js"></script>
<script src="node_modules/d3fc/node_modules/svg-innerhtml/svg-innerhtml.js"></script>
<script src="node_modules/d3fc/dist/d3fc.js"></script>

<link href="node_modules/d3fc/dist/d3fc.css" rel="stylesheet"/>
```

### Using cdnjs

Alternatively you can link to d3fc and its dependencies directly via cdnjs:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/{{ package.version }}/d3fc.bundle.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/d3fc/{{ package.version }}/d3fc.min.css" rel="stylesheet"/>
```

## A quick chart

If you want a quick verification that everything has installed correctly, the following code will render a simple time series chart:

```html
<div id="chart"></div>
```

```js
{{{example-code}}}
```

Here is how the chart should look:

<div id="chart"></div>
{'fraction_non_alphanumeric': 0.15905814512253724, 'fraction_numerical': 0.014416146083613647, 'mean_word_length': 3.7905638665132337, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 7, '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': '2491105', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1359, 'n_words': 340}