31:T4e8,html`

value #1	value #2	value #3

value #4	value #5	value #6

value #7	value #8	value #9

`32:T6a6,html`

Building Bar Charts

${get_data()[0]}

${get_data()[1]}

${get_data()[2]}

${get_data()[3]}

${get_data()[4]}

${get_data()[5]}

${get_data()[6]}

${get_data()[7]}

${get_data()[8]}

`33:[] 2f:{"title":"📑 Chart Building","cells":[{"id":0,"value":"md`# 📑 Chart Building`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof font_family=html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof font_size_px=html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof background_color=html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"k=.009","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"linear_gradient=({color1:'lightgray',percent1:0,\n color2:'silver',percent2:33,\n color3:'slategray',percent3:67,\n color4:'darkslategray',percent4:100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`\n\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"{ var div=d3.select('#d3barchart')\n div.style('text-align','right')\n .style('text-shadow','4px 4px 4px darkslategray')\n .style('padding','10px')\n .style('width','80%')\n .style('color',d3.interpolateSinebow((now%30000)/30000))\n .style('background',d3.interpolateSinebow((now%30000)/30000));\n var x=d3.scaleLinear().domain([0,d3.max(get_data())]).range([0,.75*width]);\n div.select('#d3barchart_title')\n .text('An Example of D3 Bar Charts')\n .style('text-shadow','4px 4px 4px darkslategray')\n .style('color','silver')\n .style('font-family',`${font_family}`)\n .style('font-size',`${font_size_px}px`);\n div.selectAll('div').data(get_data()).join('div')\n .style('background','silver')\n .style('padding','5px').style('margin','3px')\n .style('width',d=>`${x(d)}px`)\n .style('font-family',`${font_family}`)\n .style('font-size',`${font_size_px}px`)\n .text(d=>d);\n return div.node(); }","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"function get_data() {\n var data=[];\n for (var i=1; i<10; i++){\n var v=parseFloat(document.getElementById('value'+i).value);\n data.push(v)};\n return data}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"d3=require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}