The avatar for @emanueles
Emanuele Santos
Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Public
Edited
Oct 19, 2022
8 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
q = d3.scaleQuantize()
.domain([10,100])
.range([1,2,4]);
Insert cell
q(20)
Insert cell
Insert cell
Insert cell
colorz = d3.scaleQuantize()
.domain([0,1])
.range(["brown", "steelblue"]);
Insert cell
Insert cell
Insert cell
colort = d3.scaleQuantile().domain([0,1,5,6,2,4,6,2,4,6,7,8]).range([0,100]);

Insert cell
Insert cell
colort.quantiles()
Insert cell
Insert cell
colort(4.5)
Insert cell
colort(10000)
Insert cell
Insert cell
colort2 = d3.scaleQuantile().domain([0,1,5,6,2,4,6,2,4,6,7,8]).range([0,25,50,75,100]);
Insert cell
Insert cell
colort2.quantiles()
Insert cell
Insert cell
colord = d3.scaleOrdinal()
.domain(["HOMICIDE", "ROBBERY", "BURGLARY"])
.range(["#ca0020", "#0571b0", "#fdae61"]);
Insert cell
Insert cell
colord("HOMICIDE")
Insert cell
Insert cell
rainbow = d3.scaleSequential(d3.interpolateRainbow);
// normalmente, no domínio, 0 representa o valor mínimo e
// o 1 o valor máximo
Insert cell
Insert cell
Insert cell
spectral = d3.scaleDiverging(d3.interpolateSpectral);
// normalmente, no domínio, 0 representa o valor extremo
// negativo, 0.5 o neutro e o 1 o valor extremo positivo
Insert cell
build_palette(spectral, d3.ticks(0, 1, 10), 70)
Insert cell
Insert cell
catcolor = d3.scaleOrdinal(d3.schemeCategory10)
Insert cell
Insert cell
Insert cell
accent = d3.scaleOrdinal(d3.schemeAccent)
Insert cell
build_palette(accent, d3.ticks(1, 8, 8), 70)
Insert cell
Insert cell
dark2 = d3.scaleOrdinal(d3.schemeDark2)
Insert cell
build_palette(dark2, d3.ticks(1, 8, 8), 70)
Insert cell
Insert cell
Insert cell
Insert cell
cpiyg = d3.scaleSequential(d3.interpolatePiYG)
Insert cell
Insert cell
dpiyg = d3.scaleOrdinal(d3.schemePiYG[9]) //nesse caso, k=9
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cblues = d3.scaleSequential(d3.interpolateBlues);
Insert cell
Insert cell
dblues = d3.scaleOrdinal(d3.schemeBlues[8]);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
c = d3.color("steelblue");
Insert cell
d3.rgb(c)
Insert cell
d3.hsl(c)
Insert cell
d3.lab(c)
Insert cell
Insert cell
c2 = d3.rgb("violet") // RGB object
Insert cell
c2.toString(); // "rgb(238, 130, 238)"
Insert cell
c2.formatHex(); //"#ee82ee"
Insert cell
c2.darker().toString(); // "rgb(167, 91, 167)" mais escura
Insert cell
c2.darker(2).toString(); // "rgb(117, 64, 117)" - ainda mais escura
Insert cell
c2.brighter().toString(); // "rgb(255, 186, 255)" mais clara
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require('d3@5')
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