30:[] 2e:{"title":"📑 HTML Styling","cells":[{"id":0,"value":"md`

📑 HTML Styling

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`\n\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"html`

\nLet's have a look at this example of text styling.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"params=({width:200,height:200})","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"svg1=d3.select(DOM.svg()).attr('class','svg1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof v=html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"html`

${v}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"viewof t=html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"html`

Evaluate the next code cell for converting \nthe Fahrenheit temperature to Celsius

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"{const svg3=d3.select(DOM.svg())\n .attr('width',300).attr('height',300)\n .attr('class','svg3')\nconst cols=({1:'slategray',2:'#ff6eff'})\nfor (var i=1; i<7; i++) {\n svg3.append('circle').attr('id','c'+i)\n .attr('transform','translate(150,150)')\n .attr('cx',0).attr('cy',0).attr('r',140-i*20)\n .attr('stroke','silver')\n .attr('fill-opacity',.1*i)\n .transition().duration(10000)\n .styleTween('fill',function() {\n return d3.interpolate(cols[1],cols[2]); }); }\nreturn svg3.node()}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}