31:T573,function chartRgb(interpolate) { const height=200,margin=({top:20,right:20,bottom:20,left:40}); const x=d3.scaleLinear() .range([margin.left,width-margin.right]); const y=d3.scaleLinear().domain([0,255]) .range([height-margin.bottom,margin.top]); const xAxis=g=>g .attr("transform",`translate(0,${height-margin.bottom})`) .call(d3.axisBottom(x).ticks(width/80).tickSizeOuter(0)); const yAxis=g=>g .attr("transform",`translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8)) .call(g=>g.select(".domain").remove()); const svg=d3.select(DOM.svg(width,height)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const g=svg.append("g") .datum(Array.from({length:width},(_,i)=>i/(width-1))) .attr("fill","none").attr("stroke-width",2) .attr("stroke-linejoin","round").attr("stroke-linecap","round"); g.append("path").attr("stroke","#ff3636") .attr("fill","#ff3636").attr("fill-opacity",.1) .attr("d", d3.line().x(x).y(t=>y(d3.rgb(interpolate(t)).r))); g.append("path").attr("stroke","#36ff36") .attr("fill","#36ff36").attr("fill-opacity",.1) .attr("d",d3.line().x(x).y(t=>y(d3.rgb(interpolate(t)).g))); g.append("path").attr("stroke","#3636ff") .attr("fill","#3636ff").attr("fill-opacity",.1) .attr("d",d3.line().x(x).y(t=>y(d3.rgb(interpolate(t)).b))); return svg.node();}32:[] 2f:{"title":"📑 Plotting Exercises ","cells":[{"id":0,"value":"md`# 📑 Plotting Exercises
\n## Syntax Exploration`","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"col='steelblue'","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`

\nThe pleasant color for visualizations is

${col}

.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"function greet(subject) {\n return html`

Hello, ${subject}!

`;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"greet('JavaScript')","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"cars=fetch('https://raw.githubusercontent.com/'\n .concat('vega/vega/v4.3.0/docs/data/cars.json'))\n .then(response=>response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3.max(cars,d=>d.Displacement)-d3.min(cars,d=>d.Displacement)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof v=html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"html`

${v}

.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`## The First Steps`","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"function interpolateRainbow(t) {\n return t=(t+.2)%1,\n d3.cubehelix(\n 360*t-100,1.5-1.5*Math.abs(t-.5),.8-.9*Math.abs(t-.5));}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"chartRgb(interpolateRainbow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"d3=require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}