Skip to content

use latest d3 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BigBlueHat merged 12 commits into from
Mar 27, 2026
Merged

use latest d3 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bc6b3e6
Upgrade d3 to v7; refactor to accomodate.
BigBlueHat Feb 20, 2026
2009646
Fix tree layout to use whole tree.
BigBlueHat Feb 23, 2026
8fc7ae1
Switch to tippy.js for tooltips.
BigBlueHat Feb 23, 2026
79e73d1
Bring in tippy.js CSS.
BigBlueHat Feb 23, 2026
fdb1d04
Add package-lock.json.
BigBlueHat Feb 23, 2026
ee75c4d
Match original tooltip styles.
BigBlueHat Feb 23, 2026
8aa2643
Update `authors` in package.json.
BigBlueHat Feb 23, 2026
d5bcdd7
Update README examples to math latest.
BigBlueHat Feb 23, 2026
1a965ec
Use ESM; specify this is a browser library.
BigBlueHat Feb 23, 2026
1105594
Set `files` in package.json to include all of `dist/`.
BigBlueHat Feb 23, 2026
ce1e7cf
Add build:example.
BigBlueHat Feb 25, 2026
01d72dc
Update package.json description.
BigBlueHat Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ node_modules

# Optional REPL history
.node_repl_history
dist/*.js
dist/*.map
dist/*
example/dist/*

example/bundle.js
15 changes: 7 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,14 @@ To initialize, simply load data into the exported `jsonldVis` function:
```js
import d3 from 'd3';
import jsonldVis from 'jsonld-vis';
jsonldVis(d3);

d3.json('example.json', (err, data) => {
if (err) return console.warn(err);
d3.jsonldVis(data, '#graph', { w: 800, h: 600, maxLabelWidth: 250 });
});
jsonldVis(d3, data, '#graph');

// OR override some layout options
jsonldVis(d3, data, '#graph', { w: 900, h: 700, maxLabelWidth: 350 });
```

#### `d3.jsonldVis(data, querySelector[, config])`
#### `jsonldVis(d3, data, querySelector[, config])`

Where the optional `config` variable is as follows:

Expand All @@ -40,7 +39,7 @@ Where the optional `config` variable is as follows:
w: 800, // width
maxLabelWidth: 250, // maximum label width
transitionDuration: 750, // transition duration, in ms
transitionEase: 'cubic-in-out', // transition easing function
transitionEase: d3.easeCubicInOut, // transition easing function
minRadius: 5 // minimum node radius
scalingFactor: 2 // factor to scale node sizes
}
Expand All @@ -52,7 +51,7 @@ must have horizontal scroll enabled:

```css
query-selector {
overflow-x: autho;
overflow-x: auto;
}
```

Expand Down
Empty file added example/dist/.gitkeep
View file
Open in desktop
Empty file.
4 changes: 2 additions & 2 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="dist/index.css">
<title>jsonld-vis example</title>
</head>
<body>
<div class="container">
<div id="graph"></div>
</div>

<script src="./bundle.js"></script>
<script src="./dist/index.js"></script>
</body>
</html>
6 changes: 2 additions & 4 deletions example/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import d3 from 'd3';
import * as d3 from 'd3';
import jsonldVis from '../src/';
import data from './example.json';

jsonldVis(d3);

d3.jsonldVis(data, '#graph', {
jsonldVis(d3, data, '#graph', {
w: 800,
h: 600,
maxLabelWidth: 250,
Expand Down
Loading