chart = { const root = treemap(data); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.id).join("/")}\n${format(d.value)}`); //pull in images here svg .selectAll("rect") .data(root.leaves()) .enter() .append('defs') .append('pattern') .attr('id', function (d) { return d.data.d_hash; }) .attr('patternUnits', 'userSpaceOnUse') .style("fill","grey") .attr('width', "100px") .attr('height', "100px") .append("image") .attr("xlink:href", function(d){ return d.data.image_url}) .attr('width', "100px") .attr('height', "100px") .attr('object-fill', "fill") .style("fill","grey") .style("opacity", .9); svg .selectAll("rect") .data(root.leaves()) .enter() .append("rect") .attr('x', function (d) { return d.x0; }) .attr('y', function (d) { return d.y0; }) .attr('width', function (d) { return d.x1 - d.x0; }) .attr('height', function (d) { return d.y1 - d.y0; }) .attr('object-fill', "fill") //.style("stroke", function (d) { return partisanColor(getPartisanCode(d.data.partisan)) }) .style("stroke-width", "6") .style("fill", function (d) { return 'url(#' + d.data.d_hash + ') red'; }) // can't set repeat etc .on("click", function(d){ window.open(d.data.story_url,'_blank'); ; }) .on("mouseover", function(d){ // mouse events not working in Observable? div.transition() .duration(200) .style("opacity", .9); div .html("

" + d.data.story_title + "

from " + d.data.media_name + "

Published on: " + d.data.publish_date + "

" + d.data.inlink_count + " Inlinks over week, " + d.data.fb_count + " FB Shares over all

Partisan category: " ) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); //.style("cursor","pointer"); }) .on("mouseout", function(d){ div.transition() .duration(500) .style("opacity", 0); }); return svg.node(); }