{
const target = html`
<style>
.chart {
font-family: sans-serif;
}
.chart-footer {
font-style: italic;
font-size: 10pt;
color: #aaa;
}
</style>
<div class="chart">
<h2>Presupuesto por tipo de rubro</h2>
<div>Los rubros de funcionamiento son los más grandes. En un diagrama radial</div>
<div id="chart"></div>
<div class="chart-footer">By <a href="https://johnguerra.co">John Alexis Guerra Gómez</a>.
<br>
<strong>Source</strong>: <a href="">My data source</a>
</div>
</div>`;
const
width = 500,
height = 500,
innerRadius = 50,
outerRadius = 200,
svg = d3.select(target).select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
const margin = ({top: 0, right: 0, bottom: 0, left: 0}),
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 r = d3.scaleSqrt()
.domain([0, d3.max(data, d => d["APORTE NACIONAL"]) ])
.range([innerRadius, outerRadius])
.nice();
const angle = d3.scalePoint()
.domain(d3.set(data.map(d => d["CONCEPTO2"])).values())
.range([0, 2*Math.PI])
.padding(0.5);
const color = d3.scaleOrdinal(d3.schemeAccent);
gBase.append("g")
.call(angleRadiusAxis(iwidth/2, iheight/2, r, angle, innerRadius, outerRadius));
function onMouseOver(d) {
d3.select(this)
.style("fill", "firebrick");
gBase.select(".tooltip")
.attr("x", d3.mouse(this)[0])
.attr("y", d3.mouse(this)[1] + 20)
.text(d.CONCEPTO1);
console.log("mouseover", d3.mouse(this));
}
function onMouseOut(d) {
d3.select(this)
.style("fill", "#777");
gBase.select(".tooltip")
.attr("x", -100)
.text("");
console.log(d, d3.event);
}
gBase.selectAll(".points")
.data(data)
.join("circle")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("class", "points")
.attr("cx", d => {
d.jitter = Math.PI/2*Math.random()-Math.PI/4;
return iwidth/2 + r(d["APORTE NACIONAL"])*Math.cos(angle(d["CONCEPTO2"]) + d.jitter);
})
.attr("cy", d => iheight/2 + r(d["APORTE NACIONAL"])*Math.sin(angle(d["CONCEPTO2"]) + d.jitter))
.attr("r", 2 )
.style("opacity", 0.3)
.style("fill", d => color(d["CONCEPTO2"]));
return target;
}