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("<img class='overlay' src='"+ d.data.image_url + "' /><br/><h3>" + d.data.story_title + "<br /><h3> from " + d.data.media_name + "<br /><h4>Published on: " + d.data.publish_date + "</h4><h4>" + d.data.inlink_count + " Inlinks over week, " + d.data.fb_count + " FB Shares over all</h4><br/>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();
}
data = d3.csv("https://raw.githubusercontent.com/mitmedialab/MediaCloud-Image-Tests/master/treemaps/images-3132-551975-metadata-top30_inlinks.csv", d3.autoType);
stratify = d3.stratify()
.id(d => d.d_hash)
.parentId(d => d.parent)
treemap = data => d3.treemap()
.tile(d3.treemapBinary)
.size([width, height])
.padding(1)
.round(true)
(stratify(data)
.sum(d => d.inlink_count)
.sort((a, b) => b.inlink_count - a.inlink_count))
width = 975
height = 1060
format = d3.format(",d")
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
