chart = { const target = html`

This is my first visualization

This was made using John Guerra's tutorial on interactions in d3

`; const width = 500, height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 20, right: 30, bottom: 30, left: 40}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gDrawing = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3.scaleSqrt() .domain([0, d3.max(data, d => d["APORTE NACIONAL"])]) .range([0, iwidth]) .nice(); const y = d3.scaleSqrt() .domain([0, d3.max(data, d => d["TOTAL"])]) .range([iheight, 0]) .nice(); gDrawing.append("g") .call(d3.axisBottom(x).tickFormat(d3.format("$.2s"))) .attr("transform", `translate(0,${iheight})`); gDrawing.append("g") .call(d3.axisLeft(y).tickFormat(d3.format("$.2s"))); gDrawing.append("text") .attr("class", "tooltip") .attr("x", -100) .style("fill", "black") .style("stroke", "black") .text("TOOLTIP"); function onMouseOver(d){ d3.select(this) .attr("fill","firebrick") .attr("opacity", 1); gDrawing.select(".tooltip") .attr("x", d3.mouse(this)[0]) .attr("y", d3.mouse(this)[1] + 20) .style("opacity", 1) .text(d.CONCEPTO1); console.log("mouseover", d3.mouse(this)); } function onMouseOut(d){ d3.select(this) .attr("fill","limegreen") .attr("opacity", 0.2); gDrawing.select(".tooltip") .style("opacity", 0); } gDrawing.selectAll(".point") .data(data) .join("circle") .attr("class", "point") .attr("cx", d => x(d["APORTE NACIONAL"])) .attr("cy", d => y(d["TOTAL"])) .attr("r", 3) .attr("fill", "limegreen") .attr("opacity", 0.2) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); return target; }