D3 Curve Editor 
JavaScript library for editing curves
Usage
Include it in your html:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-curve-editor.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-curve-editor.css" rel="stylesheet" type="text/css"></link>Or install from NPM
import * as D3CE from 'd3-curve-editor';Create SVG container
<svg tabindex="1" id="editor"></svg>Add lines
var lines = [];
lines.push(new D3CE.Line("#47a",[
new D3CE.CurvePoint(0,0).isFixed(true),
new D3CE.CurvePoint(1,1)
]));
lines.push(new D3CE.Line("#fd3",[
new D3CE.CurvePoint(0.2,0),
new D3CE.CurvePoint(1,0.4)
]));Initialize editor
var container = querySelector('#editor');
var editor = new D3CE.CurveEditor(container,lines,{curve: d3.curveCatmullRom});
editor.eventListener.on('change',()=>{});For details see demo
Dependencies
License
MIT