Published
Edited
Apr 23, 2020
Importers
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hero.film.attr("viewBox", [0,0,576,36*τ]).attr("height", width/16*τ).attr("width", width*ρ)
Insert cell
Insert cell
Insert cell
Insert cell
grids = (film) => {
const ƒ = 3

// leaf nodes: original simple patterns
// default is a major dot grid
const dotsMajor = pattern(film, { })
const dotsMinor = pattern(film, { frequency: ƒ, radius: 1 })

// for a minor thinner line grid, up the frequency
const lineMinorHorizontal = pattern(film, { kind: "line", frequency: ƒ, strokeWidth: 1/2 })
// default for line is major horizontal
const lineMajorHorizontal = pattern(film, { kind: "line", strokeColor: "red" })
// major vertical lines turn existing horizontal lines into a grid

// like above, crossing
const lineMinorVertical =
pattern(film, { kind: "line", frequency: ƒ, orientation: "vertical", strokeWidth: 1/2})
const lineMajorVertical = pattern(film, { kind: "line", orientation: "vertical" })


// parent nodes: composite – patterns of patterns [of patterns...]

// all grids in a single stack; note that the order is relevant: last grid on top: dots on top
const allGrids = stack(
film,
[lineMajorHorizontal, lineMinorHorizontal, lineMajorVertical, lineMinorVertical, dotsMinor, dotsMajor ]
)
// expose only the ones you want them to see (in this case all of them)
return ({
dotsMajor,
dotsMinor,
lineMajorHorizontal,
lineMinorHorizontal,

lineMajorVertical,
lineMinorVertical,
allGrids
})
}
Insert cell
Insert cell
Insert cell
precooked = (film) => {
const ƒ = 4

// leaf nodes: original simple patterns
// default is a major dot grid
const dotsMajor = pattern(film, { })
const dotsMinor = pattern(film, { frequency: ƒ, radius: 1 })

// default for line is major horizontal
const lineMajorHorizontal = pattern(film, { kind: "line" })
// major vertical lines turn existing horizontal lines into a grid
const lineMajorVertical = pattern(film, { kind: "line", orientation: "vertical" })

// for a minor thinner line grid, up the frequency
const lineMinorHorizontal = pattern(film, { kind: "line", frequency: ƒ, strokeWidth: 1/2 })
// like above, crossing
const lineMinorVertical =
pattern(film, { kind: "line", frequency: ƒ, orientation: "vertical", strokeWidth: 1/2})

// parent nodes: composite – patterns of patterns [of patterns...]

const dots = stack(film, [dotsMajor, dotsMinor])

const squareMajor = stack(film, [lineMajorHorizontal, lineMajorVertical])
const squareMinor = stack(film, [lineMinorHorizontal,lineMinorVertical])
const square = stack(film, [squareMajor, squareMinor])

const dotsnsquare = stack(film, [dots, square])
// all grids in a single stack so you can tweak each one individually
const allGrids = stack(
film,
[
dots, square,
dotsnsquare,
lineMajorHorizontal, lineMajorVertical,
lineMinorHorizontal, lineMinorVertical,
dotsMinor, dotsMajor
]
)
// expose only the ones you want them to see (in this case all of them)
return ({
dots,
square,
dotsnsquare,
dotsMajor,
dotsMinor,
lineMajorHorizontal,
lineMajorVertical,
squareMajor,

lineMinorHorizontal,
lineMinorVertical,
squareMinor,
allGrids
})
}
Insert cell
gridder = (film) => {
const grid = precooked(film) // creates the default grids
grid.square.toggle("hidden")
filler(film, grid.dotsnsquare.fill)
return {
...grid,
film,
node() { return film.node() },
}
}
Insert cell
x = gridder(ratio().foil())
//.film.attr("opacity", .2).node()
Insert cell
x.lineMajorHorizontal.toggle()
Insert cell
x.node()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vegas.pH.strokeWidth(vegasStrokeWidth)
Insert cell
vegas.pV.strokeColor("purple").strokeWidth(4)
Insert cell
vegas.pD.radius(radius)
Insert cell
numbers = Array.from({length: 2/3*unit}, (_, i) => i)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more