30:Tc58,pieChartRender = { const pie = d3.pie() .sort(null) .value(function (d) { return d.occurences; }) const margin = {top: 20, right: 200, bottom: 20, left: 200}; const width = 300, height = 300, radius = 100; const arc = d3.arc() .outerRadius(radius - 10) .innerRadius(40); const outArc = d3.arc() .outerRadius(radius + 40) .innerRadius(radius - 10); const arcTween =function (a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function (t) { return arc(i(t)); }; } d3.select(graph).selectAll('.graphArea').data(['svg']).enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr('class','graphArea') .attr("transform", "translate(" + (margin.left + width / 2) + "," + (margin.top + height / 2 ) + ")"); const pieChart = d3.select(graph).select('.graphArea'); const arcs = pieChart.selectAll(".arc") .data(pie(toJS)); arcs.enter() .append("g") .attr("class", "arc") .each(function (d) { d3.select(this).append("path") .attr("d", arc) .style("fill",d.data.color) .style("stroke","white") var x = (outArc.centroid(d)[0] +width/2) > width / 2 ? width / 2 : -width / 2; d3.select(this).append("text") .attr("transform", "translate(" +x +","+ outArc.centroid(d)[1] +")") .attr("dy", ".35em") .attr("fill", "black"); d3.select(this) .append("line") .attr("class", "pend") .attr("stroke", "grey") .attr("x1", arc.centroid(d)[0]) .attr("x2", outArc.centroid(d)[0]) .attr("y1", arc.centroid(d)[1]) .attr("y2", outArc.centroid(d)[1]) d3.select(this) .append("line") .attr("class", "hor") .attr("stroke", "grey") .attr("x1", outArc.centroid(d)[0]) .attr("x2", x) .attr("y1", outArc.centroid(d)[1]) .attr("y2", outArc.centroid(d)[1]) }) .merge(arcs) .each(function (d) { d3.select(this) .select("path") .transition() .duration(500) .attrTween("d", arcTween) .style("fill",d.data.color); var x = (outArc.centroid(d)[0] + width/2) > width / 2 ? width / 2 : -width / 2; var anchor = (outArc.centroid(d)[0] +width/2) > width / 2 ?"start":"end"; d3.select(this).select("text") .style("text-anchor",anchor) .attr("dx", ((outArc.centroid(d)[0] +width/2) > width / 2) ?"1em":"-1em") .transition() .duration(500) .attr("transform", "translate(" +x +","+ outArc.centroid(d)[1] +")") .text(d.data.tag); d3.select(this).select(".pend") .transition() .duration(500) .attr("x1", arc.centroid(d)[0]) .attr("x2", outArc.centroid(d)[0]) .attr("y1", arc.centroid(d)[1]) .attr("y2", outArc.centroid(d)[1]) d3.select(this) .select(".hor") .transition() .duration(500) .attr("x1", outArc.centroid(d)[0]) .attr("x2", x) .attr("y1", outArc.centroid(d)[1]) .attr("y2", outArc.centroid(d)[1]) }); arcs.exit().remove(); }31:T1249,d3Table = { const sizeX = data.length > 0 ? data[0].length : 0 const sizeY = data.length > 0 ? data[0].length : 0 const tHead = d3.range(0,sizeX).map(c=> getColumnLetter(c)) const headers = d3.select(table) .on('keydown',()=>{ if (selected.start.x != selected.end.x || selected.start.y != selected.end.y){ switch (d3.event.keyCode) { case 46: case 8: let temp = data.map( (d,y)=> d.map( (c,x)=> x >= Math.min(selected.start.x,selected.end.x ) && x<=Math.max(selected.start.x,selected.end.x )&& y >= Math.min(selected.start.y,selected.end.y ) && y<=Math.max(selected.start.y,selected.end.y )? '' : c ) ) mutable data = temp; break; } } }) .on('copy', ()=>{ let selection = data.filter((line,y)=> y >= Math.min(selected.start.y,selected.end.y ) && y<=Math.max(selected.start.y,selected.end.y ) ).map(line=> line.filter((cell,x)=> x >= Math.min(selected.start.x,selected.end.x ) && x<=Math.max(selected.start.x,selected.end.x ) )) navigator.clipboard.writeText(selection.map(line=> line.join("\t")).join("\r\n")) }) .on('paste', (e)=>{ const pasted = d3.event.clipboardData.getData('text/plain') .split("\r\n").map((line)=>line.split("\t")); pasted.forEach((line,pj)=>{ line.forEach((cell,pi) => { setCellData(pi+selected.start.x,pj+selected.start.y,cell) })}) }) .select('thead') .select('tr') .selectAll('.columnHeaders') .data(tHead); headers.enter() .append('th') .attr('class','columnHeaders') .merge(headers) .on('dblclick',function(d,i){addColumn(i)}) .on('click',(d,x)=>{ let temp = selected; temp.start.y =0; temp.start.x =x; temp.end.y =sizeY; temp.end.x =x; mutable selected = selected; }) .text(d=> d) headers.exit().remove(); const rows = d3.select(table) .select('tBody').selectAll('tr').data(data); rows.enter().append('tr') .each(function(d,y){ d3.select(this).append('td').attr('class','rowHeaders'); d3.select(this).selectAll('.cell') .data(d=> d) .enter() .append('td').attr('class','cell') .text(d=> d) }) .merge(rows) .each(function(d,y){ d3.select(this).select('.rowHeaders') .on('click',(d,x)=>{ let temp = selected; temp.start.y =y; temp.start.x =0; temp.end.y =y; temp.end.x =sizeY; mutable selected = selected; }) .on('dblclick',()=>{addRow(y)}).text(y); const cells = d3.select(this).selectAll('.cell').data(d=> d); cells.enter() .append('td') .attr('class','cell') .merge(cells) .text(d=> d) .on('mousedown',(d,x)=>{ let temp = selected; temp.start.y =y; temp.start.x =x; temp.end.y =y; temp.end.x =x; mutable selected = selected; }) .on('mouseup',function(d,x){ if ( selected.start.y === y && selected.start.x === x){ const self = d3.select(this); self.text(''); const input = d3.select(this).append('input').attr("type","text") .attr('value',d) .on('input',function(){ this.style.width = d3.event.target.value.length + "ch"}) .on('change',()=>{ setCellData(x,y,d3.event.target.value)}) .on('blur',function(){ d3.select(this).remove(); self.text(d) }).on('paste',(e)=>{d3.event.preventDefault()}) input.node().style.width =String(d).length+ "ch" input.node().focus(); input .node().select(); }else { let temp = selected; selected.end.y =y; selected.end.x =x; mutable selected = selected; } }) }) rows.exit() .each(function(d){ const cells = d3.select(this).selectAll('.cell').data(d=> d).exit().remove(); }).remove(); d3.select(table).select('tBody').selectAll('tr') .each(function(d,y){ d3.select(this).selectAll('.cell') .classed("selected",(d,x)=> y >= Math.min(selected.start.y,selected.end.y ) && y<=Math.max(selected.start.y,selected.end.y ) && x >= Math.min(selected.start.x,selected.end.x ) && x<=Math.max(selected.start.x,selected.end.x ) ) }) }32:[] 2e:{"title":"Simple SpreadSheet ","cells":[{"id":0,"value":"md`# Simple SpreadSheet \nWith copy and paste capabilities.\ndouble click a column header to add a column,\ndouble click a row header to add a row`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"table = html`\n\n

\n \n \n \n \n \n \n \n

\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"JSON.stringify(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"graph = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"md `### Exemple with a piechart\nAs you change spreadsheet data you can see the piechart update.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"mutable data = [['tag','occurences','color'],['One',1,'rgb(110, 64, 170)'],['Two',2,'rgb(175, 240, 91)'],['Three',2,'rgb(255, 94, 99)'],['Four',4,'rgb(26, 199, 194)']]","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"getColumnLetter = (c) => {\n const alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n let count = c;\n let res = '';\n while(count>=0){\n res = alphabet[count%26]+res;\n count -=26;\n }\n\n return res\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"JSON.stringify(toJS)\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"addColumn= (index)=> {\n let temp = data.map(d=> [\n ...d.slice(0, index),\n '',\n ...d.slice(index)\n]\n);\n mutable data = temp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"addRow= (index)=> {\n let temp = data;\n temp = [\n ...temp.slice(0, index),\n d3.range(0,sizeX).map(d=>''),\n ...data.slice(index)\n]\n mutable data = temp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"{\n let div = html `

at index

`\n d3.select(div).select('input[type=button]').on('click',()=>{addColumn(columnIndex)})\n \n d3.select(div).select('input[type=number]').on('input',()=>{\n mutable columnIndex = Math.max(0,Math.min(sizeX,Number(d3.event.target.value)))\n })\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"{\n let div = html `

at index

`\n d3.select(div).select('input[type=button]').on('click',()=>{addRow(rowIndex)})\n \n d3.select(div).select('input[type=number]').on('input',()=>{\n mutable rowIndex = Math.max(0,Math.min(sizeY,Number(d3.event.target.value)))\n })\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"mutable columnIndex = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"mutable rowIndex = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"sizeX = data.length>0? data[0].length : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"sizeY = data.length>0? data.length : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"mutable selected = ({start:{x:0,y:0},end:{x:0,y:0}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"setData= (d)=>{\n mutable data = d\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"setCellData = (i,j,value)=>{\n const sizeX = data.length > 0 ? data[0].length : 0 \n const sizeY = data.length > 0 ? data.length : 0 \n if (i < sizeX && j0 && data[0].length>0){\n return data.slice(1,data.length).map(line=> {\n return line.map((cell,x)=>\n ({[String(data[0][x])]:cell})).reduce((a,b)=>({...a,...b}),{})\n })\n }\n return []\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"setJS = (js) => {\n if (js && js.length>0){\n mutable data = [Object.keys(js[0])].concat (js.map(d=> Object.values(d)))\n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}