Public
Edited
Jun 28, 2023
{
const max_rank = d3.max(few_data, (d) => d.rank_L[1]);
const xyDomain = [1, 10**Math.ceil(Math.max(Math.log10(max_rank))-1)];
const xyScale = d3.scaleLog().domain(xyDomain).range([0, 512])
const max_val = 140
const xy = d3.scaleBand().domain(d3.range(60)).range([0, 600])
const color_scale = d3.scaleSequentialLog().domain([max_val, 1]).interpolator(d3.interpolateInferno)
const svg = d3.create("svg")
const g = svg.attr("id", "myGraph")
.attr('height', 512 + margin.top + margin.bottom)
.attr('width', 512)
.attr("viewBox", [0-50, 0, 512 + margin.top+50, 512])
.append('g');
svg.selectAll('rect')
.data(few_data)
.enter()
.append('rect')
.attr('x', (d) => xy(d.x1))
.attr('y', (d) => xy(d.y1))
.attr('width', xy.bandwidth())
.attr('height', xy.bandwidth())
.attr('fill', (d) => color_scale(d.value))
.attr('stroke', 'black')
.attr('stroke-width', 0.3)
g.append('g')
.attr("transform", `translate(0, ${512*canvas_mult_size})`)
.call(d3.axisBottom(xyScale))
g.append('g')
.call(d3.axisRight(xyScale));
return svg.node()
}
import {diamond_dat, diamond_dat_f, margin } from "@jstonge/allotaxonometer-4-all"
bin_size = 1.5
ncells = 60
canvas_mult_size = 1.02
few_data = diamond_dat_f
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.
