### Run Development Server with Docker (One-line)

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Start the development server using Docker in a single command. This avoids local Node.js installation. It maps the current directory to the container, sets the working directory, installs dependencies, and runs the development server.

```bash
docker run -p 8080:8080 -v $PWD:/app -w /app -it node:18 /bin/sh -c 'npm install && npm run dev'
```

--------------------------------

### Development Setup and Commands

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Clone the repository, install dependencies, and run quality checks or development server. The development server watches for changes in .js and .css files.

```bash
git clone git@github.com:thoughtworks/build-your-own-radar.git
npm install
npm run quality
npm run dev
```

--------------------------------

### Run Development Server with Docker

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Starts the development server using Docker, eliminating the need for a local Node.js installation. This command builds and runs the application within a Node.js container.

```bash
docker run -p 8080:8080 -v $PWD:/app -w /app -it node:18 \
  /bin/sh -c 'npm install && npm run dev'
```

--------------------------------

### Set Up Local Development Environment for Radar

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

This section provides bash commands to set up the local development environment for the Build Your Own Radar project. It includes cloning the repository, navigating into the directory, ensuring the correct Node.js version (18+), installing dependencies, and running the development server with hot reloading. The radar will be accessible at http://localhost:8080.

```bash
# Clone repository
git clone git@github.com:thoughtworks/build-your-own-radar.git
cd build-your-own-radar

# Use correct Node version (18+)
nvm use

# Install dependencies
npm install

# Run development server with hot reload
npm run dev
# Radar available at http://localhost:8080

```

--------------------------------

### JSON Data Input Format Example

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Example of how to format data for the radar visualization using JSON. Each object represents a 'blip' with required fields like 'name', 'ring', 'quadrant', 'isNew' or 'status', and 'description'.

```json
[
  {
    "name": "Composer",
    "ring": "adopt",
    "quadrant": "tools",
    "isNew": "TRUE",
    "description": "Although the idea of dependency management..."
  },
  {
    "name": "Canary builds",
    "ring": "trial",
    "quadrant": "techniques",
    "isNew": "FALSE",
    "description": "Many projects have external code dependencies..."
  }
]
```

--------------------------------

### CSV Data Input Format Example

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Example of how to format data for the radar visualization using CSV. It requires 'name', 'ring', 'quadrant', 'isNew' or 'status', and 'description' columns.

```csv
name,ring,quadrant,isNew,description
Composer,adopt,tools,TRUE,"Although the idea of dependency management..."
Canary builds,trial,techniques,FALSE,"Many projects have external code dependencies..."
Apache Kylin,assess,platforms,TRUE,"Apache Kylin is an open source analytics solution..."
JSF,hold,languages & frameworks,FALSE,"We continue to see teams run into trouble using JSF..."
```

--------------------------------

### CSV Blip Movement Status Example

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Example of CSV data format including the optional 'status' column to track blip movement on the radar. This replaces the 'isNew' column when movement information is desired.

```csv
name,ring,quadrant,status,description
React,adopt,languages & frameworks,No Change,"React continues to be our default choice..."
Kubernetes,adopt,platforms,Moved In,"Moving from Trial to Adopt..."
GraphQL,trial,languages & frameworks,New,"First appearance on our radar..."
Angular,assess,languages & frameworks,Moved Out,"Moving from Trial to Assess..."
```

--------------------------------

### Configure Radar Graphs with JavaScript Constants

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

This snippet demonstrates how to import and use constants and functions from the graphing configuration module. It shows how to access default values for quadrant height, width, gap, blip width, and ring/quadrant names. It also illustrates how to get the total graph size and validate the configuration, which requires exactly 4 quadrants and 1-4 rings.

```javascript
const { graphConfig, getGraphSize, isValidConfig } = require('./src/graphing/config')

// Default configuration values
console.log(graphConfig.quadrantHeight)    // 512
console.log(graphConfig.quadrantWidth)     // 512
console.log(graphConfig.quadrantsGap)      // 32
console.log(graphConfig.blipWidth)         // 22
console.log(graphConfig.minBlipWidth)      // 12

// Default rings (can be customized via RINGS env var)
console.log(graphConfig.rings)    // ['Adopt', 'Trial', 'Assess', 'Hold']

// Default quadrants (can be customized via QUADRANTS env var)
console.log(graphConfig.quadrants) // ['Techniques', 'Platforms', 'Tools', 'Languages & Frameworks']

// Get total graph size
const size = getGraphSize()  // effectiveQuadrantHeight + effectiveQuadrantWidth

// Validate configuration
if (isValidConfig()) {
  // Quadrants must equal 4, rings between 1-4
  console.log('Configuration is valid')
}
```

--------------------------------

### Deploy Radar Application using Docker

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

This section provides various Docker commands to deploy the radar application. It covers pulling the official image, running with basic Google OAuth, using an API key for public sheets, customizing quadrants and rings, mounting local files for data, integrating with Google Tag Manager, and running specific versions of the image.

```bash
# Pull the official Docker image
docker pull wwwthoughtworks/build-your-own-radar

# Basic run with Google OAuth Client ID
docker run --rm -p 8080:80 \
  -e CLIENT_ID="your-google-client-id" \
  wwwthoughtworks/build-your-own-radar:latest

# Run with API key for public sheets (no OAuth popup)
docker run --rm -p 8080:80 \
  -e CLIENT_ID="your-google-client-id" \
  -e API_KEY="your-google-api-key" \
  wwwthoughtworks/build-your-own-radar:latest

# Run with custom quadrant and ring names
docker run --rm -p 8080:80 \
  -e CLIENT_ID="your-google-client-id" \
  -e RINGS='["Use", "Experiment", "Evaluate", "Avoid"]' \
  -e QUADRANTS='["Methods", "Infrastructure", "Tooling", "Languages"]' \
  wwwthoughtworks/build-your-own-radar:latest

# Run with local CSV/JSON files mounted
docker run --rm -p 8080:80 \
  -e SERVER_NAMES="localhost 127.0.0.1" \
  -v /path/to/your/files:/opt/build-your-own-radar/files \
  wwwthoughtworks/build-your-own-radar:latest

# Access local files at:
# http://localhost:8080/files/radar.csv
# http://localhost:8080/files/radar.json

# Run with Google Tag Manager
docker run --rm -p 8080:80 \
  -e CLIENT_ID="your-google-client-id" \
  -e GTM_ID="GTM-XXXXXX" \
  wwwthoughtworks/build-your-own-radar:latest

# Run specific version
docker run --rm -p 8080:80 \
  -e CLIENT_ID="your-google-client-id" \
  wwwthoughtworks/build-your-own-radar:v1.0.0
```

--------------------------------

### Assemble and Manage a Radar with Quadrants and Rings - JavaScript

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Shows the process of creating a Radar instance, adding multiple Rings, and then creating and adding four Quadrants, each populated with Blips. It also covers managing alternative radar sheets and accessing radar data.

```javascript
const Radar = require('./src/models/radar')
const Quadrant = require('./src/models/quadrant')
const Ring = require('./src/models/ring')
const Blip = require('./src/models/blip')

// Create radar instance
const radar = new Radar()

// Create rings
const rings = [
  new Ring('Adopt', 0),
  new Ring('Trial', 1),
  new Ring('Assess', 2),
  new Ring('Hold', 3)
]
radar.addRings(rings)

// Create and populate quadrants (must add exactly 4)
const techniques = new Quadrant('Techniques')
techniques.add(new Blip('Pair Programming', rings[0], false, 'no change', '', 'Two developers working together'))

const platforms = new Quadrant('Platforms')
platforms.add(new Blip('Kubernetes', rings[0], false, 'moved in', '', 'Container orchestration'))

const tools = new Quadrant('Tools')
tools.add(new Blip('GitHub Actions', rings[1], true, 'new', '', 'CI/CD platform'))

const languages = new Quadrant('Languages & Frameworks')
languages.add(new Blip('TypeScript', rings[0], false, 'no change', '', 'Typed JavaScript'))

// Add quadrants to radar (order matters for positioning)
radar.addQuadrant(techniques)
radar.addQuadrant(platforms)
radar.addQuadrant(tools)
radar.addQuadrant(languages)

// Support for multiple radar sheets
radar.addAlternative('Q1 2024')
radar.addAlternative('Q2 2024')
radar.setCurrentSheet('Q2 2024')

// Access radar data
console.log(radar.rings())           // [Ring, Ring, Ring, Ring]
console.log(radar.quadrants())       // [{order, startAngle, quadrant}, ...]
console.log(radar.getAlternatives()) // ['Q1 2024', 'Q2 2024']
console.log(radar.getCurrentSheet()) // 'Q2 2024'
```

--------------------------------

### Run Unit Tests (npm)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Executes the project's unit tests. This command is essential for verifying the correctness of individual code components.

```bash
npm run test
```

--------------------------------

### Run Docker Image with Local CSV/JSON File

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Run the Docker image, mounting a local directory for CSV/JSON files and configuring server names. Load data via http://localhost:8080/files/<YOUR_FILE>.<EXTENSION>.

```bash
docker pull wwwthoughtworks/build-your-own-radar
docker run --rm -p 8080:80 -e SERVER_NAMES="localhost 127.0.0.1" -v /mnt/radar/files/:/opt/build-your-own-radar/files wwwthoughtworks/build-your-own-radar:latest
open http://localhost:8080
```

--------------------------------

### Create and Manage Quadrants with Blips - JavaScript

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Demonstrates how to create a Quadrant, define Rings, and add Blips to the quadrant. It shows adding single blips and multiple blips at once, and accessing quadrant properties.

```javascript
const Quadrant = require('./src/models/quadrant')
const Blip = require('./src/models/blip')
const Ring = require('./src/models/ring')

// Create a quadrant
const toolsQuadrant = new Quadrant('Tools')

// Create rings
const adoptRing = new Ring('Adopt', 0)
const trialRing = new Ring('Trial', 1)

// Add blips to the quadrant
const dockerBlip = new Blip('Docker', adoptRing, false, 'no change', '', 'Container platform')
const podmanBlip = new Blip('Podman', trialRing, true, 'new', '', 'Docker alternative')

toolsQuadrant.add(dockerBlip)
toolsQuadrant.add(podmanBlip)

// Or add multiple blips at once
toolsQuadrant.add([dockerBlip, podmanBlip])

// Get quadrant name and blips
console.log(toolsQuadrant.name())   // 'Tools'
console.log(toolsQuadrant.blips())  // [dockerBlip, podmanBlip]
```

--------------------------------

### Run Tests with Coverage (npm)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Runs unit tests and generates a code coverage report. This helps identify which parts of the codebase are covered by tests.

```bash
npm run test:coverage
```

--------------------------------

### Factory - Main Entry Point (JavaScript)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

The Factory module serves as the primary entry point for building radars. It automatically detects the input data type (Google Sheet, CSV, or JSON) from URL parameters and initiates the radar construction process.

```javascript
const Factory = require('./src/util/factory')

// Build radar from URL query parameter
// URL format: https://your-radar.com?sheetId=<google-sheet-id-or-csv-url>
const factory = new Factory()
factory.build()

// The factory automatically detects input type:
// - Google Sheets: URLs containing 'google.com' with sheet ID
// - CSV files: URLs ending with '.csv'
// - JSON files: URLs ending with '.json'
```

--------------------------------

### Configure Radar Environment Variables

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

This section details the environment variables used to configure the radar's behavior. It explains required variables like CLIENT_ID for authentication and optional variables for API keys, custom ring and quadrant names, Google Tag Manager, Adobe Launch, and custom asset paths. It also includes commands for building the application for development and production, and for running the development server.

```bash
# Required for private Google Sheets authentication
export CLIENT_ID="your-google-oauth-client-id.apps.googleusercontent.com"

# Optional: API key for public sheets (bypasses OAuth for public sheets)
export API_KEY="your-google-api-key"

# Optional: Custom ring names (JSON array, max 4)
export RINGS='["Adopt", "Trial", "Assess", "Hold"]'

# Optional: Custom quadrant names (JSON array, exactly 4)
export QUADRANTS='["Techniques", "Platforms", "Tools", "Languages & Frameworks"]'

# Optional: Google Tag Manager
export GTM_ID="GTM-XXXXXX"

# Optional: Adobe Launch analytics
export ADOBE_LAUNCH_SCRIPT_URL="https://your-adobe-launch-url"

# Optional: Custom asset path for webpack
export ASSET_PATH="/custom/path/"

# Build for development
npm run build:dev

# Build for production
npm run build:prod

# Run development server
npm run dev
```

--------------------------------

### Blip Model Usage (JavaScript)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Demonstrates how to use the Blip model to represent individual technology entries on the radar. It shows the creation of rings and blips, and how to access blip properties like name, ring, and status.

```javascript
const Blip = require('./src/models/blip')
const Ring = require('./src/models/ring')

// Create a ring first (name, order)
const adoptRing = new Ring('Adopt', 0)
const trialRing = new Ring('Trial', 1)

// Create blips (name, ring, isNew, status, topic, description)
const reactBlip = new Blip(
  'React',
  adoptRing,
  false,           // isNew
  'no change',     // status: 'new', 'moved in', 'moved out', 'no change'
  'UI Framework',  // topic (optional)
  '<p>React is our default choice for building user interfaces...</p>'
)

// Access blip properties
console.log(reactBlip.name())        // 'React'
console.log(reactBlip.ring().name()) // 'Adopt'
console.log(reactBlip.isNew())       // false
console.log(reactBlip.status())      // 'no change'
console.log(reactBlip.hasMovedIn())  // false
console.log(reactBlip.hasMovedOut()) // false
console.log(reactBlip.hasNoChange()) // true
console.log(reactBlip.description()) // '<p>React is our default choice...' 
```

--------------------------------

### Configure Adobe Launch Script URL

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Enable Adobe Launch by setting the ADOBE_LAUNCH_SCRIPT_URL environment variable with the URL for the Adobe Launch script.

```bash
export ADOBE_LAUNCH_SCRIPT_URL=[Adobe Launch URL]
```

--------------------------------

### Run Linting and Tests (npm)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Executes all quality checks, including linting and tests, using the npm package manager. This is the primary command for ensuring code quality before committing changes.

```bash
npm run quality
```

--------------------------------

### Run Build Your Own Radar Docker Image

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Pull and run the Build Your Own Radar Docker image, exposing port 8080 and configuring the Google Client ID. Access the application via http://localhost:8080.

```bash
docker pull wwwthoughtworks/build-your-own-radar
docker run --rm -p 8080:80 -e CLIENT_ID="[Google Client ID]" wwwthoughtworks/build-your-own-radar:latest
open http://localhost:8080
```

--------------------------------

### Run End-to-End Tests (npm)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Executes headless end-to-end tests. Requires the TEST_URL environment variable to be set, pointing to the running application.

```bash
export TEST_URL="http://localhost:8080"
npm run test:e2e-headless
```

--------------------------------

### Define Rings for Adoption Levels - JavaScript

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Illustrates the creation of Ring objects, each representing a different adoption level on the radar. It shows how to instantiate rings with a name and order, and access their properties.

```javascript
const Ring = require('./src/models/ring')

// Create rings with name and order (0 = innermost)
const adoptRing = new Ring('Adopt', 0)    // Innermost - use in production
const trialRing = new Ring('Trial', 1)    // Worth pursuing, understand risks
const assessRing = new Ring('Assess', 2)  // Worth exploring
const holdRing = new Ring('Hold', 3)      // Outermost - proceed with caution

// Access ring properties
console.log(adoptRing.name())   // 'Adopt'
console.log(adoptRing.order())  // 0
```

--------------------------------

### Render Radar Visualization with D3.js - JavaScript

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Demonstrates the use of the GraphingRadar class to render the technology radar visualization using D3.js. It shows how to initialize the GraphingRadar with a size and a configured Radar object, and then plot the visualization.

```javascript
const GraphingRadar = require('./src/graphing/radar')
const Radar = require('./src/models/radar')

// Assume radar is fully configured with quadrants and blips
const radar = new Radar()
// ... add quadrants and blips ...

// Calculate size based on viewport
const size = window.innerHeight - 133 < 620 ? 620 : window.innerHeight - 133

// Create and render the radar
const graphingRadar = new GraphingRadar(size, radar)
graphingRadar.init().plot()

// The radar will be rendered into a #radar element in the DOM
// with interactive features:
// - Click quadrants to zoom
// - Hover blips for tooltips
// - Search functionality
// - Print support
```

--------------------------------

### Run Linting Only (npm)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Checks for code style violations using Prettier without attempting to fix them. This command is useful for verifying code formatting consistency.

```bash
npm run lint-prettier:check
```

--------------------------------

### Run E2E Tests in Headless Mode (npm)

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Execute end-to-end tests in headless mode. Requires setting the TEST_URL environment variable to 'http://localhost:8080' and running the 'npm run test:e2e-headless' command.

```bash
export TEST_URL='http://localhost:8080'
npm run test:e2e-headless
```

--------------------------------

### Configure Custom Ring and Quadrant Names

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Specify custom names for rings and quadrants by setting the RINGS and QUADRANTS environment variables with JSON string arrays.

```bash
export RINGS='["Adopt", "Trial", "Assess", "Hold"]'
export QUADRANTS='["Techniques", "Platforms", "Tools", "Languages & Frameworks"]'
```

--------------------------------

### Fix Linting Issues (npm)

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

Automatically formats code to comply with Prettier style rules. This command helps maintain a consistent codebase by resolving formatting inconsistencies.

```bash
npm run lint-prettier:fix
```

--------------------------------

### Configure Google API Key

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Optionally, set the Google API Key as an environment variable to bypass Google Authentication for public sheets.

```bash
export API_KEY=[Google API Key]
```

--------------------------------

### Configure Google Tag Manager ID

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Enable Google Tag Manager by setting the GTM_ID environment variable with your Google Tag Manager ID.

```bash
export GTM_ID=[GTM ID]
```

--------------------------------

### Validate Radar Content Data with JavaScript

Source: https://context7.com/thoughtworks/build-your-own-radar/llms.txt

This JavaScript snippet shows how to use the ContentValidator to ensure input data (CSV/JSON) has the correct structure before rendering. It demonstrates initializing the validator with expected column names, verifying content existence, and checking for required headers like 'name', 'ring', 'quadrant', and 'description', along with either 'isNew' or 'status'. It also includes error handling for MalformedDataError.

```javascript
const ContentValidator = require('./src/util/contentValidator')

// Validate CSV/JSON column headers
const columnNames = ['name', 'ring', 'quadrant', 'isNew', 'description']
const validator = new ContentValidator(columnNames)

try {
  // Check that content exists
  validator.verifyContent()

  // Check required headers are present
  // Required: name, ring, quadrant, description
  // Plus either: isNew OR status
  validator.verifyHeaders()

  console.log('Data format is valid')
} catch (error) {
  if (error instanceof MalformedDataError) {
    console.error('Invalid data format:', error.message)
  }
}

// Valid header combinations:
// ['name', 'ring', 'quadrant', 'isNew', 'description']           - OK
// ['name', 'ring', 'quadrant', 'status', 'description']          - OK
// ['name', 'ring', 'quadrant', 'isNew', 'status', 'description'] - OK
// ['name', 'ring', 'quadrant', 'description']                    - ERROR (missing isNew or status)
```

--------------------------------

### Run E2E Tests in Debug Mode (npm)

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Execute end-to-end tests in debug mode. Requires setting the TEST_URL environment variable to 'http://localhost:8080', running 'npm run e2e', and then interacting with the Cypress test runner to select specs.

```bash
export TEST_URL='http://localhost:8080'
npm run e2e
```

--------------------------------

### Configure Google OAuth Client ID

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Set the Google Client ID as an environment variable. This is mandatory for private Google Sheets to enable Google Authentication and Authorization.

```bash
export CLIENT_ID=[Google Client ID]
```

--------------------------------

### JSON Data Format for Build Your Own Radar

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Illustrates the JSON array format required for providing data to Build Your Own Radar. Each object in the array must include 'name', 'ring', 'quadrant', 'isNew', and 'description' fields. This format is parsed using the D3 library.

```json
[
  {
    "name": "Composer",
    "ring": "adopt",
    "quadrant": "tools",
    "isNew": "TRUE",
    "description": "Although the idea of dependency management ..."
  },
  {
    "name": "Canary builds",
    "ring": "trial",
    "quadrant": "techniques",
    "isNew": "FALSE",
    "description": "Many projects have external code dependencies ..."
  },
  {
    "name": "Apache Kylin",
    "ring": "assess",
    "quadrant": "platforms",
    "isNew": "TRUE",
    "description": "Apache Kylin is an open source analytics solution ..."
  },
  {
    "name": "JSF",
    "ring": "hold",
    "quadrant": "languages & frameworks",
    "isNew": "FALSE",
    "description": "We continue to see teams run into trouble using JSF ..."
  }
]
```

--------------------------------

### CSV Data Format for Build Your Own Radar

Source: https://github.com/thoughtworks/build-your-own-radar/blob/master/README.md

Defines the structure for CSV files used to input data into Build Your Own Radar. The file should contain columns for name, ring, quadrant, isNew, and description. This format is compatible with D3's CSV parsing.

```csv
name,ring,quadrant,isNew,description
Composer,adopt,tools,TRUE,"Although the idea of dependency management ..."
Canary builds,trial,techniques,FALSE,"Many projects have external code dependencies ..."
Apache Kylin,assess,platforms,TRUE,"Apache Kylin is an open source analytics solution ..."
JSF,hold,languages & frameworks,FALSE,"We continue to see teams run into trouble using JSF ..."
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.