cria_escala = function(min_dominio, max_dominio, min_range, max_range){
return function(x){
const domain_extent = max_dominio - min_dominio;
const range_extent = max_range - min_range;
return min_range + ((x - min_dominio) / domain_extent) * range_extent;
}
}
{
const escala1 = cria_escala(10, 30, 0, 500);
return [ escala1(20), escala1(21), escala1(30) ];
}
escalaX = d3.scaleLinear()
.domain([0, d3.max(dados, (d) => d.valor)])
.rangeRound([20, width - 10]); // rangeRound cuida pra só retornar valores inteiros
// porque não existe pixel 122.459
escalaX(62)
{
const svg = d3.create("svg")
.attr("width", width) // width é uma variável global com a largura do display
.attr("height", 40)
svg.selectAll("circle")
.data(dados)
.join("circle")
.attr("cx", d => escalaX(d.valor))
.attr("cy", 20)
.attr("r", 7)
.attr("fill", "steelblue");
return svg.node()
}
escalaCor = d3.scaleLinear()
.domain([0, d3.max(dados, (d) => d.valor)])
.range(["yellow", "purple"]);
escalaCor(20)
{
const svg = d3.create("svg")
.attr("width", width) // width é uma variável global com a largura do display
.attr("height", 50)
svg.selectAll("circle")
.data(dados)
.join("circle")
.attr("cx", d => escalaX(d.valor))
.attr("cy", 20)
.attr("r", 7)
.attr("fill", d => escalaCor(d.valor));
svg.append("g")
.attr("transform", "translate(0," + 30 + ")")
.call(d3.axisBottom(escalaX)); // magica do d3: desenha eixo a partir da escala
return svg.node()
}
escalaY = d3.scalePoint()
.domain(dados.map(d => d.letra))
.rangeRound([30, height - 30]);
dados.map(d => escalaY(d.letra))
{
const svg = d3.create("svg")
.attr("width", width) // width é uma variável global com a largura do display
.attr("height", height)
svg.selectAll("circle")
.data(dados)
.join("circle")
.attr("cx", d => escalaX(d.valor))
.attr("cy", d => escalaY(d.letra))
.attr("r", 7)
.attr("fill", d => escalaCor(d.valor));
svg.append("g")
.attr("transform", "translate(0," + (height - 20) + ")")
.call(d3.axisBottom(escalaX));
svg.append('g')
.attr('transform', 'translate(20,0)')
.call(d3.axisLeft(escalaY))
return svg.node()
}
escalaYBarras = d3.scaleBand()
.domain(dados.map(d => d.letra))
.rangeRound([0, 120])
.padding(.1);
{
const svg = d3.create("svg")
.attr("width", width) // width é uma variável global com a largura do display
.attr("height", height)
svg.selectAll("rect")
.data(dados)
.join("rect")
.attr("x", 20)
.attr("width", d => escalaX(d.valor))
.attr("y", d => escalaYBarras(d.letra))
.attr("height", escalaYBarras.bandwidth())
.attr("r", 7)
.attr("fill", d => escalaCor(d.valor));
svg.append("g")
.attr("transform", "translate(0," + (height - 20) + ")")
.call(d3.axisBottom(escalaX));
svg.append('g')
.attr('transform', 'translate(20,0)')
.call(d3.axisLeft(escalaYBarras))
return svg.node()
}
ordenado = dados.sort((d1, d2) => d3.descending(d1.valor, d2.valor))
escalaYBarrasOrd = d3.scaleBand()
.domain(dados.sort((d1, d2) => d3.descending(d1.valor, d2.valor)).map(d => d.letra))
.rangeRound([0, 120])
.padding(.1);
{
const svg = d3.create("svg")
.attr("width", width) // width é uma variável global com a largura do display
.attr("height", height)
svg.selectAll("rect")
.data(dados)
.join("rect")
.attr("x", 20)
.attr("width", d => escalaX(d.valor))
.attr("y", d => escalaYBarrasOrd(d.letra))
.attr("height", escalaYBarrasOrd.bandwidth())
.attr("r", 7)
.attr("fill", d => escalaCor(d.valor));
svg.append("g")
.attr("transform", "translate(0," + (height - 20) + ")")
.call(d3.axisBottom(escalaX));
svg.append('g')
.attr('transform', 'translate(20,0)')
.call(d3.axisLeft(escalaYBarrasOrd))
return svg.node()
}
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.
