How to use d3-jetpack with d3v4? - javascript

I am trying to recreate this You Draw It graph:https://bl.ocks.org/1wheel/07d9040c3422dac16bd5be741433ff1e
It requires d3.conventions function which is in d3-jetpack which I found here: https://github.com/gka/d3-jetpack
raw d3v4 version is here: https://raw.githubusercontent.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js
^I saved this file in the same folder as my index.html.
How do I import it into my index.html for my project?
ATTEMPT 1
Here is what I tried:
<script>
var d3 = Object.assign({}, require('d3v4+jetpack.js'));
</script>
This is the error I get: Uncaught ReferenceError: require is not defined
ATTEMPT 2
Added <script src="d3v4+jetpack.js"></script> in the header of the html file.
Says d3.conventions still not found.

If you choose to go down the d3 and jetpack route together, as it seems to be the case by your references to d3v4+jetpack.js, you must not load vanilla d3 in your script.
const d3j = require('d3-jetpack/build/d3v4+jetpack');
The line above does it for me. Note that it exposes d3j instead of d3, so you will of course need to adapt your code to something like:
const x = d3j.scaleLinear();
Hope this helps you!

Related

Cannot read property 'decode' of undefined

I have been playing around with the General Transit Feed Specification - Realtime, and I am following exactly the example given on google's documentation:
https://developers.google.com/transit/gtfs-realtime/examples/nodejs-sample
for JavaScript, using my cities local transit feed, however I keep encountering the following error:
var feed = GtfsRealtimeBindings.FeedMessage.decode(body);
^
TypeError: Cannot read property 'decode' of undefined
I have a working implementation in python that follows their example for that, so I can verify with certainty that the feed is the correct format.
I am running the code using the instruction:
node index.js
My package.json includes all the relevant dependencies, and I have installed using npm the required packages.
I have searched far and wide for a solution to this error but have had no luck. Any advice?
Looking at the current example code on GitHub
(https://github.com/MobilityData/gtfs-realtime-bindings/tree/master/nodejs#example-code)
it seems you're missing transit_realtime in between:
GtfsRealtimeBindings.transit_realtime.FeedMessage.decode(body);
On the example there is a link to the github of the Javascript language binding. The github example differs from the documentation example. I figure the documentation is simply out of date.
the line in the google documentation example
var feed = GtfsRealtimeBindings.FeedMessage.decode(body);
should be var feed = GtfsRealtimeBindings.transit_realtime.FeedMessage.decode(body); note the inclusion of .transit_realtime.
Alternatively this could be expressed in the line:
var GtfsRealtimeBindings = require('gtfs-realtime-bindings');
as var GtfsRealtimeBindings = require('gtfs-realtime-bindings').transit_realtime;
and the google documentation example code beyond that line would remain as it is.
You need to import gtfs-realtime-bindings by referencing the transit_realtime property. It's a change from the old protobuf.js bindings generator, but this is done to separate namespaces.
It won't work
cont GtfsRealtimeBindings = require('gtfs-realtime-bindings');
It will:
const GtfsRealtimeBindings = require('gtfs-realtime-bindings').transit_realtime;
Now you can get feedMessage and decode it.
const { FeedMessage, FeedHeader, FeedEntity, VehiclePosition } = GtfsRealtimeBindings;

Am I initializing 'd3-context-menu.js' wrong?

I wanted to use the d3-context-menu lib but the example file wasn't working for me – the d3-context-menu code wasn't getting initialized.
I didn't know the "right" way to do it – but in my non-es6, d3 Electron/Node project I got it working through the steps below. I am no JS hero. In my searches I saw a lot of stuff about "Node edge" and "Babel transpiling" but I try hard not to dump in code and coding approaches I don't understand
Is there anything wrong with the way I am doing it?
putting the d3-context-menu.js file in my js directory, along with the associated css file in my css directory and referencing it from the main index.html
in my main script I initialize d3-context-menu.js like this:
let d3 = require('./js/d3')
let d3contextMenuLib = require('./js/d3-context-menu')
let d3ContextMenu = d3contextMenuLib(d3);
finally, I attach the event listeners to the objects that should get them (I don't need the "onOpen"/"onClose " functions shown in the example code).
.on('contextmenu', d3ContextMenu(eventMenu));

Asynchronous Mathjax SVG

I am using mpld3 to convert Matplotlib plots into D3 web embedable graphics. I am then using a JS library written on top of MathJax called svg_mathjax2.js (https://github.com/ichuang/svg_mathjax2) to apply Tex conversions.
The error I get is at this line of svg_mathjax2.js:
var svgmath = mathjaxdiv.getElementsByClassName('MathJax_SVG')
[0].getElementsByTagName('svg')[0];
It gives the error:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
Everything works fine the first time I load Mathjax, it converts the text appropriately. However, any additional calls (via AJAX) don't work.
I've posted an issue on the github page, but have not heard back. I'm not sure if this is an issue with svg_mathjax2 or mpld3. Perhaps someone familiar with MathJax can help out?
Never mind, I figured this out. It was specific to the svg_mathjax2.js.
I solved it by activating this block of code:
if (1) {
MathJax.Hub.Register.StartupHook("End Typeset", function () {
forEach(items, function (x) {
});
// remove the temporary items
var mathbucket = document.getElementById('mathjax_svg_bucket');
mathbucket.parentNode.removeChild(mathbucket);
});
}
}

react-highcharts: Cannot set property 'HighchartsAdapter' of undefined

Trying to run next example http://kirjs.github.io/react-highcharts
Stuck with line:
global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
Without it, get error
Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined
With it, obviously get
Cannot find module 'exports?HighchartsAdapter!highcharts-standalone-adapter'
So, the real question is how to include HighchartsAdapter.
P.S. The title of this question is different because it was my original google request. And I am not alone https://github.com/kirjs/react-highcharts/search?q=Cannot+set+property+%27HighchartsAdapter%27+of+undefined&type=Issues&utf8=%E2%9C%93
The original example should be bundled using webpack. Then I suppose it works fine.
If you want to use Browserify, then instead of using:
global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
var Highcharts = require("highcharts");
use next:
var Highcharts = require('highcharts-browserify');

dojo.declare: unknown base class - dojo.Stateful

So I'm learning Dojo and seeing what I can do with it - I do apologise if this is a stupid question but I can't find a solution.
My code:
dojo.require("dojo.Stateful");
dojo.declare('W.Model',dojo.Stateful,{
foo:'bar'
});
The error:
Uncaught Error: declare W.Model: unknown base class. Did you use dojo.require to pull it in?
I did use dojo.require to pull it in. What am I missing?
Edit - console.log(dojo.Stateful); returns undefined. I am using Google to hot Dojo for me - here: <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
Other classes are loading fine, just dojo.Stateful is a problem.
Do you have the full class declaration in a separate file? Or is this all inline on a page?
If you are doing it inline, wrapping the class until the page has loaded will fix the problem:
dojo.require("dojo.Stateful");
dojo.ready(function() {
var x = new dojo.Stateful();
console.log(x);
dojo.declare('some.class', dojo.Stateful, {
'x':'y'
});
});

Categories