title: d3pie.Js Pie chart error to get the script started
body: <p>I am trying to work with d3pie script but for some reason the script dosent run </p>
  
  <p>This is my html </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="./d3/d3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./d3pie.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./d3js.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="pieChart"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>and this is the js that I have written for getting the pie chart in d3js.js</p>
  
  <pre><code>var pie = new d3pie("pieChart", {
  "header": {
      "title": {
          "text": "PROYECTOS",
          "fontSize": 28,
          "font": "verdana"
      },
      "subtitle": {
          "text": "",
          "color": "#ccc",
          "fontSize": 18,
          "font": "verdana"
      },
      "titleSubtitlePadding": 7
  },
  "footer": {
      "text": "Fuente: yo",
      "color": "#ccc",
      "fontSize": 11,
      "font": "courier",
      "location": "bottom-center"
  },
  "size": {
      "canvasWidth": 682,
      "pieInnerRadius": "50%",
      "pieOuterRadius": "72%"
  },
  "data": {
      "content": [
          {
              "label": "Programación",
              "value": 6,
              "color": "#82ccfb"
          },
          {
              "label": "Blogging",
              "value": 2,
              "color": "#0e4a5a"
          },
          {
              "label": "Ilustración / Arte",
              "value": 6,
              "color": "#395197"
          },
          {
              "label": "Diseño Gráfico",
              "value": 5,
              "color": "#457cda"
          },
          {
              "label": "Rotulación",
              "value": 2,
              "color": "#b0dae1"
          },
          {
              "label": "Agricultura",
              "value": 1,
              "color": "#062831"
          },
          {
              "label": "Diseño Web",
              "value": 8,
              "color": "#2c8bb1"
          }
      ]
  },
  "labels": {
      "outer": {
          "pieDistance": 28
      },
      "inner": {
          "format": "none"
      },
      "mainLabel": {
          "font": "verdana",
          "fontSize": 17
      },
      "percentage": {
          "color": "#e1e1e1",
          "font": "verdana",
          "decimalPlaces": 0
      },
      "value": {
          "color": "#e1e1e1",
          "font": "verdana"
      },
      "lines": {
          "enabled": true,
          "style": "straight"
      }
  },
  "effects": {
      "pullOutSegmentOnClick": {
          "effect": "linear",
          "speed": 400,
          "size": 8
      }
  },
  "misc": {
      "pieCenterOffset": {
          "y": -15
      }
  },
  "callbacks": {}});
  </code></pre>
  
  <p>But when I run this code in browser I get </p>
  
  <pre><code>d3pie error: the first d3pie() param must be a valid DOM element (not jQuery) or a ID string.
  </code></pre>
  
  <p>I am new to this and will appreciate any help</p>