md`# Vertical bar chart`
htmlElement = html`<div id="htmlSpace"></div>`
styleHtml = html`<style>
.grid {
z-index: 100;
}
.grid line {
stroke: lightgrey;
stroke-opacity: 1;
shape-rendering: crispEdges;
z-index: 100;
}
.grid path {
stroke-width: 0;
}
.x path {
display: none;
}
.x .tick text {
fill: #9B9B9B;
font-size: 12px;
font-weight : 600;
}
.x .tick line {
display: none;
}
.y .domain {
display: none;
}
.y .tick line {
display: none;
}
.y .tick text {
font-weight: 700;
fill: #9B9B9B;
font-size: 12px;
}
</style>`
svg = d3.select("#htmlSpace").append("svg")
.attr("width", width + margin.left + margin.right +"px")
.attr("height", height + margin.top + margin.bottom +"px")
.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
margin = { return {top:50, right: 20, bottom: 30, left: 40} }
data ={ return {
"me gusta":{
"nike":2,
"adidas":15,
"puma":8,
"rebook":12
},
"me encanta":{
"nike":2,
"adidas":22,
"puma":2,
"rebook":12
},
"me enoja":{
"nike":3,
"adidas":13,
"puma":3,
"rebook":23
},
"me nada":{
"nike":20,
"adidas":11,
"puma":25,
"rebook":11
}
}
};
marcas = ['nike', 'adidas', 'puma', 'rebook']
x0 = d3.scaleBand().domain(anames).rangeRound([0, width]).paddingInner(0.1)
y = d3.scaleLinear().domain([0, 25]).range([height, 0])
x1 = d3.scaleBand().domain(marcas).rangeRound([0, x0.bandwidth()]).paddingInner(0.1)
categories = [];
names = [];
tmp = data[0];
calcularDesplazamiento = function (numeroBarras, aumento, widthBarra) {
let entero = Math.ceil(numeroBarras / 2);
// let barras = entero * widthBarra;
let aumentos = aumento * (entero - 1);
return aumentos;
}
svg.append('g').attr('class', 'chart').selectAll('.bar-group').data(Object.entries(data)).enter().append('g').attr('class','bar-group').attr('transform', (d, i) => {
if ( marcas.lenght % 2 != 0 ) {
return 'translate(' + (x0(d[0]) - calcularDesplazamiento(4, aumento, 4)) + ',0)'
}
return 'translate(' + (x0(d[0])- calcularDesplazamiento(4, aumento, 4)) + ',0)'}).selectAll('rect').data((d,i) => {return Object.entries(d[1]);})
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', (d,i) => {return (x0(d[0]))})
.attr('y', (d) => { return y(d[1])})
.attr('width', 5)
.attr('height', (d) => { return height - y(d[1])}).attr('fill', (d,i) => { return colorScheme[i]}).attr('rx', 4).attr('ry', 4)
.attr('transform', (d, i) => {
return 'translate(' + ((x0.bandwidth() / 2 + (aumento * i))) + ', 0)'})
svg.append("g").attr('transform', "translate(0 " + ',' + height + ')').attr('class', "x axis").call(d3.axisBottom(x0))
svg.append('g').attr('class', 'y axis').call(d3.axisLeft(y))
datos = Object.entries(data);
max = function() {
let results = [];
datos.forEach((d, i) => {
let marcas = Object.values(d[1]);
let indice = 0;
let numero = 0;
for( let i = 0 ; i< marcas.length; i++) {
if (marcas[i] > numero) {
numero = marcas[i];
indice = i;
}
}
results.push(indice);
})
return results
}
indices = max()
setTopBars = function () {
let elements = svg.selectAll('.bar-group').selectAll('rect');
let topBars = [];
elements._groups.forEach((d,i) => {
topBars.push(d[indices[i]]);
});
for (let i = 0; i< topBars.length; i++) {
d3.select(topBars[i]).attr('class', 'top-bar');
}
return topBars;
}
newData = () => {
let res = [];
let array = Object.entries(data);
array.forEach((value, key) => {
let elemts = Object.entries(value[1]);
elemts.forEach((d, i) => {
if (i == indices[key] ) {
res[value[0]] = d
}
})
})
return res;
}
barGroups = svg.selectAll('.bar-group');
barGroups.append('g')
svg.select('.chart').select('.bar-group').append('polygon').attr('fill', '#F8CB1C').attr("points", (d) => {
return "5,0 2,10 10,3 0,3 9,10";
})
stars = function() {
svg.selectAll('.bar-group')
.append('polygon')
.attr('fill', '#F8CB1C')
.attr('class', 'star')
.attr("points", (d) => {
return "5,0 2,10 10,3 0,3 9,10";})
.attr('x', 0)
.attr('y',0)
.attr('transform', (d, i) => {
let indice = marcas[indices[i]];
let value = Object.entries(data)[i];
let xTransform = topBars[i].transform.baseVal[0].matrix.e;
return 'translate(' + (xTransform - 2.5) + ',' + (topBars[i].y.baseVal.value -10) + ')'})
}
stars()
// svg.selectAll('name').data(data).enter().append('text').attr('class', 'name').text((d) => {
// return d.salesperson }).attr('x',0).attr('y', (d) => { return y(d.salesperson) }).attr('transform', 'translate(' + 0 + ',' + ((y.bandwidth()/2) - 15) + ')')
// svg.selectAll('value').data(data).enter().append('text').attr('class', 'value').text((d) => {
// return d.sales}).attr('x', width - margin.left).attr('y', (d) => { return y(d.salesperson) }).attr('transform', 'translate(' + 0 + ',' + ((y.bandwidth()/2) - 15) + ')')
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.
