31:T4cd,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([100,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform","translate(30,0)") d3.axisLeft(yScale)(yAxis) // //circles //for(var i = 0;i < binsData.length;i++){ // svg.append("circle") // .attr("r",5) // .attr("cx",xScale(binsData[i].x0)) // .attr("cy",yScale(binsData[i].length)) // .attr("fill","Lavender") // .attr("stroke","black") // } //path var pathData = d3.line().x(d => xScale(d.x0)).y(d => yScale(d.length)).curve(d3.curveMonotoneX)(binsData) svg.append("path") .attr("stroke","black") .attr("fill","lavender") .attr("d",pathData) //text svg.append("text") .text("Miles per gallon density") .attr("x",400) .attr("y",150) return svg.node() }32:T4e4,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([45,220]).range([30,570]) var yScale = d3.scaleLinear().domain([120,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform","translate(30,0)") d3.axisLeft(yScale)(yAxis) // //circles //for(var i = 0;i < binsData.length;i++){ // svg.append("circle") // .attr("r",5) // .attr("cx",xScale(binsData[i].x0)) // .attr("cy",yScale(binsData[i].length)) // .attr("fill","Lavender") // .attr("stroke","black") // } //path var areaData = d3.area().x(d => xScale(d.x0)).y0(d => yScale(0)) .y1(d=>yScale(d.length)).curve(d3.curveMonotoneX)(horsePowerData) svg.append("path") .attr("stroke","black") .attr("fill","lavender") .attr("d",areaData) //text svg.append("text") .text("Horsepower density") .attr("x",400) .attr("y",150) return svg.node() }33:T4dc,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([100,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform","translate(30,0)") d3.axisLeft(yScale)(yAxis) // //circles for(var i = 0;i < binsData.length;i++){ svg.append("rect") .attr("x",xScale(binsData[i].x0)) .attr("y",yScale(binsData[i].length)) .attr("width",xScale(binsData[i].x1) - xScale(binsData[i].x0)) .attr("height",yScale(0) - yScale(binsData[i].length)) .attr("fill","Lavender") .attr("stroke","black") } //totals for(var i = 0;i < binsData.length;i++){ var middle = (binsData[i].x1 + binsData[i].x0)/2 svg.append("text") .text(binsData[i].length) .attr("x",xScale(middle)) .attr("y",yScale(binsData[i].length)-(5)) .attr("text-anchor","middle") } return svg.node() }34:[] 2f:{"title":"\nMarch 30th and April 1st\n","cells":[{"id":0,"value":"html`\n\n\n

\nMarch 30th and April 1st\n

\n\n

March 30th

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"html`\n

April 1st

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"md`\n---\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"carsData = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"binsData = d3.histogram().value(d => d.Miles_per_Gallon)(carsData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":982,"value":"horsePowerData = d3.histogram().value(d => d.Horsepower)(carsData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"binsData.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"binsData[2].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"binsData[2].x0","pinned":true,"hidden":false,"mode":"ojs"},{"id":945,"value":"binsData[2].x1","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}