title: Why does d3 not work properly with TypeScript?
body: <p>Currently I want to learn TypeScript to create custom PowerBI visuals. My problem is that I have no idea about anything in this subject, and that seemingly a lot of the guides on TypeScript+d3 are outdated. I get a lot of errors when copying the code from the guide. For example, that methods in the guide don't exist (ScaleBand -> Bandwidth).</p>
  
  <p>I've installed all the modules (d3, @types/d3), and have created the right folder structure.</p>
  
  <p>When I compile my code it tells me that variables are implicitly any. Now I want to avoid using "any", for best practice reasons, but how do I know what datatype is returned by a specific d3 method? Since JavaScript doesn't really care about datatypes I compiled my code but it doesn't work - meaning, that the model/svg doesn't show up on my html-website. It stays blank.</p>
  
  <p>Any help, or guidance as to what/where I can accomplish this?
  These are the guides I tried following:</p>
  
  <p><a href="https://square.github.io/intro-to-d3/data-binding/" rel="nofollow noreferrer">https://square.github.io/intro-to-d3/data-binding/</a> (I did this in typescript, the compiled javascript code is the same as in the guide)</p>
  
  <p><a href="https://hstefanski.wordpress.com/2015/06/07/creating-a-chart-with-d3-and-typescript-part-1/" rel="nofollow noreferrer">https://hstefanski.wordpress.com/2015/06/07/creating-a-chart-with-d3-and-typescript-part-1/</a></p>
  
  <p>My TypeScript file:</p>
  
  <pre><code>///&lt;reference path="../node_modules/@types/d3/index.d.ts"/&gt;
  import * as d3 from "d3"; //Importing d3-Module
  
  interface ISales {
    product: string;
    count: number;
  }
  let sales: ISales[] = [
    { product: "Hoodie", count: 7 },
    { product: "Jacket", count: 6 },
    { product: "Snuggie", count: 9 }
  ];
  
  let svg: any = d3.select("svg"); //Selecting &lt;svg&gt; elements
  svg.size(); //Printing count of elements in svg
  
  let rects: any = svg.selectAll("rect").data(sales); //Selecting &lt;rect&gt; elements
  rects.size(); //Printing count of elements in rect
  
  //Placeholder nodes for each datum
  let newRects: any = rects.enter();
  
  //Getting highest count
  let maxCount: any = d3.max(sales, function(d, i) {
    return d.count;
  });
  
  //Setting x-axis  --  Range is in pixels, domain is amount of elements
  let x: any = d3.scaleLinear().range([0, 300]).domain([0, maxCount]);
  
  //Setting y-axis
  let y: any = d3.scaleOrdinal().range([300, 0]).domain(
    sales.map(function(d, i) {
      return d.product;
    })
  );
  
  newRects
    .append("rect")
    .attr("x", x(0))
    .attr("y", function(d, i) {
      return y(d.product);
    })
    .attr("height", y.bandwidth())
    .attr("width", function(d, i) {
      return x(d.count);
    });
  </code></pre>
  
  <p>My html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;d3-Modeling&lt;/title&gt;
          &lt;script src=".../d3Modeling.js&gt; &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;svg width="300" height="100"&gt;
  
          &lt;/svg&gt;
  
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The compiled js file:</p>
  
  <pre><code>"use strict";
  
  Object.defineProperty(exports, "__esModule", { value: true });
  
  ///&lt;reference path="../node_modules/@types/d3/index.d.ts"/&gt;
  
  var d3 = require("d3"); //Importing d3-Module
  
  var sales = [
    { product: "Hoodie", count: 7 },
    { product: "Jacket", count: 6 },
    { product: "Snuggie", count: 9 }
  ];
  
  var svg = d3.select("svg"); //Selecting &lt;svg&gt; elements
  svg.size(); //Printing count of elements in svg
  
  var rects = svg.selectAll("rect").data(sales); //Selecting &lt;rect&gt; elements
  rects.size(); //Printing count of elements in rect
  
  //Placeholder nodes for each datum
  var newRects = rects.enter();
  
  //Getting highest count
  var maxCount = d3.max(sales, function(d, i) {
    return d.count;
  });
  
  //Setting x-axis  --  Range is in pixels, domain is amount of elements
  var x = d3.scaleLinear().range([0, 300]).domain([0, maxCount]);
  
  //Setting y-axis
  var y = d3.scaleOrdinal().range([300, 0]).domain(
    sales.map(function(d, i) {
      return d.product;
    })
  );
  
  newRects
    .append("rect")
    .attr("x", x(0))
    .attr("y", function(d, i) {
      return y(d.product);
    })
    .attr("height", y.bandwidth())
    .attr("width", function(d, i) {
      return x(d.count);
    });
  </code></pre>