2c:null 2d:["$","title",null,{"children":"Cindy's Treemap | cindyb | Observable"}] 32: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(); }33:[] 30:{"id":"c071b88182f8453b","slug":"cindys-treemap","title":"Cindy's Treemap","thumbnail":"1ff135c3cef4046898fa9e1a52293365492fc681789690234ce27e63483eb0c2","access_level":"public","create_time":"$D2019-10-01T23:27:49.553Z","update_time":"$D2019-10-02T14:18:56.584Z","view_time":null,"first_public_time":"$D2019-10-02T00:53:02.093Z","has_unpublished_edits":null,"fork":{"id":"371ad8d0fb26a66f","slug":"stratify-treemap","title":"Stratify Treemap","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"600984041ff7f94b","login":"cindyloo","name":"cindyb","avatar_url":"https://avatars-next.observableusercontent.com/54cf2011d624cd8c97f14166c4097c9fa2a4fa1c09f670c2c47306c1e7dc7896","tier":"starter_2024"},"version":189,"publish_version":189,"role":null,"authored":false,"authors":[{"type":"individual","id":"b34460f88fbe3c14","login":"cindyloo","name":"cindyb","avatar_url":"https://avatars-next.observableusercontent.com/54cf2011d624cd8c97f14166c4097c9fa2a4fa1c09f670c2c47306c1e7dc7896","tier":null}],"members":[{"type":"individual","id":"b34460f88fbe3c14","login":"cindyloo","name":"cindyb","avatar_url":"https://avatars-next.observableusercontent.com/54cf2011d624cd8c97f14166c4097c9fa2a4fa1c09f670c2c47306c1e7dc7896","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 1060","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"