One chart a day - Understanding the force layout Pt. 2 / Rich

md `## Common Applications of the force layout

- word cloud (where size of words/words within circles depends the frequency of use)

- cluster bubble charts

- wherein a categorical data has a numerical data attached to it

- circles aren't the only shape to be appended to the svg (although it is commonly used), so further experimentation on which shapes to use with the force layout can be explored

`

numbers()

numbers = () => {

return '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30'.split(',').map( (d,i) => {

return { key: d, pos: Math.floor(parseInt(d)/11), radi: Math.random() * 20 }})

}

colorScale = d3.scaleOrdinal().domain([0,1,2]).range(['pink','steelblue','purple'])

d3 = require("d3@v5")

import {checkbox, radio, input, button} from "@jashkenas/inputs"

tooltip = d3

.select('body')

.append('div')

.attr('class', 'tooltip')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background-color', 'white')

.style('border-radius', '4px')

.style('-webkit-border-radius', '10px')

.style('-moz-border-radius', '10px')

.style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('color', 'black')

.style('font-family','sans-serif')

.text('a simple tooltip');

Purpose-built for displays of data