Complete Example (using jsDelivr)

This is a complete example (including SVG support) using jsDelivr CDN showing the full HTML and the resulting map.

View the other tutorials for adding features, GC Content/Skew plots, parsing GenBank files and adding custom controls.

HTML (Download)

 ...your HTML here...

Map using above HTML (as iFrame) [view in separate page]

--- # Installation --- - [Dependencies](#dependencies) - [Optional Dependency](#optional-dependency) - [Installation Methods](#installation-methods) - [Option 1: Install via npm or yarn](#option-1-install-via-npm-or-yarn) - [Option 2: Install via jsDelivr CDN](#option-2-install-via-jsdelivr-cdn) - [Available Builds](#available-builds) - [SVG Support](#svg-support) - [Installation](#installation-1) - [Add the SVG context to CGView](#add-the-svg-context-to-cgview) - [Export SVG](#export-svg) - [Complete Example (using jsDelivr)](#complete-example) - [HTML](#html-example) - [Map](#map-example) --- # Dependencies - CGView.js has only one required dependency: [D3](http://d3js.org) (Version 6 or 7). - When using CGView via script tags, D3 will have to be sourced first. ## Optional dependency - svgcanvas [[GitHub](https://github.com/zenozeng/svgcanvas), [npm](https://www.npmjs.com/package/svgcanvas)] - required only if exporting SVG maps (see [SVG Support](#svg-support) below). # Installation Methods CGView.js can be added to your project either via npm/yarn or through a CDN (jsDelivr). ## Option 1: Install via [npm](https://npmjs.com) or [yarn](https://yarnpkg.com) ```bash # Using npm npm install cgview # Using yarn yarn add cgview ``` Then import it into your project: ```js import * as CGView from 'cgview'; import 'cgview/dist/cgview.css'; ``` Note: When using npm/yarn you do not need to import D3 separately - CGView.js manages this internally. ## Option 2: Install via jsDelivr CDN Add the following to your HTML:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cgview/dist/cgview.css">
<!-- Javscript -->
<!-- Source D3 before CGView -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/cgview/dist/cgview.min.js"></script>

This will expose `CGView` as a global variable. See a complete example [below](#complete-example). # Available Builds The following files are available in the `dist/` directory of the npm package, and are also accessible via the jsDelivr CDN: ```bash # Required stylesheet - cgview.css # JavaScript (choose one format) - cgview.esm.js # ESM - cgview.esm.min.js # ESM, minified - cgview.js # IIFE - cgview.min.js # IIFE, minified ``` Use the ESM files if you are working with a modern build system or module bundler (such as Webpack, Vite, or Rollup). Use the IIFE files if you are including CGView directly in a <script> tag without a bundler. # SVG Support ## Installation To export maps as SVG files, the [svgcanvas](https://github.com/zenozeng/svgcanvas) library is required. You can install it with npm/yarn or load it directly from jsDelivr CDN. Since no IIFE (global) build is provided, you must use the ESM build. In the browser, this requires importing it as a module: ```html ``` ## Add the SVG context to CGView Once Context has been imported from svgcanvas, you can pass it into CGView when creating a new viewer: ```js // Initialize CGView with the SVG context cgv = new CGView.Viewer('#my-viewer', { SVGContext: Context, }); ``` ## Export SVG ```js // Now you can export the currently drawn map as an SVG file cgv.io.downloadSVG('cgview.svg'); ```