Published
Edited
Feb 12, 2021
1 star
Insert cell
md`# Battleships`
Insert cell
md`I had a bit of spare time and wanted to do a viz using Font Awesome Icons. A bit of fun!`
Insert cell
Insert cell
Insert cell
html` <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
`
Insert cell
Insert cell
Insert cell
ships = [{"name": "Carrier","pegs":5,"icon":"\uf0fb"},{"name": "Battleship","pegs":4,"icon":"\uf0e7"},{"name": "Cruiser","pegs":3,"icon":"\uf21a"},{"name": "Submarine","pegs":3,"icon":"\uf043"},{"name": "Destroyer","pegs":2,"icon":"\uf13d"}]
Insert cell
height = width * 1.05
Insert cell
d3 = require("d3@6")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more