Something wrong with the http://d3js.org/d3.v3.min.js package

[kevinsigwart]

All of sudden all my applications that reference http://d3js.org/d3.v3.min.js broke. I'm getting a d3 reference not found error. When I go to the downloaded version, that I downloaded a month or two ago, everything works fine. Was there some new push that came out sometime this past week or two?

Thanks!

[mbostock]

The most likely explanation is that you are loading D3 on a page that has an Asynchronous Module Definition (AMD) API available. In this case, as of D3 3.4.0 which was released earlier today, D3 is exported via the define function rather than as a global. For example, if you are using RequireJS, you can load D3 as follows:

require.config({
  paths: {
    d3: "http://d3js.org/d3.v3.min"
  }
});

require(["d3"], function(d3) {
  console.log(d3.version);
});

D3 does not export the global d3 when AMD is detected because that kind of defeats the purpose of using a JavaScript module loader. Although this is strictly backwards-incompatible (and I apologize for breaking your code), my hope is that you will update your code to take advantage of the new functionality.

If this didn’t solve your problem, let me know more details and I will reopen this issue. Thank you and sorry for the breakage!

[kevinsigwart]

Yep, that is probably it. I'll update the code shortly.

Thanks!

Kevin

On Fri, Jan 10, 2014 at 3:12 PM, Mike Bostock notifications@github.comwrote:

The most likely explanation is that you are loading D3 on a page that has
an Asynchronous Module Definition (AMD) APIhttps://github.com/amdjs/amdjs-api/wiki/AMDavailable. In this case, as of D3 3.4.0 which was released earlier today,
D3 is exported via the define function rather than as a global. For
example, if you are using RequireJS http://requirejs.org/, you can load
D3 as follows:

require.config({
paths: {
d3: "http://d3js.org/d3.v3.min"
}});
require(["d3"], function(d3) {
console.log(d3.version);});

D3 does not export the global d3 when AMD is detected because that kind
of defeats the purpose of using a JavaScript module loader. Although this
is strictly backwards-incompatible (and I apologize for breaking your
code), my hope is that you will update your code to take advantage of the
new functionality.

If this didn’t solve your problem, let me know more details and I will
reopen this issue. Thank you and sorry for the breakage!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1693#issuecomment-32061265
.

[jbogdani]

Hello, I'm having some problems with some d3 dependencies. Here is my code:

  require.config({
    paths: {
      d3 : '//d3js.org/d3.v3.min',
      geoprojection : '//d3js.org/d3.geo.projection.v0.min',
      topojson : '//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min'
    },
    shim:{
      topojson:{
        deps:['d3']
      },
      geoprojection:{
        deps:['d3']
      }
    }
  });

  require(['d3', 'topojson', 'geoprojection'], function(d3) {
    console.log('v. ' + d3.version);
  });

Checking on the Network panel of debugging tools I can see the three libraries are loaded in the correct order, but geoprojection is complaining that d3 is not defined! Here is what I get in the console:

Uncaught ReferenceError: d3 is not defined d3.geo.projection.v0.min.js:1
v. 3.4.2

Am I missing something simple here? What is the correct way of loading these dependencies?

Thanks

[mbostock]

The main problem here is that the d3.geo.projection plugin depends on the d3 global; it has not been updated to support AMD (require). This problem is exacerbated somewhat by the shim examples depending on jQuery exporting the jQuery global, even in the case when AMD is available (see jquery/jquery#557). (D3 does not export a global when AMD is available.)

Fortunately, it’s not too cumbersome to define an intermediate dependency ("d3.global") that defines the global so that it is available to the plugin. Like so:

require.config({
  paths: {
    "d3": "http://d3js.org/d3.v3.min",
    "d3.geo.projection": "http://d3js.org/d3.geo.projection.v0.min",
    "topojson": "http://d3js.org/topojson.v1.min"
  },
  shim: {
    "d3.geo.projection": ["d3.global"]
  }
});

define("d3.global", ["d3"], function(_) {
  d3 = _;
});

require(["d3", "topojson", "d3.geo.projection"], function(d3, topojson) {
  console.log(d3.geo.aitoff);
});

[neverfox]

I just ran into this problem with dc.js, which still assumes a d3 global. This is the key from the RequireJS docs that explains the problem:

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.

@mbostock, should that say window.d3 = _; or this.d3 = _;? It didn't work for me until I added that.

[mbostock]

D3 will export a global, but only if require is not available on the page. If you load D3 on a page with require, you must use require to load D3 rather than loading a bare script tag. If you are loading another library that requires D3 as a global, you can export it as a global after requiring it (or you could rewrite the library to not depend on a global).

[cliveb]

ReferenceError: d3 is not defined -- after moving sankey from html to js?

I tried many ways to apply Mike Bostock's RequireJS directions above to BootstrapJS without success. Appreciate help:
app http://navigator.gigaimpacts.com/
code https://github.com/cliveb/Gigaimpacts/blob/master/js/sankey.js

[neverfox]

@cliveb As I mentioned at the end of my last comment, it only worked for me if the line is window.d3 = _; or this.d3 = _;. Otherwise, I believe you're still just trapped inside of module-land.

[walterra]

Using window.d3 = _; seems to work only if the require-config is not optimized. Once I run require's optimize to create one js file, d3.geo.projection cannot find the global d3 object.

[JohnGilmore100]

Connecting to: HTTP://d3js.org/d3.v3.min.js is OK

Where can I find a link to HTTPS:://d3js.org/d3.v3.min.js ?

[cliveb]

Can't remember how I solved or hacked a d3 solution
http://navigator.xclimatechange.com/
Answer may be in the code https://github.com/cliveb/Gigaimpacts

Browser Vendors enforcing https over http notching up security for web
components keeps us on our toes.

clive || http://about.me/cliveboulton

On Fri, May 8, 2015 at 6:01 AM, JohnGilmore100 notifications@github.com
wrote:

Connecting to: HTTP://d3js.org/d3.v3.min.js is OK

Where can I find a link to HTTPS:://d3js.org/d3.v3.min.js ?

—
Reply to this email directly or view it on GitHub
#1693 (comment).

[cliveb]

I asked a Googler on Chrome Polymer/Web team how to solve this.

"Polymer/Web Components don't have anything to do with security. Imports
behave no differently then trying to pull in JS from a different domain. If
you're getting errors in your console about linking to assets on different
domains then it may be because they haven't enabled CORS headers. The
easiest solution would be to serve the library from your own domain.

As for creating a custom element that uses d3, that should be fine."

clive || http://about.me/cliveboulton

On Fri, May 8, 2015 at 7:56 AM, clive boulton clive.boulton@gmail.com
wrote:

Can't remember how I solved or hacked a d3 solution
http://navigator.xclimatechange.com/
Answer may be in the code https://github.com/cliveb/Gigaimpacts

Browser Vendors enforcing https over http notching up security for web
components keeps us on our toes.

clive || http://about.me/cliveboulton

On Fri, May 8, 2015 at 6:01 AM, JohnGilmore100 notifications@github.com
wrote:

Connecting to: HTTP://d3js.org/d3.v3.min.js is OK

Where can I find a link to HTTPS:://d3js.org/d3.v3.min.js ?

—
Reply to this email directly or view it on GitHub
#1693 (comment).

[mbostock]

Unfortunately, I haven’t yet setup HTTPS when using custom domains over GitHub Pages—I need to signup for Cloudflare or something similar. In the meantime, I recommend using a CDN that supports HTTPS, such as CDNJS:

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

[JohnGilmore100]

Thanks all.

Mike - same feedback:

• cloudflare: the latency seems to be OK, downloads reliable.
• I would like to suggest to you to also consider deploying d3 in https://ajax.googleapis.com

[kodonnell]

This may or may not be related, but when developing on the file system in firefox (i.e. not using http-server or the like) the following (as recommended by https://d3js.org/) does not work for me:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

However, using the following

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

does work. @mbostock, is the exclusion of the http: from the recommendation on https://d3js.org/ intentional? If not, it might be helpful for a large number of users to add it in.

[mbostock]

The // is a protocol-less URL, so it inherits the protocol of the hosting page. That means if won’t work if the hosting page is file:///….

[kodonnell]

Thanks. Would it make sense to prefix http: to the recommendation, as it'll possibly benefit all of the non-URL-savvy file:/// users (like myself), without harming any others?

[mbostock]

Sure, I’ve updated d3js.org and the wiki to recommend HTTPS.