<commit_before>.container.sidemenu
  .row
    .large-3.medium-4.columns.column-menu
      .side-bar
        %ul.side-nav
          %li GETTING STARTED
          %li
            %a( href="#setup" ) 1. Setup
          %li
            %a( href="#generate" ) 2. Generate chart
          %li
            %a( href="#customize" ) 3. Customize chart
          %li
            %a( href="#api" ) 4. Use APIs
          %li
            %a( href="#style" ) 5. Customize style
          %li
            %a( href="#more" ) 6. And more..

    .large-9.medium-8.columns.column-content
      %section
        %h2 Getting Started
        %p In this guide, we are going to show you how to get started with C3.

      %hr

      %section
        %h3
          %a( href="#setup" ) 1. Setup
        %p Download the latest version here:
        %ul
          %li <a href="https://github.com/c3js/c3/releases/latest" target="_blank">https://github.com/c3js/c3/releases/latest</a>
        %p Installing by Bower/Component is also available with the name <span class="code">c3</span>.

        %p Then, load the scripts and css:

        .sourcecode.highlight
          %pre
            %code.html.xml
              :preserve
                <span class="comment">&lt;!-- Load c3.css --&gt;</span>
                <span class="tag">&lt;<span class="title">link</span> <span class="attribute">href</span>=<span class="value">"/path/to/c3.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span>&gt;</span>

                <span class="comment">&lt;!-- Load d3.js and c3.js --&gt;</span>
                <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/path/to/d3.v3.min.js"</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
                <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/path/to/c3.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>

        %p C3 depends on D3, so please load D3 too.

      %hr

      %section
        %h3
          %a( href="#generate" ) 2. Generate Chart
        %p C3 generates a chart by calling <span class="code">generate()</span> with the argument object, and an element including the chart will insert into the element specified as a selector in that argument as <span class="code">bindto</span>.

        %p Prepare the element to bind the chart:
        .sourcecode.highlight
          %pre
            %code.html.xml
              :preserve
                <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"chart"</span>&gt;&lt;/<span class="title">div</span>&gt;</span>

        %p And, call <span class="code">generate()</span> with arguments:

        .sourcecode.highlight
          %pre
            %code.javascript
              :preserve
                var chart = c3.generate({
                    bindto: '#chart',
                    data: {
                      columns: [
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 50, 20, 10, 40, 15, 25]
                      ]
                    }
                });

        %p C3 supports the asynchronous module definition (AMD) API. If you use <a href="http://requirejs.org/" target="_blank">RequireJS</a>, you can load like this:

        .sourcecode.highlight
          %pre
            %code.javascript
              :preserve
                require.config({
                  baseUrl: '/js',
                  paths: {
                    d3: "http://d3js.org/d3.v3.min"
                  }
                });

                require(["d3", "c3"], function(d3, c3) {
                  c3.generate({
                    ...
                  });
                });
<commit_msg>docs: update D3 deps in getting started guide (#2334)<commit_after>.container.sidemenu
  .row
    .large-3.medium-4.columns.column-menu
      .side-bar
        %ul.side-nav
          %li GETTING STARTED
          %li
            %a( href="#setup" ) 1. Setup
          %li
            %a( href="#generate" ) 2. Generate chart
          %li
            %a( href="#customize" ) 3. Customize chart
          %li
            %a( href="#api" ) 4. Use APIs
          %li
            %a( href="#style" ) 5. Customize style
          %li
            %a( href="#more" ) 6. And more..

    .large-9.medium-8.columns.column-content
      %section
        %h2 Getting Started
        %p In this guide, we are going to show you how to get started with C3.

      %hr

      %section
        %h3
          %a( href="#setup" ) 1. Setup
        %p Download the latest version here:
        %ul
          %li <a href="https://github.com/c3js/c3/releases/latest" target="_blank">https://github.com/c3js/c3/releases/latest</a>
        %p Installing by Bower/Component is also available with the name <span class="code">c3</span>.

        %p Then, load the scripts and css:

        .sourcecode.highlight
          %pre
            %code.html.xml
              :preserve
                <span class="comment">&lt;!-- Load c3.css --&gt;</span>
                <span class="tag">&lt;<span class="title">link</span> <span class="attribute">href</span>=<span class="value">"/path/to/c3.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span>&gt;</span>

                <span class="comment">&lt;!-- Load d3.js and c3.js --&gt;</span>
                <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/path/to/d3.v4.min.js"</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
                <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/path/to/c3.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>

        %p C3 depends on D3, so please load D3 too.

      %hr

      %section
        %h3
          %a( href="#generate" ) 2. Generate Chart
        %p C3 generates a chart by calling <span class="code">generate()</span> with the argument object, and an element including the chart will insert into the element specified as a selector in that argument as <span class="code">bindto</span>.

        %p Prepare the element to bind the chart:
        .sourcecode.highlight
          %pre
            %code.html.xml
              :preserve
                <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"chart"</span>&gt;&lt;/<span class="title">div</span>&gt;</span>

        %p And, call <span class="code">generate()</span> with arguments:

        .sourcecode.highlight
          %pre
            %code.javascript
              :preserve
                var chart = c3.generate({
                    bindto: '#chart',
                    data: {
                      columns: [
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 50, 20, 10, 40, 15, 25]
                      ]
                    }
                });

        %p C3 supports the asynchronous module definition (AMD) API. If you use <a href="http://requirejs.org/" target="_blank">RequireJS</a>, you can load like this:

        .sourcecode.highlight
          %pre
            %code.javascript
              :preserve
                require.config({
                  baseUrl: '/js',
                  paths: {
                    d3: "http://d3js.org/d3.v4.min"
                  }
                });

                require(["d3", "c3"], function(d3, c3) {
                  c3.generate({
                    ...
                  });
                });

{'fraction_non_alphanumeric': 0.15813140144891333, 'fraction_numerical': 0.0193604796402698, 'mean_word_length': 1.7638936831204695, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 135, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2986906', 'n_tokens_mistral': 2484, 'n_tokens_neox': 2251, 'n_words': 574}