Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nypl-spacetime/interactive-architecture
Interactive architecture diagrams with SVG
https://github.com/nypl-spacetime/interactive-architecture
Last synced: 3 months ago
JSON representation
Interactive architecture diagrams with SVG
- Host: GitHub
- URL: https://github.com/nypl-spacetime/interactive-architecture
- Owner: nypl-spacetime
- License: mit
- Created: 2017-03-07T19:07:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-15T21:44:54.000Z (about 7 years ago)
- Last Synced: 2024-08-01T12:17:30.925Z (6 months ago)
- Language: CSS
- Homepage: http://spacetime.nypl.org/interactive-architecture/example/
- Size: 354 KB
- Stars: 18
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - nypl-spacetime/interactive-architecture - Interactive architecture diagrams with SVG (others)
README
# interactive-architecture
Interactive architecture diagrams for JavaScript.
## Examples
- Example:
- interactive diagram: [spacetime.nypl.org/interactive-architecture/example](http://spacetime.nypl.org/interactive-architecture/example)
- source code: [`example/index.html`](example/index.html)
- SVG: [`example/example.svg`](example/example.svg)
- NYC Space/Time Directory architecture:
- interactive diagram: [spacetime.nypl.org/architecture](http://spacetime.nypl.org/architecture)
- source code: [github.com/nypl-spacetime/architecture](github.com/nypl-spacetime/architecture)
- SVG: [`architecture.svg`](https://github.com/nypl-spacetime/architecture/blob/gh-pages/architecture.svg)
## Usage
Add the following JavaScript and CSS to your HTML:
```html
```
Note: interactive-architecture needs [D3.js](https://d3js.org/) to work. You can use the version included in this repository, use a CDN, or use a local copy.
Then, add a container for the diagram:
```html
```
Finally, create the interactive architecture diagram using JavaScript:
```js
var config = {
getHref: function (link) {
return link.getAttribute('xl:href')
},
getStyle: function (href, link) {
return {
fill: 'rgba(255, 255, 255, 0)',
strokeWidth: '2px'
}
},
getPopupContents: function (href, link) {
if (href.indexOf('https://github.com') >= 0) {
return iA.gitHub.getReadme(href)
}
}
}
iA.architecture.create('#architecture', 'architecture.svg', config)
```
## Creating SVG diagrams
It's easy! Download and install [Omnigraffle](https://www.omnigroup.com/omnigraffle), create your architecture diagram and add links to each component's GitHub repository:
1. Go to the properties pane of an object;
2. Add an _Opens an URL_ action;
3. Add the HTTPS URL of the component's GitHub repository (or any other URL)
Or, if you don't want to use Omnigraffle, that's fine too! Just make sure architecture components
are contained by an `` element with an `xl:href` attribute, like so:
```html
Architecture Diagram
```
If your SVG files use different namespaces for the `href` attributes (e.g. `xlink:href`), you can override the default namespace. See below for details.
## API
### `iA.architecture.create(element, svg, [config], [callback])`
Creates an interactive diagram from a SVG URL.
#### Parameters:
- `element`: query selector of element that will hold the diagram
- `svg`: URL of SVG file
- `config` (optional): configuration object
- `callback` (optional): function that is called when SVG is loaded and diagram is successfully created
#### Configuration:
```js
var config = {
// SVG elements which contain the architecture diagram's components
// e.g. ellipse, rect, circle. Default is path.
element: 'path',
// Returns the attribute containing the component's URL. The link parameter
// is one of the diagram's SVG elements.
getHref: function (link) {
// Example:
return link.getAttribute('xlink:href')
},
// This function is called when a user clicks one the the diagram's
// components. The HTML returned by this function is displayed in a
// popup window. The return value can be a string, HTML, or a Promise
// returning HTML.
getPopupContents: function (href, link) {
// Example 1:
return iA.gitHub.getReadme(href)
// Example 2:
return '💾💾 Popup contents! 💾💾'
}
}
```
Configuration is optional; unspecified options are replaced by default options.
#### Styling:
interactive-architecture adds `interactive-architecture` class to the diagram's container element, you can use CSS to style components with links like this:
```css
.interactive-architecture a > path {
stroke: #ef5526;
stroke-width: 4px;
fill: white;
}
```
Sometimes, it might be necessary to use CSS' `!imporant` rule:
```css
.interactive-architecture a > path {
fill: red !important;
}
```
### `iA.gitHub.getReadme(org, [repo])`
Returns a Promise that will load the README.md file from the specified GitHub repository.
#### Parameters:
- `org`: GitHub username or organization of the README's repository
- `repo` (optional): name of the README's repository (if not specified, `getReadme` will assume the first parameter is a comlete repository URL)
## License
MIT