30:T1608,class GuitarNeck { constructor(parentSVG) { this.parent = parentSVG; // size of chart this.totalWidth = 1024; this.totalHeight = Math.max(this.totalWidth / 6, 300); this.margin = { top: 120, right: 10, left: 30, bottom: 30 }; // tuning, number of strings/frets this.tuning = ["E4", "B3", "G3", "D3", "A2", "E2"]; this.parsedTuning = this.tuning.map(Note.get); this.numStrings = this.tuning.length; this.minFret = 0; this.maxFret = Math.round(this.totalWidth / 48); // data this.placements = null; // scale this.scale = null; // tooltip this.tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .attr("class", "tiplabs") .style("font-family", "sans-serif") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "black") .style("list-style", "none"); } size(width, height) { this.totalWidth = width; this.totalHeight = height; return this; } // get the notes of the scale getNotes(scale) { let arr = []; for (let i = 0; i < 6; i++) { let int_string = scale.split(" ")[0] + i + " " + scale .split(" ") .slice(1, scale.split(" ").length) .join(" "); let notes = Scale.scale(int_string).notes; arr.push(notes); } // return notes return arr.flat(); } // place the notes onto a string placeNote(noteOrStr) { const note = Note.get(noteOrStr); return this.parsedTuning .map(string => note.height - string.height) .map((fret, stringIndex) => fret >= this.minFret && fret <= this.maxFret ? { note, fret, string: stringIndex + 1 } : null ) .filter(Boolean); } // return to data addScale(scale) { this.scale = scale; this.placements = this.getNotes(scale) .map(d => this.placeNote(d)) .flat(); } drawFretBoard() { const stringToY = d3 .scaleLinear() .domain([1, this.numStrings]) .range([this.margin.top, this.totalHeight - this.margin.bottom]); const fretToX = d3 .scaleLinear() .domain([this.minFret, this.maxFret]) .range([this.margin.left, this.totalWidth - this.margin.right]); const g1 = this.parent.append("g"); g1.selectAll('.string') .data(d3.range(1, this.numStrings + 1)) .join('line') .attr('class', 'string') .attr('stroke', 'black') .attr('x1', fretToX(this.minFret)) .attr('x2', fretToX(this.maxFret)) .attr('y1', d => stringToY(d)) .attr('y2', d => stringToY(d)) .attr('stroke-width', 3); g1.selectAll('.fret') .data(d3.range(this.minFret, this.maxFret + 1)) .join('line') .attr('class', 'fret') .attr('stroke', 'black') .attr('y1', stringToY(1) - .5) .attr('y2', stringToY(this.numStrings) + .5) .attr('x1', d => fretToX(d)) .attr('x2', d => fretToX(d)) .attr('stroke-width', d => (d === 0 ? 5 : 3)); const g2 = this.parent.append("g"); g2.append("g") .attr('transform', `translate(${this.margin.left - 10}, -0.5)`) .style("font-size", "20px") .call( d3 .axisLeft() .scale(stringToY) .ticks(this.numStrings) .tickSize(0) ) .call(g => g.select(".domain").remove()); g2.append("g") .attr( 'transform', `translate(${-(fretToX.range()[1] / this.maxFret) / 2}, ${this .totalHeight - this.margin.bottom + 12})` ) .style("font-size", "10px") .call( d3 .axisBottom() .scale(fretToX) .ticks(this.maxFret - this.minFret) .tickSize(0) .tickFormat(x => (x > 0 ? x : "")) ) .call(g => g.select(".domain").remove()); // a group const g3 = this.parent.append("g"); const tooltip = this.tooltip; g3.selectAll('placement') .data(this.placements) .join('circle') .attr('class', 'placement') .attr('cx', d => fretToX(d.fret - 0.5)) .attr('cy', d => stringToY(d.string)) .attr('fill', 'black') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('r', d => (d.fret - 0.5 < 0 ? 0 : 8)) // eslint-disable-next-line .on("pointerenter", function(event, d) { tooltip.style("visibility", "visible"); }) .on("pointermove", function(event, d) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") .style("color", "white") .style("font-style", "normal") .html(`${d.note.pc}`) .style("font-family", "sans-serif"); }) // eslint-disable-next-line .on("pointerleave", function(event, d) { tooltip.style("visibility", "hidden"); }); } // add html text addHTML() { const g4 = this.parent.append("g"); g4.append("foreignObject") //.attr("transform", (d, i) => "translate(20,250)") .attr("width", this.totalWidth / 2) .attr("height", this.margin.top) .append("xhtml:div") .attr("class", "textbox") .style("font", "19px 'Helvetica Neue'") .html( `

Scale: ${this.scale}

Containing the notes: ${Array.from( new Set(this.placements.map(d => d.note.pc)) ).map(d => " " + d)}

` ); } render(scale) { this.addScale(scale); this.drawFretBoard(); this.addHTML(); return this; } }31:Tad7,chart = { const totalWidth = width, totalHeight = Math.max(totalWidth / 6, 200); const svg = d3 .create('svg') .attr('width', totalWidth) .attr('height', totalHeight); const parsedTuning = tuning.map(tonal.Note.get); const numStrings = tuning.length; const minFret = 0; const maxFret = Math.round(totalWidth / 48); const stringToY = d3 .scaleLinear() .domain([1, numStrings]) .range([margin.top, totalHeight - margin.bottom]); const fretToX = d3 .scaleLinear() .domain([minFret, maxFret]) .range([margin.left, totalWidth - margin.right]); svg .selectAll('.string') .data(d3.range(1, numStrings + 1)) .join('line') .attr('class', 'string') .attr('stroke', 'black') .attr('x1', fretToX(minFret)) .attr('x2', fretToX(maxFret)) .attr('y1', d => stringToY(d)) .attr('y2', d => stringToY(d)) .attr('stroke-width', 3); svg .selectAll('.fret') .data(d3.range(minFret, maxFret + 1)) .join('line') .attr('class', 'fret') .attr('stroke', 'black') .attr('y1', stringToY(1) - .5) .attr('y2', stringToY(numStrings) + .5) .attr('x1', d => fretToX(d)) .attr('x2', d => fretToX(d)) .attr('stroke-width', d => (d === 0 ? 5 : 3)); svg .append("g") .attr('transform', `translate(${margin.left - 10}, -0.5)`) .style("font-size", "20px") .call( d3 .axisLeft() .scale(stringToY) .ticks(numStrings) .tickSize(0) ) .call(g => g.select(".domain").remove()); svg .append("g") .attr( 'transform', `translate(${-(fretToX.range()[1] / maxFret) / 2}, ${totalHeight - margin.bottom + 12})` ) .style("font-size", "10px") .call( d3 .axisBottom() .scale(fretToX) .ticks(maxFret - minFret) .tickSize(0) .tickFormat(x => (x > 0 ? x : "")) ) .call(g => g.select(".domain").remove()); function placeNote(noteOrStr) { const note = tonal.Note.get(noteOrStr); return parsedTuning .map(string => note.height - string.height) .map((fret, stringIndex) => fret >= minFret && fret <= maxFret ? { note, fret, string: stringIndex + 1 } : null ) .filter(Boolean); } const placements = getNotes("F major") .map(placeNote) .flat(); return new Set(placements.map(d => d.note.pc)); svg .selectAll('placement') .data(placements) .join('circle') .attr('class', 'placement') .attr('cx', d => fretToX(d.fret - 0.5)) .attr('cy', d => stringToY(d.string)) .attr('fill', 'black') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('r', d => (d.fret - 0.5 < 0 ? 0 : 8)); return svg.node(); }32:[] 2e:{"title":"Scales","cells":[{"id":0,"value":"md`# Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"viewof key = select({\n options: [\"A\", \"B\", \"Bb\", \"C\", \"Db\", \"D\", \"Eb\", \"E\", \"F\", \"Gb\", \"G\"],\n value: \"C\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"viewof scaleType = select({\n options: tonal.ScaleType.all().map(d => d.name),\n value: \"major\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"GuitarFretsChart = {\n const w = 1024,\n h = 300;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, w, h]);\n\n let scale = key + \" \" + scaleType;\n\n new GuitarNeck(svg).size(w, h).render(scale);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`\nTODO:\n- Highlight notes on hover\n- Highlight other same notes across the neck on hover\n- Show a tooltip which changes on hover (note, scale currently, and synonyms?)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"margin = ({\n top: 10,\n right: 10,\n left: 30,\n bottom: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"getNotes = function(scale) {\n let arr = [];\n for (let i = 0; i < 6; i++) {\n let int_string =\n scale.split(\" \")[0] +\n i +\n \" \" +\n scale\n .split(\" \")\n .slice(1, scale.split(\" \").length)\n .join(\" \");\n let notes = tonal.Scale.scale(int_string).notes;\n arr.push(notes);\n }\n return arr.flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"tuning = [\"E4\", \"B3\", \"G3\", \"D3\", \"A2\", \"E2\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"tonal.Scale.scale(\"C1 melodic minor\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"\"C melodic minor\".split(\" \")[0] +\n \" \" +\n \"C melodic minor\"\n .split(\" \")\n .slice(1, \"C melodic minor\".split(\" \").length)\n .join(\" \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"getNotes(\"C melodic minor\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"Scale = tonal.Scale","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"Note = tonal.Note","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"tonal = require('@tonaljs/tonal@4.6.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`Modified from code here: https://observablehq.com/@awhitty/fretboard#tonal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}