Uncaught TypeError: d3.bullet is not a function

Question

Hi guys i have a problem creating a simple d3 chart for a javascript web project. This code is kind of created like in a tutorial so i don't really know why i get the error:

Uncaught TypeError: d3.bullet is not a function
as i installed d3 and am also linking the newest d3 version in the first script. I haven't seen this error before when googling or searching it on stackoverflow.

     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
 <script src="js/bullet.js"></script>
 <script>
  var margin = {top: 5, right: 40, bottom:20 , left:120},
  width = 800-margin.left - margin.right,
  height = 50-margin.top - margin.bottom;

  var chart = d3.bullet()
          .width(width)
          .height(height);

  d3.json("data/jsonFakeDaten.json", function(error, data) {
    var svg = d3.select("body").selectAll("svg")
          .data(data)
        .enter().appennd("svg")
          .attr("class","bullet")
          .attr("width",width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .call(chart);


    var title = svg.append("g")
        .style("text-anchor", "end")
        .attr("transform", "translate(-6," + height / 2 + ")");

    title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; });

    title.append("text")
      .attr("class", "subtitle")
      .attr("dy", "lem")
      .text(function (d) { return d.subtitle; });

    d3.selectAll("button").on("click", function() {
      svg.datum(randomize).call(chart.duration(1000));
    });

  });

  function randomize(d) {
    if(!d.randomizer) d.randomizer = randomizer(d);
    d.markers = d.markers.map(d.randomizer);
    d.measures = d.measures.map(d.randomizer);
    return d;
  }

  function randomizer(d) {
    var k = d3.max(d.ranges) * .2;
    return function(d) {
      return Math.max(0,d + k * (Math.random() - .5));
    };
  }
</script>

Answer 1

First thing that I've noticed is that you have a typo here:

    .enter().appennd("svg")

That could be causing some errors for you, also if you're using the bullet.js from Bostock's bl.ocks.org example, then you should be using d3.v3 not v4 because they're not compatible.