chart = { const target = html`

¿Cree que hay regiones en Colombia en las que se paga un precio de combustible mayor que el de Bogotá?, Revise la visualización para comprobarlo.

En la gráfica se puede apreciar el promedio de los precios de combustible, en los diferentes departamentos de Colombia

`; const width = 800, height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 20, right: 30, bottom: 200, left: 50}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gBase = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gBase.append("text") .attr("class", "tooltip") .attr("x", -100) .style("fill", "black") .style("stroke", "black") .text(""); const y = d3.scaleSqrt() .domain([0, d3.max(valorMedioCombustible, d => d.value.promedio) ]) .range([iheight, 0]) .nice(); const x = d3.scaleBand() .domain(d3.set(valorMedioCombustible.map(d => d.key)).values()) .range([0, iwidth]) .padding(0.3); gBase.append("g") .call(d3.axisBottom(x)) .attr("transform", `translate(0, ${iheight})`) .selectAll(".tick text") // Rotate the x axis labels 45 deg .attr("text-anchor", "end") .attr("transform", "rotate(-45)"); gBase.append("g") .call(d3 .axisLeft(y).tickFormat(d3.format("$.2s")) ); function onMouseOver(d) { d3.select(this) .style("fill", "#446ccf"); gBase.select(".tooltip") .attr("x", d3.mouse(this)[0] - 20) .attr("y", d3.mouse(this)[1] + 20) .text(d.value.promedio); console.log("mouseover", d3.mouse(this)); } function onMouseOut(d) { d3.select(this) .style("fill", "#96c8a2"); gBase.select(".tooltip") .attr("x", -100) .text(""); console.log(d, d3.event); } gBase.selectAll(".item") .data(valorMedioCombustible) .join("rect") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", "item") .attr("y", d => y(d.value.promedio ) ) .attr("x", d => x(d.key) ) .attr("height", d => iheight - y(d.value.promedio ) ) .attr("width", x.bandwidth() ) .style("opacity", 0.5) .style("fill", "#96c8a2"); return target; }