@ElementAI
Published
Edited
Apr 10, 2020
{
// Create a square <svg> 128px by 128px.
const width = 1000, height = 600;
const margin = 10;
const svg = DOM.svg(width, height);
const filterSize = 25;
const dx = 1.3, dy = 2.1;
// Create a sequential color scale (dark for small radii, bright for large).
let filteredStyles = filterFmaps(style_scopes, styles)
const globalDomain = getGlobalDomain(filteredStyles)
let x = d3.scaleLinear().range([margin, width - (128 * dx + margin + filterSize * 5)]).domain([0, filteredStyles.length])
let y = d3.local()
let layerDomain = d3.local()
let chroma = d3.local()
// Use D3’s data join to create circles.
d3.select(svg)
.selectAll('g')
.data(filteredStyles)
.enter().append('g')
.attr("transform", (d, i) => `translate(${x(i)}, 0)`)
.selectAll('g')
.data(d => d.values)
.enter().append('g')
.attr("transform", (d, i) => `translate(${filterSize * i * 1.5}, 0)`)
.each(function(d, i) {
const localDomain = [d3.min(d) , d3.max(d)];
layerDomain.set(this, localDomain)
})
.selectAll("rect")
.data(d => d)
.enter().append("rect")
.attr("width", filterSize).attr("height", filterSize)
.attr("fill", function(d){
const domain = useGlobal ? globalDomain : layerDomain.get(this)
return d3.scaleSequential(d3.interpolateViridis).domain(domain)(d)
})
.attr("stroke", "#3e3e3e")
.attr("stroke-opacity", 0.05)
.attr("opacity", 0.75)
.attr("x", (d, i) => 50 + i*dx)
.attr("y", (d, i) => 150 + i*dy)
.attr("transform", function(d){
let scale = d3.scaleLinear().domain(layerDomain.get(this)).range([filterSize * 2, 0])
return `translate(0, ${scale(d)})`
})
return svg;
}
{
// Create a square <svg> 128px by 128px.
const width = 1000, height = 600;
const margin = 10;
const svg = DOM.svg(width, height);
const filterSize = 20;
const dx = 1, dy = 3;
// Create a sequential color scale (dark for small radii, bright for large).
let filteredStyles = filterFmaps(clevr_scopes, clevr_varied)
let globalDomain = getGlobalDomain(filteredStyles)
let x = d3.scaleLinear().range([margin, width - (128 * dx + margin + filterSize * 2)]).domain([0, filteredStyles.length])
let y = d3.local()
let layerDomain = d3.local()
let isRelu = d3.local()
let chroma = d3.local()
let useGlobal = false
// Use D3’s data join to create circles.
let layerGroup = d3.select(svg)
.selectAll('g')
.data(filteredStyles)
.enter().append('g')
.attr("transform", (d, i) => `translate(${x(i)}, 0)`)
layerGroup.append('text')
.text((d, i) => d.name)
.attr('text-anchor', 'middle')
.attr("x", (d, i) => i*filterSize + filterSize*6)
.attr("y", (d, i) => 100)
.attr('font-size', 12)
layerGroup
.selectAll('g')
.data(d => d.values)
.enter().append('g')
.attr("transform", (d, i) => `translate(${filterSize * i * 1.5}, 0)`)
.each(function(d, i) {
const localDomain = [d3.min(d) , d3.max(d)];
layerDomain.set(this, localDomain)
chroma.set(this, isRelu.get(this) ? d3.interpolatePlasma : d3.interpolateBlues)
}).selectAll("rect")
.data(d => d)
.enter().append("rect")
.attr("width", filterSize).attr("height", filterSize)
.attr("fill", function(d){
const domain = useGlobal ? globalDomain : layerDomain.get(this)
return d3.scaleSequential(chroma.get(this)).domain(domain)(d)
})
.attr("stroke", "#3e3e3e")
.attr("opacity", function(d) {
const domain = layerDomain.get(this)
return d3.scaleLinear().domain(domain).range([0, 1])(d)
})
.attr("x", (d, i) => 50 + i*dx)
.attr("y", (d, i) => 150 + i*dy)
.attr("transform", function(d){
let scale = d3.scaleLinear().domain(layerDomain.get(this)).range([2*filterSize, 0])
// return `translate(0, ${scale(d)})`
})
return svg;
}
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.
