---
title: examples
h1: 'd4'
lead: A friendly charting DSL for d3
---
<div class="row">
  <div class="col-md-12 col-sm-12">
    <h3>Examples</h3>
    <p>
      This section demonstrates the various, charts, features and
      parsers that come bundled with d4. The charts you
      find here can be considered the canon of charts common to
      financial and business applications. If you have an idea
      for a more exotic breed, please do submit a pull-request!
    </p>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <h4>Charts</h4>

    <p>The following list demonstrates mostly boilerplate
      examples of the common chart types. It is relatively trivial to
      make a chart type. Most of the hard work is in writing the
      features themselves.
    </p>

    {{#each charts}}
    <dl>
      <dt>{{chart}}</dt>
      {{#each pages}}
        <dd><a href ="{{relative  ../../page.dest this.dest }}">{{data.title}}</a></dd>
      {{/each}}
    </dl>
    {{/each}}
  </div>

  <div class="col-md-6 col-sm-6">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <h4>Features</h4>
        <p>A feature of a chart is a visual component, which helps convey meaning
          in the data.Charts are made up of features whether it be an xAxis, or
          a series of columns, or a contiguous line. The following list
          demonstrates some of the capabilities of these features, and how you
          might apply them in your own charts.
        </p>

        {{#each features}}
        <dl>
          <dt>{{feature}}</dt>
          {{#each pages}}
            <dd><a href ="{{relative  ../../page.dest this.dest }}">{{data.title}}</a></dd>
          {{/each}}
        </dl>
        {{/each}}

        <h4>Concepts</h4>
        <p>d4 has a series of reoccurring concepts which once understood will make using
          the library much easier. The following list demonstrates the core concepts of d4.
        </p>

        {{#each concepts}}
        <dl>
          <dt>{{concept}}</dt>
          {{#each pages}}
            <dd><a href ="{{relative  ../../page.dest this.dest }}">{{data.title}}</a></dd>
          {{/each}}
        </dl>
        {{/each}}
      </div>
    </div>
  </div>
</div>