31:T9be, 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(); }32:[] 2f:{"title":"Cindy's Treemap","cells":[{"id":0,"value":"md `# Cindy's Treemap\n\nPublic playground for images regarding the abortion coverage in the US May 13-20, 2019.\n\nThis [treemap](/@d3/treemap) visualizes tabular data using [d3.stratify](/@d3/d3-stratify).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"data = d3.csv(\"https://raw.githubusercontent.com/mitmedialab/MediaCloud-Image-Tests/master/treemaps/images-3132-551975-metadata-top30_inlinks.csv\", d3.autoType);","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"\nstratify = d3.stratify()\n .id(d => d.d_hash)\n .parentId(d => d.parent)\n \t\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"treemap = data => d3.treemap()\n .tile(d3.treemapBinary)\n .size([width, height])\n .padding(1)\n .round(true)\n (stratify(data)\n .sum(d => d.inlink_count)\n .sort((a, b) => b.inlink_count - a.inlink_count))","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"height = 1060","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}