d3 radial lines / Rebecca Sutton Koeser

Lead Research Software Engineer @Princeton-CDH. Previously software engineer at @emory-libraries and contributor to @ecds, @emory-lits-labs

Workspace

Public

Edited

May 30, 2023

// copied from the demo notebook

spiral = Array.from({ length: 76 }, (_, i) => [

(Math.PI / 3) * i, // angle (in radians)

2 * i // radius

])

d3.lineRadial()(spiral)

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

spiral

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

// what if we apply a curve to the same thing?

svg`<svg width=300 height=300><path d="${d3.lineRadial().curve(d3.curveNatural)(

spiral

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

circle = Array.from({length: 60}, (_, i) => [

(Math.PI / 20) * i,

100

])

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

circle

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

circle2 = Array.from([0, 30, 60, 90, 120, 180, 210, 240, 270, 290, 320, 340, 350, 360, 380,]).map(x => [Math.PI/180 * x, 100])

circle3 = Array.from({length: 37}, (_, i) => [

(Math.PI/180) * i * 10,

100])

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

circle3

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

sineshape = Array.from({length: 37}, (_, i) => [

(Math.PI/180) * i * 10,

Math.abs(Math.sin(i*3.5) * 100)])

// (i > 9 && i < 27 ) ? 100 : 50])

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

sineshape

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

pinwheel = Array.from({length: 37}, (_, i) => [

(Math.PI/180) * i * 10,

(i % 9) * 15])

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

pinwheel

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

// simplified gielis equation from https://www.researchgate.net/publication/333023328_A_geometrical_model_for_testing_bilateral_symmetry_of_bamboo_leaf_with_a_simplified_Gielis_equation

gielis = Array.from({length: 37}, (_, i) => {

let angle = (Math.PI/180) * i * 10;

return [ angle,

(1 / (Math.cos(angle/4) + Math.sin(angle/4))**5) * 100 ];

})

svg`<svg width=300 height=200><path d="${d3.lineRadial()(

gielis

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

// can we use this equation to make two points instead of a teardrop?

// ... might be some way to make it work if we weren't plotting all the points and fit a curve...

halfgielis = Array.from({length: 37}, (_, i) => {

let angle = (Math.PI/180) * i * 10;

let rangle = angle;

// if (i >= 27) {

rangle = (Math.PI/180) * (i % 18) * 10;

// }

return [ angle,

(1 / (Math.cos(rangle/4) + Math.sin(rangle/4))**5) * 100 ];

})

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

halfgielis

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

// what if we don't use as many angles?

gielis2 = Array.from([0, 9, 18, 27, 36], (d, i) => {

let angle = (Math.PI/180) * d * 10;

return [ angle,

(1 / (Math.cos(angle/4) + Math.sin(angle/4))**5) * 100 ];

})

svg`<svg width=300 height=200><path d="${d3.lineRadial()(

gielis2

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

{

// what if we apply a curve?

let curvedGielis = d3.lineRadial().curve(d3.curveNatural)(gielis2)

return svg`<svg width=300 height=200><path d="${curvedGielis}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

}

// try a parabola ?

// 𝑟 =5 / 3+3cos𝜃

parabola = Array.from({length: 36}, (_, i) => {

let angle = (Math.PI/180) * i * 10;

return [ angle,

5 / (3 + 3 * Math.cos(angle))];

})

svg`<svg width=300 height=300><path d="${d3.lineRadial()(

parabola

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

// ellipse ? r = 10/ 5−4cos𝜃

ellipse = {

function ellipseradius(angle) {

return 10 / (5 - 4 * Math.cos(angle));

}

let ellipse = Array.from({length: 37}, (_, i) => {

let angle = (Math.PI/180) * i * 10;

return [ angle,

ellipseradius(angle) * 15];

// (10 / (5 - 4 * Math.cos(angle))) * 15]; // multiply to scale up

})

return ellipse;

}

svg`<svg width=300 height=200><path d="${d3.lineRadial()(

ellipse

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

// same points but draw with a curve

svg`<svg width=300 height=200><path d="${d3.lineRadial().curve(d3.curveNatural)(

ellipse

)}" fill="none" stroke="black" transform="translate(150,150)"></svg>`

leaf = {

let width = 40;

let height = 100;

let leaf = Array.from([0, 90, 180, 270, 360], (val, i) => {

let angle = (Math.PI/180) * val; // convert to radians

return [ angle,

([90, 270].includes(val) ? width/2 : height/2) ];

})

return leaf;

}

svg`<svg width=200 height=200><path d="${d3.lineRadial().curve(d3.curveNatural)(

leaf

)}" fill="none" stroke="green" transform="translate(150,100)" stroke-width="2"></svg>`

leaf2 = {

let width = 40;

let height = 100;

// what if we tweak the angles we include?

let leaf = Array.from([0, 10, 95, 180, 185, 270, 360], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ];

})

return leaf

// return svg`<svg width=200 height=200><path d="${d3.lineRadial().curve(d3.curveNatural)(

// leaf

// )}" fill="none" stroke="black" transform="translate(150,100)"></svg>`

}

svg`<svg width=200 height=200><path d="${d3.lineRadial().curve(d3.curveNatural)(

leaf2

)}" fill="none" stroke="green" transform="translate(150,100)" stroke-width="2"></svg>`

// try some different curve functions

// natural basis-closed bump-y cardinal-closed catmullrom

// curveNatural still seems like the best option

svg`<svg width=500 height=200>

</svg>`

// how much can we rely on css transforms to scale ?

// default scale-x scale-y skew perspective

// skewing seems to conflict with translate

// perspective can't be applied to svg elements

{

let leafPath = d3.lineRadial().curve(d3.curveNatural)(leaf2);

return svg`<svg width=500 height=200>

</svg>`

}

// play with tweaking angles some more

{

let width = 40;

let height = 100;

// what if we tweak the angles we include?

let leaf = Array.from([0, 10, 95, 180, 185, 270, 360], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ];

});

let leaf2 = Array.from([0, 20, 85, 180, 185, 270, 360], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ];

});

let leaf3 = Array.from([10, 20, 85, 180, 185, 270, 370], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ];

});

let leaf4 = Array.from([10, 20, 85, 160, 170, 270, 340, 370], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 85 && val <= 95 || val >= 265 && val < 274) ? width/2 : height/2 ];

});

let leaf5 = Array.from([0, 10, 20, 90, 180, 270, 360], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 85 && val <= 95 || val >= 265 && val < 276) ? width/2 : height/2 ];

});

let leaf6 = Array.from([0, 45, 90, 125, 180, 270, 360], (val, i) => {

let angle = (Math.PI/180) * val; // convert degrees to radians

return [ angle,

(val >= 45 && val <= 95 || val >= 265 && val < 276) ? width/2 * (10 / (7 - 4 * Math.cos(angle))) : height/2 ];

});

let radialCurve = d3.lineRadial().curve(d3.curveNatural)

return svg`<svg width=600 height=200>

<path d="${radialCurve(leaf6)}" fill="none" stroke="blue" stroke-width="2" transform="translate(550,100)"/>`;

// <path d="${leafPath}" fill="none" stroke="green" stroke-width="2" transform="skewX(10deg) translate(350,100) "/>

// <path d="${leafPath}" fill="none" stroke="green" stroke-width="2" transform="translate(450,100)" style="perspective:60px"/>

// </svg>`

}

// another leaf shape equation

// from https://link.springer.com/article/10.1007/s11676-021-01385-x#Equ15

// references another article that adds a deformation parameter / deformation matrix

leafcurve = Array.from({length: 37}, (_, i) => {

// parameters to fit;

// α = 1.5, β = 2.5 and γ = 2

let gamma = 2;

let alpha = 1.5;

let beta = 2.5;

let angle = (Math.PI/180) * i * 10;

let radius;

if (angle >= 0 && angle < Math.PI ) {

radius = (- alpha * angle - beta * angle**2)**gamma;

} else if (angle >= Math.PI && angle < 2 * Math.PI) {

radius = (- alpha * (2*Math.PI - angle) - beta*(2*Math.PI - angle)**2)**gamma;

}

return [ angle, radius];

})

svg`<svg width=500 height=500><path d="${d3.lineRadial()(

leafcurve

)}" fill="none" stroke="green" transform="translate(250,100) scale(0.4)" stroke-width="4"></svg>`

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more