Lit application based on open-wc with d3 graph

Table of Contents

• 1. Introduction
• 2. Quickstart
• 3. References

1. Introduction

This application was initialized using npm init @open-wc. Then, instructions from Pluralsight course Build your first data visualisation with D3 were used to build the D3 graph in a separate web component.

This application was built using web components using LitElement to make that easier.

2. Quickstart

To get started:

1. Install node (which includes npm), and make sure that you have it available from your command line.

   • Note that this application was created using node v14.15.0 and npm 6.14.8. Other versions might work.

2. Clone this repository

3. From a command line, run:

   1. npm install to install all dependencies

   2. npm run start to run a local dev server

4. Load localhost:8000 in a browser

Have look add the scripts section in package.json for more stuff that you can run using npm run …​.

3. References

What are web components

• https://developer.mozilla.org/en-US/docs/Web/Web_Components

• https://www.webcomponents.org/introduction

Working with web components

• Convenience stuff for web components: https://lit-element.polymer-project.org/

• Templating library: https://lit-html.polymer-project.org/

• Quickly setup a web components project: https://open-wc.org/

Graphics library

• https://d3js.org/

The document that you’re now reading was created using

• https://asciidoctor.org/