Published
Edited
Jul 4, 2021
1 star
md`# axes`
chart = {
const size = width;
const svg = d3.select(DOM.svg(size, size))
.style('width', `${size}px`)
.style('height', `${size}px`)
//.style('border', '1px solid gray');
return svg.node();
}
p=2
max = Math.max(data[data.length -1].x, data[data.length -1].y)
cosy = {
const tick = Math.floor(max/15)
const cosy = new Cosy(chart, {xmin: 0, xmax: tick*20, ymin: 0, ymax: tick*20, margin: 20});
cosy.xGridlines(cosy.xticks(tick).filter(n => n !== 0));
cosy.yGridlines(cosy.yticks(tick).filter(n => n !== 0));
cosy.xAxis(cosy.xticks(tick).filter(n => n !== 0 && n !== cosy.xmin && n !== cosy.xmax), 'x');
cosy.yAxis(cosy.yticks(tick).filter(n => n !== 0 && n !== cosy.ymin && n !== cosy.ymax), 'y');
return cosy;
}
m=0
c=1
fn = x => c * x + m
fn2 = x => p*x
fn3 = x => 1/p*x
{
cosy.clear();
cosy.line(cosy.xmin, fn(cosy.xmin), cosy.xmax, fn(cosy.xmax), {color: 'red'});
cosy.line(cosy.xmin, fn2(cosy.xmin), cosy.xmax, fn2(cosy.xmax), {color: 'red'});
cosy.line(cosy.xmin, fn3(cosy.xmin), cosy.xmax, fn3(cosy.xmax), {color: 'red'});
for (let i = 0; i <data.length; i++) {
if (i>0) {
cosy.line(data[i-1].x, data[i-1].y, data[i].x, data[i].y, {color: 'red','strokeWidth':4});
} else {
cosy.line(data[i].x, data[i].y, data[i].x, data[i].y, {color: 'red','strokeWidth':4});
}
cosy.point(data[i].x, data[i].y, {color: 'red'});
}
}
data = [
{ x:0,y:0},
{ x:3,y:0},
{ x:3,y:7},
{ x:30, y:7},
//{x:30,y:65}
]
height = width
d3 = require('d3@6.7.0/dist/d3.js')
import {Cosy} from '@ralfstx/cosy';
style = html`<style>
.grid line {
stroke: lightgray;
stroke-width: 0.5px;
}
.axis line {
stroke: black;
stroke-width: 1px;
}
.axis text {
fill: black;
stroke-width: 1px;
}
.axis text.label {
font-size: 12px;
}
</style>`
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.
