liveBook · Manning

Live Server plugin

As explained in D3.js in Action, Third Edition

Live Server is a VS Code extension that serves local project files through a web server and can automatically reload the browser when files change.

Live Server is a VS Code extension that provides a local web server for project files. It lets browser-based D3 projects load JavaScript and data files in an environment where opening HTML files directly can trigger security errors. section 2.2

Use Live Server to prepare a simple local D3 workspace:

  • Install VS Code if needed, then install the Live Server extension. section 2.2
  • Open the project containing the HTML, JavaScript, and data files. section 2.2
  • Start the local server through the extension before running the project in a browser, and stop it when finished. section 2.2

A D3 project that loads data

Opening an HTML file directly may appear to work for simple pages, but a D3 visualization that loads a data file needs to run through a web server. Live Server supplies that local development server from VS Code. section 2.2

How D3.js in Action, Third Edition covers it

How deep it goes
Explains the browser-security rationale and installation workflow, while deferring detailed start and stop instructions to an appendix.
Examples
Uses a D3 project with HTML, JavaScript, and data files as the practical setup example.
What it assumes
Assumes a VS Code project and teaches why browser-based projects need a web server instead of direct file opening.
What you can do after
Operate VS Code's Live Server extension to run local D3 projects that load data files.
How it connects
Connects local web servers with VS Code, D3 projects, browser security, and loading data files.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.