ClipPathUS Map - State Grid - Metro transitions on canvasAdjust Curve in parallel Sankey linksSvg Path Shape Smoothing TechniqueDefining class methods outside bodyD3 Pie Chart Update - v4-v7Extract empty hierarchy from flat dataNetwork Chart, Multiple Links, with shader arrowsd3.js zoom & minimap (forked)Inputs in gridSvg Drop Shadows PlaygroundD3 Lasso selectionJsFiddle - embed notebookstroke-dasharray animationsPulse
Dividing half circle to equal parts
r=300
sortConfig = [4,1,3,2,5,6]
arr = d3.range(divideCount).map(d=>d+1)
ordered = {
if(arr.length==1){
return [1];
}
if(arr.length==2){
return [1,2];
}
if(arr.length==3){
return [1,3,2];
}
if(arr.length==4){
return [4,1,3,2];
}
if(arr.length==5){
return [4,1,3,2,5];
}
if(arr.length==6){
return [4,1,3,2,5,6];
}
var result=[];
var rightCount=1;
var leftCount=1
arr.forEach((d,i)=>{
if(i<sortConfig.length){
result.push(sortConfig[i])
}
if(i>=sortConfig.length){
debugger;
var endDiff = result[result.length-1]-result[result.length-2];
var startDiff = result[0]-result[1];
if(endDiff==1 & startDiff==1 && result[i-1]==d-1){
result.unshift(d);
return;
}
if(endDiff==1 & startDiff==1){
result.push(d);
return;
}
if(endDiff==3 ){
result.push(d);
return;
}
if(endDiff==1 & startDiff==3){
result.unshift(d);
}
}
})
return result;
}
angle = pi/(divideCount+1)
angles=d3.range(divideCount+1).map(d=>angle*(d+1))
xs = angles.map(angle=>r-Math.cos(angle)*r).slice(0,angles.length-1)
ys = angles.map(angle=>Math.sin(angle)*r).slice(0,angles.length-1)
ysDescnding = ys.slice().sort((a,b)=>a<b)
pi = Math.PI
d3 = require('d3')
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.
