Unable to get basic timeline to work with unpkg libraries
chenc17 opened this issue · 4 comments
What you were expecting:
I tried to make a very simple timeline without a module bundler by following the instructions in the "Usage" section.
What happened instead:
I get the following console errors:
"ReferenceError: global is not defined
n https://unpkg.com/event-drops:1
_initialize https://unpkg.com/event-drops:1
t https://unpkg.com/event-drops:1
call https://unpkg.com/d3:2"
"Source map error: Error: request failed with status 404
Resource URL: https://unpkg.com/event-drops
Source Map URL: index.js.map"
Steps to reproduce:
Put the code in the "Related code" section below in a file called "index.html" and open it in a Firefox or Chrome browser.
Related code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event Drops Demo</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />
</head>
<body>
<h1>Event Drops Demo</h1>
<div id="eventdrops-demo" style="width: 90%;"></div>
<footer>
<p>
Released under MIT license, courtesy of <a href="http://marmelab.com/">marmelab</a>
and <a href="https://github.com/canalplus">Canal Plus</a>. More details on our
<a href="https://github.com/marmelab/EventDrops">GitHub repository</a>.
</p>
</footer>
<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/event-drops"></script>
<script id='code'>
const chart = eventDrops({});
const repositoriesData = [
{
name: 'admin-on-rest',
data: [{ date: new Date('2014/09/15 14:21:31') } /* ... */],
},
{
name: 'event-drops',
data: [{ date: new Date('2014/09/15 13:24:57') } /* ... */],
},
{
name: 'sedy',
data: [{ date: new Date('2014/09/15 13:25:12') } /* ... */],
},
];
d3
.select('#eventdrops-demo')
.data([repositoriesData])
.call(chart);
</script>
</body>
</html>
I see the same problem. You can resolve your issue by adding:
var global = global || window;
before
d3 .select('#eventdrops-demo'): .data([repositoriesData]) .call(chart);
However, even though this clears the error, the code still doesn't work (it doesn't seem to parse the data). You can force downgrade the library version to 1.0.0 :
<script src="https://unpkg.com/event-drops@1.0.0/dist/index.js"></script>
instead of:
<script src="https://unpkg.com/event-drops"></script>
and it will sort of work--at least it will paint a drop on the timeline, but it still isn't working correctly for me. (The drop doesn't get painted in the correct location vis a vis the legend, it doesn't scroll, but it will disappear if the time window for the drop is not in the range displayed on the timeline legend.)
Hmm, ok! Thanks for looking into this for me!
Just a quick follow-up.
I have these libraries working together to render eventdrops:
<script src="https://unpkg.com/d3@4.13.0/build/d3.min.js"></script>
<script src="https://unpkg.com/event-drops@1.2.0/dist/index.js"></script>
I have been unable to get newer versions working, which is disappointing since some of the features were desirable. In order to update with new data or selections, for example, I'm rendering in an iframe that I can reload with new parameters...
Hi,
I would recommend getting the latest from master and building the repo yourself.
There are a few PR I have made (which are merged) that fixes a few bugs (mentioned in this issue).
I am not a maintainer, so I cannot update NPM unfortunately.