Published
Edited
Nov 2, 2020
Importers
md`# Axis equal template
This is a small template to define plots with equal axis ratio.`
viewof chart = {
const plt = axis_equal_plt( 600, 300, {x:0, y:0, w:10, h:10}, {left:30,right:10,top:30,bottom:30} )
const svg = d3.create("svg")
.style("width", plt.area.w + 'px')
.style("height", plt.area.h + 'px');
svg.append("g")
.attr("transform", `translate(0,${plt.area.h - plt.screen.p.bottom})`)
.call(d3.axisBottom(plt.x))
svg.append("g")
.attr("transform", `translate(${plt.screen.p.left},0)`)
.call(d3.axisLeft(plt.y))
return svg.node();
}
function axis_equal_plt(w, h, domain, p)
{
const screen = ({w: w, h: h, p:p, w_eff:(w-p.left-p.right), h_eff:(h-p.bottom-p.top)})
const ratio_domain = domain.w / domain.h
const ratio_screen = (screen.w_eff) / (screen.h_eff)
if( ratio_domain > ratio_screen ){
var weff = screen.w_eff
var heff = screen.w_eff / ratio_domain
}
else {
var weff = screen.h_eff * ratio_domain
var heff = screen.h_eff
}
const area = {w:weff + p.left + p.right , h:heff + p.top + p.bottom,
weff:weff, heff:heff}
return ({screen:screen,
area:area,
y:
d3.scaleLinear().domain([domain.y, domain.y + domain.h]).range([area.h - screen.p.bottom, screen.p.top]),
x:
d3.scaleLinear().domain([domain.x, domain.x + domain.w]).range([screen.p.left, area.w - screen.p.right])
});
}
d3 = require("d3@6")
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.
