31:T6ed,{ const width = 900, height = 450; const myDiv = html`

`; const dataset_I = anscombe.filter(d=>(d.dataset=="I")); const dataset_II = anscombe.filter(d=>(d.dataset=="II")); const dataset_III = anscombe.filter(d=>(d.dataset=="III")); const dataset_IV = anscombe.filter(d=>(d.dataset=="IV")); const traces = [ { x: dataset_I.map(d=>d.x), y: dataset_I.map(d=>d.y), mode: 'markers', type: 'scatter' }, { x: dataset_II.map(d=>d.x), y: dataset_II.map(d=>d.y), mode: 'markers', type: 'scatter', xaxis: 'x2', yaxis: 'y2', }, { x: dataset_III.map(d=>d.x), y: dataset_III.map(d=>d.y), mode: 'markers', type: 'scatter', xaxis: 'x3', yaxis: 'y3', }, { x: dataset_IV.map(d=>d.x), y: dataset_IV.map(d=>d.y), mode: 'markers', type: 'scatter', xaxis: 'x4', yaxis: 'y4' }]; const layout = { grid: {rows: 2, columns: 2, pattern: 'independent'}, autosize: false, width: width, height: height, title:'Anscombe Quartet (sample plot for reference)', xaxis: { //showgrid: true, //zeroline: true, showline: true, }, yaxis: { title: { text: 'y Axis', }, showline: true, }, xaxis2: { showline: true, }, yaxis2: { showline: true, }, xaxis3: { title: { text: 'x Axis', }, showline: true, }, yaxis3: { title: { text: 'y Axis', }, showline: true, }, xaxis4: { title: { text: 'x Axis', }, showline: true, }, yaxis4: { showline: true, } }; return Plotly.newPlot(myDiv, traces, layout); }32:T402,{ const getDensityData = data => { const dataExtent = d3.extent(data); const densityDataLength = data.length; const bandWidth = data.length * 0.002; const delta = (dataExtent[1] - dataExtent[0]) / densityDataLength; const X = new Array(densityDataLength + 1) .fill(0) .map((d, i) => dataExtent[0] + i * delta); const Y = kde(kernel, X, data, bandWidth); return { X, Y }; }; const data = oldFaithful.map(d => d.eruptions); const densityData = getDensityData(data); const myDiv = html`

`; const trace = { x: data, autobinx: false, // For Bin control in Histogram histnorm: "probability density", type: 'histogram', name: 'Eruptions', nbinsx: 25 }; let trace1 = { type: "scatter", x: densityData.X, y: densityData.Y, marker: { color: "black" }, name: 'Eruptions Density' }; var layout = { bargap: 0.05 }; return Plotly.newPlot(myDiv, [trace, trace1], layout); }33:T470,{ const oldFaithful = await d3.tsv( "https://gist.githubusercontent.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9/raw/dcb23e8f6eefdbc4ada97d6eda22b2a4f256c263/faithful.tsv", d3.autoType ); const binSize = densityDataLength / 15; const getDensityData = data => { const dataExtent = d3.extent(data); const densityDataLength = data.length; const bandWidth = data.length * 0.03; const delta = (dataExtent[1] - dataExtent[0]) / densityDataLength; const X = new Array(densityDataLength + 1) .fill(0) .map((d, i) => dataExtent[0] + i * delta); const Y = kde(kernel, X, data, bandWidth); return { X, Y }; }; const data = oldFaithful.map(d => d.waiting); const densityData = getDensityData(data); const myDiv = html`

`; let trace1 = { type: "scatter", x: densityData.X, y: densityData.Y, fill: 'tozeroy', mode: "none" }; let trace2 = { type: "scatter", x: densityData.X, y: densityData.Y.map(d => -d), fill: 'tozeroy', mode: "none" }; return Plotly.newPlot(myDiv, [trace1, trace2]); }34:T4ed,{ const myDiv = html`

`; const dates = appleLast30daysData.map(d => d.date); const highs = appleLast30daysData.map(d => d.high); const lows = appleLast30daysData.map(d => d.low); const trace1 = { type: "scatter", mode: "lines", name: 'AAPL High', x: dates, y: highs, line: { color: '#17BECF' } }; const trace2 = { type: "scatter", mode: "lines", name: 'AAPL Low', x: dates, y: lows, line: { color: '#7F7F7F' } }; const traceData = [trace1, trace2]; const layout = { title: 'Time Series with Rangeslider', xaxis: { autorange: true, range: ['2015-02-17', '2017-02-16'], rangeselector: { buttons: [ { count: 1, label: '1m', step: 'month', stepmode: 'backward' }, { count: 6, label: '6m', step: 'month', stepmode: 'backward' }, { step: 'all' } ] }, rangeslider: { range: d3.extent(dates) }, type: 'date' }, yaxis: { autorange: true, type: 'linear' } }; Plotly.newPlot(myDiv, traceData, layout); return myDiv; }35:T518,{ const myDiv = html`

`; const dates = appleLast30daysData.map(d => d.date); const highs = appleLast30daysData.map(d => d.high); const lows = appleLast30daysData.map(d => d.low); const trace1 = { type: "scatter", //mode: "none", fill: 'tonexty', name: 'AAPL High', x: dates, y: highs, line: { color: '#17BECF' } }; const trace2 = { type: "scatter", mode: "none", fill: 'tozeroy', name: 'AAPL Low', x: dates, y: lows, line: { color: '#7F7F7F' } }; const traceData = [trace1, trace2]; const layout = { title: 'Time Series with Rangeslider', xaxis: { autorange: true, range: ['2015-02-17', '2017-02-16'], rangeselector: { buttons: [ { count: 1, label: '1m', step: 'month', stepmode: 'backward' }, { count: 6, label: '6m', step: 'month', stepmode: 'backward' }, { step: 'all' } ] }, rangeslider: { range: d3.extent(dates) }, type: 'date' }, yaxis: { range: [50, 150], type: 'linear' } }; Plotly.newPlot(myDiv, traceData, layout); return myDiv; }36:T4e1,{ const myDiv = html`

`; var data = [ { day: 'Mon', apricots: 120, blueberries: 180, cherries: 100 }, { day: 'Tue', apricots: 60, blueberries: 185, cherries: 105 }, { day: 'Wed', apricots: 100, blueberries: 215, cherries: 110 }, { day: 'Thu', apricots: 80, blueberries: 230, cherries: 105 }, { day: 'Fri', apricots: 120, blueberries: 240, cherries: 105 } ]; const days = data.map(d => d.day); const apricots = data.map(d => d.apricots); const blueberries = data.map(d => d.blueberries); const cherries = data.map(d => d.cherries); const traces = [ { theta: days, r: apricots, type: 'scatterpolar', fill: 'toself', name: "apricots" }, { theta: days, r: blueberries, type: 'scatterpolar', fill: 'toself', name: "blueberries" }, { theta: days, r: cherries, type: 'scatterpolar', fill: 'toself', name: "cherries" } ]; const layout = { title: 'Star chart', polar: { radialaxis: { visible: true //range: [0, 50] } } }; Plotly.newPlot(myDiv, traces, { title: 'stacked and filled line chart' }); return myDiv; }37:T644,{ const myDiv = html`

`; const data = [ { day: 'Mon', apricots: 120, blueberries: 180, cherries: 100 }, { day: 'Tue', apricots: 60, blueberries: 185, cherries: 105 }, { day: 'Wed', apricots: 100, blueberries: 215, cherries: 110 }, { day: 'Thu', apricots: 80, blueberries: 230, cherries: 105 }, { day: 'Fri', apricots: 120, blueberries: 240, cherries: 105 } ]; const days = data.map(d => d.day); const fruits = ["apricots", "blueberries", "cherries"]; const allSales = data.map(d => fruits.map(fruit => d[fruit])); const annotationData = d3.merge( data.map((d, i) => fruits.map(fruit => ({ x: fruit, y: d.day, text: d[fruit], font: { family: 'Arial', size: 12, color: 'rgb(50, 171, 96)' }, showarrow: false, font: { color: "white" } })) ) ); const traceData = [ { z: allSales, x: fruits, y: days, type: 'heatmap', hoverongaps: false, showarrow: false, font: { color: "white" }, font: { family: 'Arial', size: 12, color: 'rgb(50, 171, 96)' }, showscale: false } ]; const layout = { title: 'Annotated Heatmap', annotations: annotationData, xaxis: { ticks: '', side: 'top' }, yaxis: { ticks: '', ticksuffix: ' ', width: 700, height: 700, autosize: false } }; Plotly.newPlot(myDiv, traceData, layout); return myDiv; }38:T43a,{ const myDiv = html`

`; const data = [ { values: totalCasesByUSregion, labels: USregions, domain: { column: 0 }, name: 'Cases', hoverinfo: 'label+percent+name', hole: .4, type: 'pie', sort: false, direction: 'clockwise' }, { values: totalDeathsByUSregion, labels: USregions, domain: { column: 1 }, name: 'Deaths', hoverinfo: 'label+percent+name', hole: .4, type: 'pie', sort: false, direction: 'clockwise' } ]; var layout = { title: 'Covid-19 Data by US Region', annotations: [ { font: { size: 20 }, showarrow: false, text: 'Cases', x: 0.15, y: 0.5 }, { font: { size: 20 }, showarrow: false, text: 'Deaths', x: 0.85, y: 0.5 } ], //showlegend: false, grid: { rows: 1, columns: 2 } }; Plotly.newPlot(myDiv, data, layout); return myDiv; }39:T47b,{ const myDiv = html`

`; const xData = iris.map(d => d[attribSelections.x]); const yData = iris.map(d => d[attribSelections.y]); const speciesData = iris.map(d => d["species"]); const colors = ["blue", "red", "green"]; const data = irisSpecies.map((species, i) => ({ x: irisGroupedBySpecies.get(species).map(d => d[attribSelections.x]), y: irisGroupedBySpecies.get(species).map(d => d[attribSelections.y]), mode: 'markers', marker: { size: 4, color: colors[i] }, name: species, hovertemplate: `Species: ${species}
${attribSelections.x}: %{x:.2f}
${attribSelections.y}: %{y:.2f}
` })); const layout = { title: `Scatter Plot of Iris ${attribSelections.x} vs ${attribSelections.y}`, xaxis: { autorange: true, type: 'log', title: `${attribSelections.x}` //showgrid: false }, yaxis: { autorange: true, title: `${attribSelections.y}` //type: 'log'attribSelections //showline: true } }; Plotly.newPlot(myDiv, data, layout); return myDiv; }3a:T58d,{ const myDiv = html`

`; const xData = iris.map(d => d[attribSelections.x]); const yData = iris.map(d => d[attribSelections.y]); const speciesData = iris.map(d => d["species"]); const colors = ["blue", "red", "green"]; const data = []; irisSpecies.forEach((species, i) => { const xData = irisGroupedBySpecies .get(species) .map(d => d[attribSelections.x]); const yData = irisGroupedBySpecies .get(species) .map(d => d[attribSelections.y]); data.push({ x: xData, y: yData, mode: 'markers', marker: { size: 4, color: colors[i] }, name: species }); const [a, b] = computeBestLineFit(xData, yData); const xLineFit = d3.extent(xData); const yLineFit = xLineFit.map(x => a + b * x); data.push({ x: xLineFit, y: yLineFit, mode: 'lines', line: { color: colors[i], width: 2 }, name: 'Best Fit' }); }); const layout = { title: `Scatter Plot of Iris ${attribSelections.x} vs ${attribSelections.y}`, xaxis: { autorange: true, type: 'log', title: `${attribSelections.x}` //showgrid: false }, yaxis: { autorange: true, title: `${attribSelections.y}` //type: 'log'attribSelections //showline: true } }; Plotly.newPlot(myDiv, data, layout); return myDiv; }3b:T5c2,drawCorreleationMatrix = (data, attribs) => { const myDiv = html`

`; const xAttribs = attribs; const yAttribs = attribs.slice().reverse(); const zData = yAttribs.map((attrib1, i) => xAttribs.map((attrib2, j) => { if (attrib1 == attrib2) return 1; else return computeR(data.map(d => d[attrib2]), data.map(d => d[attrib1])); }) ); const annotationData = d3.merge( yAttribs.map((attrib1, i) => xAttribs.map((attrib2, j) => ({ x: attrib2, y: attrib1, text: d3.format(".2f")(zData[i][j]), font: { family: 'Arial', size: 12, color: 'rgb(50, 171, 96)' }, showarrow: false, font: { color: "white" } })) ) ); const traceData = [ { z: zData, x: xAttribs, y: yAttribs, type: 'heatmap', hoverongaps: false, showarrow: false, font: { color: "white" }, font: { family: 'Arial', size: 12, color: 'rgb(50, 171, 96)' } //showscale: false } ]; const layout = { title: 'Correlation Matrix', annotations: annotationData, xaxis: { ticks: '', side: 'top' }, yaxis: { ticks: '', ticksuffix: ' ', width: 700, height: 700, autosize: false } }; Plotly.newPlot(myDiv, traceData, layout); return myDiv; }3c:T64d,{ const myDiv = html`

`; const xData = oldFaithful.map(d => d.waiting); const yData = oldFaithful.map(d => d.eruptions); const trace1 = { x: xData, y: yData, mode: 'markers', marker: { size: 4 } }; const trace2 = { x: xData, y: yData, name: 'density', ncontours: 20, colorscale: 'Greys', //'Reds', //'Hot', // reversescale: true, showscale: false, type: 'histogram2dcontour', contours: { showlabels: true, labelfont: { family: 'Raleway', color: 'black' } } }; const trace3 = { x: xData, name: 'x density', marker: { color: 'rgb(102,0,0)' }, yaxis: 'y2', type: 'histogram' }; const trace4 = { y: yData, name: 'y density', marker: { color: 'rgb(102,0,0)' }, xaxis: 'x2', type: 'histogram' }; const data = [trace1, trace2, trace3, trace4]; const layout = { showlegend: false, autosize: false, width: 800, height: 550, margin: { t: 50 }, hovermode: 'closest', bargap: 0.05, xaxis: { title: 'Waiting Time (minutes)', domain: [0, 0.85], showgrid: false, zeroline: false }, yaxis: { title: 'Eruption Duration (minutes)', domain: [0, 0.85], showgrid: false, zeroline: false }, xaxis2: { domain: [0.85, 1], showgrid: false, zeroline: false }, yaxis2: { domain: [0.85, 1], showgrid: false, zeroline: false } }; Plotly.newPlot(myDiv, data, layout); return myDiv; }3d:T80c,resolveCountryNames = country => { let countryName = undefined; if (country.includes("Congo")) { if (country == "Congo, Republic of the") countryName = "Congo (Brazzaville)"; else if (country == "Congo, Democratic Republic of the") countryName = "Congo (Kinshasa)"; } if (countryName == undefined) countryName = country .split(" (")[0] .split(", Islamic Republic of")[0] .split(", Republic of")[0] .split(", Kingdom of")[0] .split(", People's Republic of")[0] .split(", Democratic Socialist Republic of")[0] .split(", Occupied")[0] .split(", Special Administrative Region of China")[0] .split(", State of")[0] .split(", Uniton of")[0] .split(", Socialist Republic of")[0] .split(", Sultanate of")[0] .split(", Hashemite Kingdom of")[0] .split(", Togolese Republic")[0] .split(", Tunisian Republic")[0] .split(", United Republic of")[0] .split(", Bolivarian Republic of")[0] .split(", Swiss Confederation")[0] .split(", Somali Republic")[0] .split(", Italian Republic")[0] .split(", French Republic")[0] .split(", People's Democratic Republic of")[0] .split(", Commonwealth of")[0] .split(", Argentine Republic")[0] .split(", Principality of")[0] .split(", Federative Republic of")[0] .split(", Arab Republic of")[0] .split(", Federal Democratic Republic of")[0] .split(", Federal Republic of")[0] .split(", Gabonese Republic")[0] .split(", Hellenic Republic")[0] .split(", Co-operative Republic of")[0] .split(" People's Democratic Republic")[0] .split(", Lebanese Republic")[0] .split(", Arab Jamahiriya")[0] .split(", Grand Duchy of")[0] .split(", United Mexican States")[0] .split(", Federated States of")[0] .split(", Portuguese Republic")[0] .split(", Independent State of")[0] .split(", Eastern Republic of")[0]; return countryNameResolution[countryName] || countryName; }3e:[{"id":"10801c3968c0f22a04022eca4a8f4a0147ab6d1eef19c75e3334b250c8e76b61a85a4f5363367a758aaaf94429bafe495080191c655ce4d5dbd92801596a6eed","href":"https://static.observableusercontent.com/files/10801c3968c0f22a04022eca4a8f4a0147ab6d1eef19c75e3334b250c8e76b61a85a4f5363367a758aaaf94429bafe495080191c655ce4d5dbd92801596a6eed","name":"anscombe.csv","type":"text/csv","lastModified":1610364965568.168,"size":724}] 2f:{"title":"CAP 6737 Class Practice Notes","cells":[{"id":174,"value":"md`# CAP 6737 Class Practice Notes\n * Weekly Notes\n * [\\`Week 1\\`](#Week1)\n * [\\`Week 2\\`](#Week2)\n * [\\`Week 3\\`](#Week3)\n * [\\`Week 4\\`](#Week4)\n * [\\`Assignment4_Hints\\`](#Assignment4_Hints)\n * [\\`Week 5\\`](#Week5)\n * [\\`Week 6\\`](#Week6)\n\n * Miscellaneous\n * [\\`Data\\`](#Data)\n * [\\`External Libraries\\`](#Libraries)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"Week1 = md`## Week 1 : Getting Started`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md` You may like to see examples from \n - https://plotly.com/javascript/getting-started/\n - https://code.tutsplus.com/series/create-interactive-charts-using-plotlyjs\n\nFor general Plotly Resource see Plotly Documentation from: https://plotly.com/javascript/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"md`### Line chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{\n const myDiv = html`

`;\n return Plotly.newPlot(\n myDiv,\n [\n {\n // Trace\n x: [1, 2, 3, 4, 5],\n y: [1, 2, 4, 8, 16]\n }\n ],\n {\n margin: { t: 0 }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`### [Line and Scatter](https://plotly.com/javascript/line-and-scatter/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"{\n const myDiv = html`

`;\n var trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 15, 13, 17],\n mode: 'markers',\n type: 'scatter'\n };\n\n var trace2 = {\n x: [2, 3, 4, 5],\n y: [16, 5, 11, 9],\n mode: 'lines',\n type: 'scatter',\n line: {\n shape: 'spline',\n dash: 'longdash'\n //color: 'rgb(157, 255, 98)'\n }\n };\n\n var trace3 = {\n x: [1, 2, 3, 4],\n y: [12, 9, 15, 12],\n mode: 'lines+markers',\n type: 'scatter',\n line: {\n shape: 'spline',\n dash: 'dashdot'\n //color: 'rgb(157, 255, 98)'\n }\n };\n\n var data = [trace1, trace2, trace3];\n\n return Plotly.newPlot(myDiv, data, {margin: {t:0}});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"anscombe","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`### Grid Layout: Scatter plot of Anscombe data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"AnscombeStats = {\n const dataset_I = anscombe.filter(d => d.dataset == \"I\");\n const dataset_II = anscombe.filter(d => d.dataset == \"II\");\n const dataset_III = anscombe.filter(d => d.dataset == \"III\");\n const dataset_IV = anscombe.filter(d => d.dataset == \"IV\");\n const getStats = dataset => ({\n xMean: d3.mean(dataset, d => d.x),\n xMedian: d3.median(dataset, d => d.x),\n xSTD: d3.deviation(dataset, d => d.x),\n yMean: d3.mean(dataset, d => d.y),\n yMedian: d3.median(dataset, d => d.y),\n ySTD: d3.deviation(dataset, d => d.y),\n regression: d3 //see https://observablehq.com/@harrystevens/introducing-d3-regression\n .regressionLinear()\n .x(d => d.x)\n .y(d => d.y)\n .domain(d3.extent(dataset, d => d.x))(dataset)\n });\n return {\n setI: getStats(dataset_I),\n setII: getStats(dataset_II),\n setIII: getStats(dataset_III)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"anscombe.reduce((A,d)=>{\n if(d.dataset==\"I\")\n A.push(d);\n return A;\n},[]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"Week2 = md`-------------\n## Week 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`### Strip Plot. Also called Jitter plot when random noise is added as an additional dimension.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof distribution = radio({\n options: [\"Uniform\", \"Normal\"],\n value: \"Uniform\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"viewof N = slider({\n min: 10,\n max: 1000,\n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"randomData = Array(N)\n .fill(5)\n .map(d => d + 0.5 * (d3[\"random\" + distribution]()() - 0.5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n const myDiv = html`

`;\n var trace1 = {\n y: randomData,\n mode: 'markers',\n marker: {\n size: 10,\n opacity: 0.25,\n line: {\n color: 'rgba(0, 0, 0, 0.5)',\n width: 1\n }\n }\n };\n\n var data = [trace1];\n\n var layout = {\n title: 'Scatter Plot with a Color Dimension',\n xaxis: {\n range: [0, N]\n },\n yaxis: {\n range: [0, 10]\n }\n };\n\n return Plotly.newPlot(myDiv, data, layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`### Histogram\nhttps://plotly.com/javascript/histograms/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"{\n const myDiv = html`

`;\n const trace = {\n x: randomData,\n type: 'histogram'\n };\n const data = [trace];\n var layout = {\n bargap: 0.05\n };\n return Plotly.newPlot(myDiv, data, layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`### Controlling Bin Size`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"viewof nBins = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 20,\n title: \"Number of Bins\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"{\n const myDiv = html`

`;\n const trace = {\n x: randomData,\n type: 'histogram',\n autobinx: false, // For Bin control in Histogram\n xbins: {\n size: binSize\n }\n };\n const data = [trace];\n var layout = {\n bargap: 0.05\n };\n return Plotly.newPlot(myDiv, data, layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"md`### Normalized Histogram: Probability Density Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"{\n const myDiv = html`

`;\n const trace = {\n x: randomData,\n histnorm: \"probability density\",\n autobinx: false, // For Bin control in Histogram\n xbins: {\n size: binSize\n },\n type: 'histogram'\n };\n const data = [trace];\n var layout = {\n bargap: 0.05\n };\n return Plotly.newPlot(myDiv, data, layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`### Normalized histogram with density curve laid over the top.\nThe density curve is computed using kernel density estimation (KDE).\nA nice interactive visual description of the algorithm is given in https://mathisonian.github.io/kde/.\nFor KDE, computation you have to choose the Kernel function and bandwidth. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"viewof kernelname = radio({\n description: 'Choose kernel',\n options: [\n \"cosine\",\n \"epanechnikov\",\n \"quartic\",\n \"triweight\",\n \"uniform\",\n \"triangle\"\n ],\n value: 'epanechnikov'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"viewof bandWidthScale = slider({\n min: 1,\n max: Math.round(nBins / 4),\n step: 1,\n value: 1,\n title: \"BandWidth\",\n description: 'in unit of BinSize. Wider the smoother.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"{\n const myDiv = html`

`;\n const trace = {\n x: randomData,\n autobinx: false, // For Bin control in Histogram\n xbins: {\n size: binSize\n },\n histnorm: \"probability density\",\n type: 'histogram'\n };\n let trace1 = {\n type: \"scatter\",\n x: densityData.X,\n y: densityData.Y,\n marker: {\n color: \"black\"\n }\n };\n\n const data = [trace, trace1];\n var layout = {\n bargap: 0.05\n };\n return Plotly.newPlot(myDiv, data, layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"dataExtent = d3.extent(randomData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"densityDataLength = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"binSize = {\n const xExtent = dataExtent;\n return (xExtent[1] - xExtent[0]) / nBins;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"densityData = { \n const delta = (dataExtent[1] - dataExtent[0]) / densityDataLength;\n const X = new Array(densityDataLength + 1)\n .fill(0)\n .map((d, i) => dataExtent[0] + i * delta);\n\n const Y = kde(kernel, X, randomData, (binSize * bandWidthScale));\n return { X, Y };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"function kde(kernel, Xs, data, bandWidth) {\n return Xs.map(x =>\n d3.mean(\n data,\n d =>\n kernel(Math.abs(x - d) / bandWidth) /\n bandWidth\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"kernels[kernelname]","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"kernel = kernels[kernelname]()","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"kernels = ({\n cosine: () => x => (x <= 1 ? (Math.PI / 4) * Math.cos((x * Math.PI) / 2) : 0),\n epanechnikov: () => x => (x <= 1 ? (3 / 4) * (1 - x * x) : 0),\n quartic: () => x => (x <= 1 ? (15 / 16) * (1 - x * x) ** 2 : 0),\n triweight: () => x => (x <= 1 ? (35 / 32) * (1 - x * x) ** 3 : 0),\n tricube: () => x => (x <= 1 ? (35 / 32) * (1 - x ** 3) ** 3 : 0),\n uniform: () => x => (x <= 1 ? 0.5 : 0),\n triangle: () => x => (x <= 1 ? 1 - x : 0)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`### Box Plot\nSee: https://plotly.com/javascript/box-plots/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"{\n const myDiv = html`

`;\n const trace1 = {\n x: randomData,\n type: 'box',\n boxmean: true\n };\n return Plotly.newPlot(myDiv, [trace1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"{\n const myDiv = html`

`;\n const trace1 = {\n x: randomData,\n boxpoints: 'all',\n jitter: 0.1,\n pointpos: 0, //-1.8,\n type: 'box'\n };\n return Plotly.newPlot(myDiv, [trace1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"{\n const myDiv = html`

`;\n const trace1 = {\n x: randomData,\n boxpoints: 'all',\n jitter: 0.1,\n pointpos: 0, //-1.8,\n fillcolor: 'rgba(0,0,0,0)',\n line: { color: 'rgba(0,0,0,0)' },\n marker: { color: \"steelblue\" },\n type: 'box'\n };\n return Plotly.newPlot(myDiv, [trace1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`### Violin Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"{\n const myDiv = html`

`;\n const trace1 = {\n y: randomData,\n box: {\n visible: false\n },\n meanline: {\n visible: true\n },\n type: 'violin'\n };\n return Plotly.newPlot(myDiv, [trace1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`### Old Faithful Histogram and overlaid Density Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"{\n const getDensityData = data => {\n const dataExtent = d3.extent(data);\n const densityDataLength = data.length;\n const bandWidth = data.length * 0.03;\n const delta = (dataExtent[1] - dataExtent[0]) / densityDataLength;\n const X = new Array(densityDataLength + 1)\n .fill(0)\n .map((d, i) => dataExtent[0] + i * delta);\n\n const Y = kde(kernel, X, data, bandWidth);\n return { X, Y };\n };\n const data = oldFaithful.map(d => d.waiting);\n const densityData = getDensityData(data);\n const myDiv = html`

`;\n const trace = {\n x: data,\n autobinx: false, // For Bin control in Histogram\n histnorm: \"probability density\",\n type: 'histogram',\n name: 'Waiting',\n nbinsx: 25\n };\n let trace1 = {\n type: \"scatter\",\n x: densityData.X,\n y: densityData.Y,\n marker: {\n color: \"black\"\n },\n name: 'Waiting Density'\n };\n\n var layout = {\n bargap: 0.05\n };\n return Plotly.newPlot(myDiv, [trace, trace1], layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3699,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"md `### Violing Plot using Plotly Scatter plot drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"new Array(densityDataLength + 1).fill(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"d3.csvParse(\n await (await soFetch(\n \"https://covid.ourworldindata.org/data/owid-covid-data.csv\"\n )).text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"soFetch(\"https://covid.ourworldindata.org/data/owid-covid-data.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"Week3 = md`-----------\n## Week 3\nTime Series Data visualization: \nRef: https://plotly.com/javascript/time-series/ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md`### Line Plot\nRef: https://plotly.com/javascript/time-series/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n x: ['2013-10-04', '2013-11-04', '2013-12-04'],\n y: [1, 3, 6],\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"{\n const myDiv = html`

`;\n\n const dates = appleLast30daysData.map(d => d.date);\n\n const highs = appleLast30daysData.map(d => d.high);\n const lows = appleLast30daysData.map(d => d.low);\n\n const trace1 = {\n type: \"scatter\",\n mode: \"lines\",\n name: 'AAPL High',\n x: dates,\n y: highs,\n line: { color: '#17BECF' }\n };\n\n const trace2 = {\n type: \"scatter\",\n mode: \"lines\",\n name: 'AAPL Low',\n x: dates,\n y: lows,\n line: { color: '#7F7F7F' }\n };\n\n const traceData = [trace1, trace2];\n\n const layout = {\n title: 'AAPL stock price Last 300 days of '\n };\n\n Plotly.newPlot(myDiv, traceData, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"{\n const myDiv = html`

`;\n\n const dates = appleLast30daysData.map(d => d.date);\n\n const highs = appleLast30daysData.map(d => d.high);\n const lows = appleLast30daysData.map(d => d.low);\n\n const trace1 = {\n type: \"scatter\",\n mode: \"lines\",\n name: 'AAPL High',\n x: dates,\n y: highs,\n line: { color: '#17BECF' }\n };\n\n const trace2 = {\n type: \"scatter\",\n mode: \"lines\",\n name: 'AAPL Low',\n x: dates,\n y: lows,\n line: { color: '#7F7F7F' }\n };\n\n const data = [trace1, trace2];\n\n const layout = {\n title: 'AAPL stock price Last 30 days of ',\n title: 'Custom Range',\n\n xaxis: {\n //range: [\"2021-01-01\", \"2021-01-31\"],\n type: 'date'\n },\n yaxis: {\n //range: [120, 150],\n type: 'linear'\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2080,"value":"{\n const myDiv = html`

`;\n\n const dates = covidTimelineDataByKeyCountries.map(d => d.Date);\n const data = keyCountries.map(country => ({\n type: \"scatter\",\n mode: \"lines\",\n name: `${country} cases`,\n x: dates,\n y: covidTimelineDataGroupedByKeyCountries.get(country).map(d => d.cases)\n }));\n\n const layout = {\n title: 'Timeline Covid Cases data for Key Countries',\n width: 900,\n height: 600,\n xaxis: {\n type: 'date'\n },\n yaxis: {\n type: 'linear'\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"md`### Area Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"{\n const myDiv = html`

`;\n const traceData = [\n {\n x: ['2013-10-04', '2013-11-04', '2013-12-04'],\n y: [1, 3, 6],\n type: 'scatter',\n fill: 'tozeroy'\n }\n ];\n Plotly.newPlot(myDiv, traceData);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"md`### Radar/Star/spider chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n theta: ['day1', 'day2', 'day3'],\n r: [1, 3, 6],\n type: 'scatterpolar',\n //mode: 'none',\n fill: 'toself'\n }\n ];\n const layout = {\n title: 'Star chart',\n\n polar: {\n radialaxis: {\n visible: true\n }\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"md`### Stacked Area Chart\nRef: https://plotly.com/javascript/filled-area-plots/#stacked-area-chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"{\n const myDiv = html`

`;\n\n var data = [\n { day: 'Mon', apricots: 120, blueberries: 180, cherries: 100 },\n { day: 'Tue', apricots: 60, blueberries: 185, cherries: 105 },\n { day: 'Wed', apricots: 100, blueberries: 215, cherries: 110 },\n { day: 'Thu', apricots: 80, blueberries: 230, cherries: 105 },\n { day: 'Fri', apricots: 120, blueberries: 240, cherries: 105 }\n ];\n const days = data.map(d => d.day);\n const apricots = data.map(d => d.apricots);\n const blueberries = data.map(d => d.blueberries);\n const cherries = data.map(d => d.cherries);\n\n const traces = [\n { x: days, y: apricots, stackgroup: 'one', name: \"apricots\" },\n { x: days, y: blueberries, stackgroup: 'one', name: \"blueberries\" },\n { x: days, y: cherries, stackgroup: 'one', name: \"cherries\" }\n ];\n\n Plotly.newPlot(myDiv, traces, { title: 'stacked and filled line chart' });\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"{\n const myDiv = html`

`;\n\n const data = [\n { day: 'Mon', apricots: 120, blueberries: 180, cherries: 100 },\n { day: 'Tue', apricots: 60, blueberries: 185, cherries: 105 },\n { day: 'Wed', apricots: 100, blueberries: 215, cherries: 110 },\n { day: 'Thu', apricots: 80, blueberries: 230, cherries: 105 },\n { day: 'Fri', apricots: 120, blueberries: 240, cherries: 105 }\n ];\n const days = data.map(d => d.day);\n const apricots = data.map(d => d.apricots);\n const blueberries = data.map(d => d.blueberries);\n const cherries = data.map(d => d.cherries);\n\n const traces = [\n {\n x: days,\n y: apricots,\n stackgroup: 'one',\n name: \"apricots\",\n groupnorm: 'percent'\n },\n { x: days, y: blueberries, stackgroup: 'one', name: \"blueberries\" },\n { x: days, y: cherries, stackgroup: 'one', name: \"cherries\" }\n ];\n\n Plotly.newPlot(myDiv, traces, { title: 'stacked and filled line chart' });\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"md`### Heatmaps:\nref: https://plotly.com/javascript/heatmaps/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"{\n const myDiv = html`

`;\n\n const data = [\n { day: 'Mon', apricots: 120, blueberries: 180, cherries: 100 },\n { day: 'Tue', apricots: 60, blueberries: 185, cherries: 105 },\n { day: 'Wed', apricots: 100, blueberries: 215, cherries: 110 },\n { day: 'Thu', apricots: 80, blueberries: 230, cherries: 105 },\n { day: 'Fri', apricots: 120, blueberries: 240, cherries: 105 }\n ];\n const days = data.map(d => d.day);\n const fruits = [\"apricots\", \"blueberries\", \"cherries\"];\n const allSales = fruits.map(fruit => data.map(d => d[fruit]));\n //return allSales;\n\n const apricots = data.map(d => d.apricots);\n const blueberries = data.map(d => d.blueberries);\n const cherries = data.map(d => d.cherries);\n\n const traces = [\n {\n z: allSales,\n x: days,\n y: fruits,\n type: 'heatmap',\n hoverongaps: false\n }\n ];\n\n Plotly.newPlot(myDiv, traces);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"{\n const myDiv = html`

`;\n\n const data = [\n { day: 'Mon', apricots: 120, blueberries: 180, cherries: 100 },\n { day: 'Tue', apricots: 60, blueberries: 185, cherries: 105 },\n { day: 'Wed', apricots: 100, blueberries: 215, cherries: 110 },\n { day: 'Thu', apricots: 80, blueberries: 230, cherries: 105 },\n { day: 'Fri', apricots: 120, blueberries: 240, cherries: 105 }\n ];\n const days = data.map(d => d.day);\n const fruits = [\"apricots\", \"blueberries\", \"cherries\"];\n const allSales = data.map(d => fruits.map(fruit => d[fruit]));\n //return allSales;\n\n const apricots = data.map(d => d.apricots);\n const blueberries = data.map(d => d.blueberries);\n const cherries = data.map(d => d.cherries);\n\n const traces = [\n {\n z: allSales,\n x: fruits,\n y: days,\n type: 'heatmap',\n hoverongaps: false\n }\n ];\n\n Plotly.newPlot(myDiv, traces);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2090,"value":"md`TimeLine Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"{\n const myDiv = html`

`;\n\n const x = [\n \"2016-10-10 12:00:03\",\n \"2016-10-10 12:00:03\",\n \"2016-10-11 12:00:03\",\n \"2016-10-12 12:00:03\"\n ];\n const y = [2, 1, 1.5, 1];\n\n const trace1 = {\n x: x,\n y: y,\n type: 'scatter',\n mode: 'markers+text',\n name: 'Markers and Text',\n text: ['Event 1', 'Event 2', 'Event 3', 'Event 4'],\n textposition: 'bottom',\n marker: {\n color: 'red',\n size: 12\n }\n };\n\n const data = [trace1];\n\n const layout = {\n title: 'Timeline Example',\n showlegend: false,\n yaxis: {\n visible: false\n },\n shapes: x.map((x, i) => ({\n type: 'line', //line vertical\n x0: x,\n y0: 0,\n x1: x,\n y1: y[i],\n line: {\n // color: 'steelblue',\n width: 1\n }\n }))\n };\n\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"Week4 = md`-----------\n## Week 4: Bar Plot: Comparison, Ranking`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"md`### Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n x: USregions,\n y: totalCasesByUSregion,\n type:\n 'bar',\n transforms: [\n {\n type: 'sort',\n target: 'y',\n order: 'descending'\n }\n ]\n }\n ];\n const layout = {\n title: 'Total Covid Cases by Region',\n yaxis: {\n title: 'Number of Case'\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n x: texasData.map(d => d.deaths),\n y: texasData.map(d => d.date),\n type: 'bar',\n orientation: 'h'\n }\n ];\n const layout = {\n title: 'Texas Daily Covid Deaths Compared by Days',\n yaxis: {\n tickfont: {\n size: 10,\n color: 'rgb(207, 107, 107)'\n }\n },\n xaxis: {\n title: 'Number of Deaths'\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"md`### Group Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"{\n const myDiv = html`

`;\n const data = triStateData.map(stateData => ({\n x: stateData.map(d => d.date),\n y: stateData.map(d => d.deaths),\n name: stateData[0].state,\n type: 'bar'\n }));\n const layout = {\n title: 'Daily Covid Deaths',\n xaxis: {\n tickfont: {\n size: 10,\n color: 'rgb(207, 107, 107)'\n }\n },\n yaxis: {\n title: 'Number of Deaths'\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"{\n const myDiv = html`

`;\n const data = USregionData.map(region => ({\n x: region.map(d => d.date),\n y: region.map(d => d.deaths),\n name: region[0].region,\n type: 'bar'\n }));\n const layout = {\n title: 'Daily Covid Deaths by Region',\n xaxis: {\n tickfont: {\n size: 10,\n color: 'rgb(207, 107, 107)'\n }\n },\n yaxis: {\n title: 'Number of Deaths'\n }\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"md`### Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"{\n const myDiv = html`

`;\n const data = USregionData.map(region => ({\n x: region.map(d => d.date),\n y: region.map(d => d.deaths),\n name: region[0].region,\n type: 'bar',\n automargin: true\n }));\n const layout = {\n title: 'Daily US Covid Deaths',\n xaxis: {\n tickfont: {\n size: 10,\n color: 'rgb(207, 107, 107)'\n }\n },\n yaxis: {\n title: 'Number of Deaths'\n },\n barmode: 'stack'\n };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"md`## Pie Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n values: totalCasesByUSregion,\n labels: USregions,\n type: 'pie',\n //sort: false,\n direction: \"clockwise\", //\"counterclockwise\",\n insidetextorientation: \"radial\"\n }\n ];\n\n const layout = {\n title: \"Covid 19 cases by region\"\n };\n\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n values: totalDeathsByUSregion,\n labels: USregions,\n type: 'pie',\n textinfo: \"label+percent\",\n textposition: \"outside\",\n //sort: false,\n direction: 'clockwise'\n //automargin: true\n }\n ];\n\n var layout = {\n //margin: { t: 0, b: 0, l: 0, r: 0 },\n title: \"Covid 19 deaths by region\",\n showlegend: false\n };\n\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"md`### Donut Charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"md`### Deviation Bar Chart\nFrom: https://plotly.com/javascript/bar-charts/ Customizing Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"{\n const myDiv = html`

`;\n\n const data = [\n {\n type: 'bar',\n x: ['2016', '2017', '2018'],\n y: [500, 600, 700],\n base: [-500, -600, -700],\n hovertemplate: '%{base}',\n marker: {\n color: 'red'\n },\n name: 'expenses'\n },\n {\n type: 'bar',\n x: ['2016', '2017', '2018'],\n y: [300, 400, 700],\n base: 0,\n marker: {\n color: 'blue'\n },\n name: 'revenue'\n }\n ];\n\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2158,"value":"md`Example: [Mandatory Spendins in 2019](https://www.cbo.gov/publication/56325)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2119,"value":"{\n const myDiv = html`

`;\n\n const data = [\n {\n type: 'bar',\n x: [1258, 1038, 303, 170, 115, 126, 276].reverse(),\n y: [\n \"Health Care\",\n \"Social Security\",\n \"Income Programs\",\n \"Federal Retirement\",\n \"Veteran Progam\",\n \"Other Programs\",\n \"Offsetting Receipts\"\n ].reverse(),\n base: [0, 0, 0, 0, 0, 0, -276].reverse(),\n\n marker: {\n //color: 'steelblue'\n color: [\n 'steelblue',\n 'steelblue',\n 'steelblue',\n 'steelblue',\n 'steelblue',\n 'steelblue',\n 'red'\n ].reverse()\n },\n name: 'expenses',\n orientation: \"h\"\n //automargin: true\n }\n ];\n\n Plotly.newPlot(\n myDiv,\n data,\n {\n title: \"Mandatory Spendings in 2019\",\n margin: { t: 50, b: 50, l: 120, r: 0 }\n },\n\n { staticPlot: true }\n );\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2532,"value":"Assignment4_Hints = md`### Assignment 4 Related Hints\nNote: In this assignment you will learn Data visualization related to Comparison, Ranking and Part in the Whole relation. In addition you will learn \n- The use of **Map** data structure of Javascript. Map, like Javascript Object, is a collection of \"key\", \"value\" pairs. However, unlike Javascript Object, you access the value by using \".get()\". I have added examples below.\n- How to combine related data from multiple sources> The country names in countriesGroupedByContinents is not the same as country names in covidTimelineDataGroupedByKeyCountries. For example: in the former Map Country_Name \"Afghanistan, Islamic Republic of\" where as in covidTimelineDataGroupedByKeyCountries the country name is \"Afghanistan\".\nSo to extract \"Afghanistan\" from \"Afghanistan, Islamic Republic of\" you may use string.split(\",\")[0]. I have added examples below.\n- How to handle missing data. For example: there is no Covid-19 data for countries of Antactica.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2653,"value":"countriesInContinentsWithCovidData = continents.map(continent =>\n countriesGroupedByContinents.get(continent).filter(country => {\n let countryName = country.Country_Name;\n const D = covidTimelineDataGroupedByAllCountry.get(countryName);\n // Some countries may not have data. So check for that.\n\n return D;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3076,"value":"countryNamesGroupedByContinentsWithCovidData = countryNamesGroupedByContinents.map(\n continent =>\n continent.filter(countryName => {\n return covidTimelineDataGroupedByAllCountry.get(countryName);\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3114,"value":"totalCountriesWithCovidData = d3.sum(\n countriesInContinentsWithCovidData.map(d => d.length)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3101,"value":"NorthAmericanCountriesWithCovidData = countriesGroupedByContinents\n .get(\"North America\")\n .filter(country => {\n let countryName = country.Country_Name;\n const D = covidTimelineDataGroupedByAllCountry.get(countryName);\n // Some countries may not have data. So check for that.\n return D;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3697,"value":"CovidDataForNorthAmericanCountries = NorthAmericanCountriesWithCovidData.map(\n country => {\n const countryName = country.Country_Name;\n const D = covidTimelineDataGroupedByAllCountry.get(countryName);\n // Some countries may not have data. So check for that.\n return D;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2564,"value":"md`#### Covid-19 data for Asian Countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2577,"value":"AsianCountriesWithCovidData = countriesGroupedByContinents\n .get(\"Asia\")\n .filter(country => {\n const countryName = country.Country_Name;\n const D = covidTimelineDataGroupedByAllCountry.get(countryName);\n // Some countries may not have data. So check for that.\n return D;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2582,"value":"CovidDataForAsianCountries = AsianCountriesWithCovidData.map(country => {\n const countryName = country.Country_Name;\n const D = covidTimelineDataGroupedByAllCountry.get(countryName);\n // Some countries may not have data. So check for that.\n return D;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2537,"value":"md`#### Extract Covid-19 Data for Asian countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2621,"value":"CovidDataForAsianCountriesAsMap = new Map(\n CovidDataForAsianCountries.map(d => [d[0][\"Country/Region\"], d])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"md`#### Tabular View of Covid Data of an Asian Country`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2617,"value":"viewof asianCountry = select({\n options: [...CovidDataForAsianCountriesAsMap.keys()],\n value: \"India\",\n description: \"Choose a country\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"Table(CovidDataForAsianCountriesAsMap.get(asianCountry))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2695,"value":"md`Latest data for ${asianCountry}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2699,"value":"{\n const data = CovidDataForAsianCountriesAsMap.get(asianCountry);\n const d = data[data.length - 1];\n return {\n Date: d.Date,\n Confirmed: d.Confirmed,\n Recovered: d.Recovered,\n Deaths: d.Deaths\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2720,"value":"md`#### Latest Data for Countries in Asia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2725,"value":"latestDataForAsianCountries = [...CovidDataForAsianCountriesAsMap].map(d => {\n const country = d[0];\n const countryLatestData = d[1][d[1].length - 1];\n return [\n d[0],\n {\n Date: countryLatestData.Date,\n Confirmed: countryLatestData.Confirmed,\n Recovered: countryLatestData.Recovered,\n Deaths: countryLatestData.Deaths\n }\n ];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2703,"value":"md`#### Latest Data for Asia as whole`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2741,"value":"md`Computation Option: 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2743,"value":"({\n Date: latestDataForAsianCountries[0][1].Date,\n Confirmed: d3.sum(latestDataForAsianCountries, d => d[1].Confirmed),\n Recovered: d3.sum(latestDataForAsianCountries, d => d[1].Recovered),\n Deaths: d3.sum(latestDataForAsianCountries, d => d[1].Deaths)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2746,"value":"md`Computation Option: 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2715,"value":"{\n let cumData;\n\n for (const item of CovidDataForAsianCountriesAsMap) {\n const data = item[1];\n const d = data[data.length - 1];\n if (!cumData) {\n cumData = {\n Date: d.Date,\n Confirmed: d.Confirmed,\n Recovered: d.Recovered,\n Deaths: d.Deaths\n };\n } else {\n cumData.Confirmed += d.Confirmed;\n cumData.Recovered += d.Recovered;\n cumData.Deaths += d.Deaths;\n }\n }\n return cumData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2642,"value":"md`#### Tabular View of Covid Data of all Asian Countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"Table(d3.merge(CovidDataForAsianCountries))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3718,"value":"Week5 = md`## Week 5: Correlation Analysis and Regression\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4150,"value":"iris","pinned":false,"hidden":false,"mode":"ojs"},{"id":4152,"value":"irisGroupedBySpecies = d3.group(iris, d => d.species)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4142,"value":"irisSpecies = [...new Set(iris.map(d => d.species))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4145,"value":"irisAttribs = iris.columns.slice(0, iris.columns.length - 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4155,"value":"irisAttribMeansGroupedByClass = new Map(\n irisSpecies.map(cls => {\n const data = irisGroupedBySpecies.get(cls);\n\n return [\n cls,\n Object.fromEntries(\n irisAttribs.map(attrib => [attrib, d3.mean(data, d => d[attrib])])\n )\n ];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4201,"value":"md`### Scatter Plots for Correlation Analysis.\nVisual analysis of Iris Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4206,"value":"viewof attribSelections = columns({\n x: select({\n options: irisAttribs,\n value: \"sepal_length\"\n }),\n y: select({\n options: irisAttribs,\n value: \"sepal_width\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4203,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":4240,"value":"md`### Scatter Plot with Regression Lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4234,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3964,"value":"md`### Correlation Matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4284,"value":"drawCorreleationMatrix(iris, irisAttribs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3952,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4058,"value":"function computeCovariance(X, Y) {\n const N = X.length;\n const xMean = d3.mean(X);\n const yMean = d3.mean(Y);\n return [xMean, yMean];\n return d3.sum(d3.range(N), i => (X[i] - xMean) * (Y[i] - yMean)) / (N - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3983,"value":"function computeR(X, Y) {\n const N = X.length;\n const xMean = d3.mean(X);\n const yMean = d3.mean(Y);\n const s_x = d3.deviation(X);\n const s_y = d3.deviation(Y);\n const Z_y = Y.map(y => (y - yMean) / s_y);\n const Z_x = X.map(x => (x - xMean) / s_x);\n return d3.mean(d3.range(N), i => Z_x[i] * Z_y[i]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4070,"value":"function computeVariance(X) {\n const N = X.length;\n const xMean = d3.mean(X);\n return d3.sum(d3.range(N), i => (X[i] - xMean) * (X[i] - xMean)) / (N - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4091,"value":"computeBestLineFit = (X, Y) => {\n //line equation = Y = a + b*X\n const N = X.length;\n const xMean = d3.mean(X);\n const yMean = d3.mean(Y);\n const numerator = d3.sum(d3.range(N), i => (X[i] - xMean) * (Y[i] - yMean));\n const denominator = d3.sum(d3.range(N), i => (X[i] - xMean) * (X[i] - xMean));\n const b = numerator / denominator;\n const a = yMean - b * xMean;\n return [a, b];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4173,"value":"md`### Radar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4136,"value":"{\n const myDiv = html`

`;\n\n let thetas = irisAttribs;\n\n const data = irisSpecies.map(cls => {\n const data = irisAttribMeansGroupedByClass.get(cls);\n return {\n type: 'scatterpolar',\n r: Object.values(data),\n theta: thetas,\n fill: 'toself',\n name: cls\n };\n });\n\n const layout = {\n polar: {\n radialaxis: {\n visible: true,\n range: [0, 6]\n //tickformat: '\\%'\n }\n }\n };\n\n const config = {\n //scrollZoom: true,\n editable: true,\n //staticPlot: true,\n responsive: true,\n displayModeBar: true\n };\n Plotly.newPlot(myDiv, data, layout, config);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4193,"value":"md`### Parallel Coordinates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4182,"value":"{\n const myDiv = html`

`;\n\n var data = [\n {\n type: 'parcoords',\n pad: [80, 80, 80, 80],\n line: {\n color: iris.map(row => row['species_id']),\n colorscale: [[0, 'red'], [0.5, 'green'], [1, 'blue']]\n },\n\n dimensions: irisAttribs.map(attr => {\n const d = iris.map(row => row[attr]);\n return {\n range: d3.extent(d),\n label: attr,\n values: d\n };\n })\n }\n ];\n\n var layout = {\n width: 800\n };\n\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4245,"value":"md `### Assignment 5 Related Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3826,"value":"gapminderData = d3.csv(gapminderDataURL, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4127,"value":"Week6 = md`## Week 6`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3720,"value":"md`### Scatter Plots for Old Faithful Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3724,"value":"{\n const myDiv = html`

`;\n const xData = oldFaithful.map(d => d.waiting);\n const yData = oldFaithful.map(d => d.eruptions);\n const trace1 = {\n x: xData,\n y: yData,\n mode: 'markers',\n marker: {\n size: 4\n },\n name: \"Data\"\n };\n const [a, b] = computeBestLineFit(xData, yData);\n const xLineFit = d3.extent(xData);\n const yLineFit = xLineFit.map(x => a + b * x);\n const trace2 = {\n x: xLineFit,\n y: yLineFit,\n mode: 'lines',\n line: { color: 'firebrick', width: 2 },\n name: 'Best Fit'\n };\n const data = [trace1, trace2];\n // const data = [trace1];\n\n const layout = {\n title: 'Scatter Plot of Old Faithful Data',\n xaxis: {\n range: d3.extent(xData),\n title: 'Waiting Time (minutes)',\n showgrid: false\n },\n yaxis: {\n range: [0, d3.max(yData)],\n title: 'Eruption Duration (minutes)',\n showline: true\n }\n };\n\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3785,"value":"md`### 2D Density Using Contour Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3748,"value":"{\n const myDiv = html`

`;\n const xData = oldFaithful.map(d => d.waiting);\n const yData = oldFaithful.map(d => d.eruptions);\n const trace1 = {\n x: xData,\n y: yData,\n mode: 'markers',\n marker: {\n size: 4\n }\n };\n const trace2 = {\n x: xData,\n y: yData,\n name: 'density',\n ncontours: 20,\n colorscale: 'Greys', //'Reds', //'Hot', //\n reversescale: true,\n //showscale: false,\n type: 'histogram2dcontour',\n contours: {\n showlabels: true,\n labelfont: {\n family: 'Raleway',\n color: 'black'\n }\n }\n };\n const data = [trace1, trace2];\n\n const layout = {\n title: 'Scatter Plot of Old Faithful Data',\n xaxis: {\n title: 'Waiting Time (minutes)',\n showgrid: false\n },\n yaxis: {\n title: 'Eruption Duration (minutes)',\n showline: true\n }\n };\n\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4124,"value":"md`### 2D Density Plotted along with Distribution of each Variable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3767,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":4726,"value":"md`## Cluster Analysis\nSee https://observablehq.com/@spattana/visual-cluster-analysis.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4728,"value":"md`## Uncertainty Visualization Using Error Bars\nExamples in this section are from [Plotly.js page](https://plotly.com/javascript/error-bars/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4770,"value":"md`### Symmetric absolute constant error in Y.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4768,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n // Trace\n x: [0, 1, 2],\n y: [6, 10, 2],\n error_y: {\n type: 'constant',\n value: 1, // Symmetic absolute error amount around the Y-value.\n visible: true\n },\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4740,"value":"md`### Symmetric absolute varying error in Y.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4732,"value":"{\n const myDiv = html`

`;\n const data = [\n { // Trace\n x: [0, 1, 2],\n y: [6, 10, 2],\n error_y: {\n type: 'data',\n array: [1, 2, 3], // Symmetic absolute error amount around the Y-value.\n visible: true\n },\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4773,"value":"md`### Symmetric constant error in both X and Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4772,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n // Trace\n x: [0, 1, 2],\n y: [6, 10, 2],\n error_x: {\n type: 'constant',\n value: 0.25, // Symmetic absolute error amount around the Y-value.\n visible: true\n },\n error_y: {\n type: 'constant',\n value: 1, // Symmetic absolute error amount around the Y-value.\n visible: true\n },\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4742,"value":"md`### Symmetric Percent error in Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4748,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n x: [1, 2, 3, 4],\n y: [2, 1, 3, 4],\n error_y: {\n type: 'percent',\n value: 15\n },\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4749,"value":"md`### Unsymmetric Percent Error in Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4738,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n x: [1, 2, 3, 4],\n y: [2, 1, 3, 4],\n error_y: {\n type: 'percent',\n symmetric: false,\n value: 15,\n valueminus: 25\n },\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4764,"value":"md`### Unsymmetric Percent Error in X`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4762,"value":"{\n const myDiv = html`

`;\n const data = [\n {\n x: [1, 2, 3, 4],\n y: [2, 1, 3, 4],\n error_x: {\n type: 'percent',\n symmetric: false,\n value: 15,\n valueminus: 25\n },\n type: 'scatter'\n }\n ];\n Plotly.newPlot(myDiv, data);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4782,"value":"md`### Bar Chart with Error Bar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4781,"value":"{\n const myDiv = html`

`;\n const trace1 = {\n x: ['Trial 1', 'Trial 2', 'Trial 3'],\n y: [3, 6, 4],\n name: 'Control',\n error_y: {\n type: 'data',\n array: [1, 0.5, 1.5],\n visible: true\n },\n type: 'bar'\n };\n const trace2 = {\n x: ['Trial 1', 'Trial 2', 'Trial 3'],\n y: [4, 7, 3],\n name: 'Experimental',\n error_y: {\n type: 'data',\n array: [0.5, 1, 2],\n visible: true\n },\n type: 'bar'\n };\n var data = [trace1, trace2];\n var layout = { barmode: 'group' };\n Plotly.newPlot(myDiv, data, layout);\n return myDiv;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"Data = md`## External Data\nHowto Access data from:\n- Arrays: Integer indexing. ex: A[i] where A is an array (table) and i >=0 is an integer index.\n- Object: key indexing or .key. ex: O[key] or O.key where O is the object (record) and key is any key Ior column) in the object. \n= Map: .get(key). ex: M.get(key) where M is a Map and key is the Map key. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3791,"value":"md`### Gapminder data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3792,"value":"gapminderDataURL =\"https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2191,"value":"md`#### Codes, Continents and Population for Countries\nFetched from: https://github.com/JohnSnowLabs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1957,"value":"continents = [...countriesGroupedByContinents.keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"countriesGroupedByContinents = {\n const grp = d3.group(\n await d3.csv(\n \"https://datahub.io/JohnSnowLabs/country-and-continent-codes-list/r/country-and-continent-codes-list-csv.csv\",\n d3.autoType\n ),\n d => d.Continent_Name\n );\n\n [...grp.keys()].map(key => {\n const countries = grp.get(key);\n countries.forEach(\n d => (d.Country_Name = resolveCountryNames(d.Country_Name))\n );\n });\n\n return grp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3265,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3070,"value":"countryNamesGroupedByContinents = continents.map(continent =>\n countriesGroupedByContinents\n .get(continent)\n .map(country => country.Country_Name)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"allCountryNames = {\n const countries = [];\n countryNamesGroupedByContinents.forEach(d => countries.push(...d));\n return countries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3168,"value":"allCountryNames.filter(country => country.charAt(0) == \"C\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3153,"value":"mistmatchedCountries = { \n const countries = [];\n return [...d3.difference(allCountryNamesWithCovidData, allCountryNames)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3173,"value":"countryNameResolution = {\n let countryNameResolution = allCountryNamesWithCovidData.map(country => {\n let c = {};\n c[`${country}`] = country;\n return c;\n });\n countryNameResolution[\"United States of America\"] = \"US\";\n countryNameResolution[\"Brunei Darussalam\"] = \"Brunei\";\n countryNameResolution[\"United Kingdom of Great Britain & Northern Ireland\"] =\n \"United Kingdom\";\n countryNameResolution[\"Taiwan\"] = \"Taiwan*\";\n countryNameResolution[\"Korea\"] = \"Korea, South\";\n countryNameResolution[\"Kyrgyz Republic\"] = \"Kyrgyzstan\";\n countryNameResolution[\"Russian Federation\"] = \"Russia\";\n countryNameResolution[\"Syrian Arab Republic\"] = \"Syria\";\n countryNameResolution[\"Libyan Arab Jamahiriya\"] = \"Libya\";\n return countryNameResolution;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2171,"value":"latestYearInPopulationData = +Object.keys(populationOfCountries1960To2016[0])\n .slice(-1)[0]\n .substring(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"populationOfCountries1960To2016 = d3.csv(\n \"https://datahub.io/JohnSnowLabs/population-figures-by-country/r/population-figures-by-country-csv.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2167,"value":"latestPopulationOfCountriesByCountryCode = Object.fromEntries(\n populationOfCountries1960To2016.map(d => [\n d.Country_Code,\n d[\"Year_\" + latestYearInPopulationData]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2185,"value":"latestPopulationOfCountriesByCountry = Object.fromEntries(\n populationOfCountries1960To2016.map(d => [\n d.Country,\n d[\"Year_\" + latestYearInPopulationData]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1960,"value":"World_Covid_Data = md`#### World Covid-19 data\nFetched from : https://datahub.io/core/covid-19`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2071,"value":"keyCountries = covidTimelineDataByKeyCountries.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3128,"value":"polulationOfKeyCountries = keyCountries.map(country => {\n let countryName = country;\n if (country == \"US\") countryName = \"United States\";\n else if (country == \"United_Kingdom\") countryName = \"United Kingdom\";\n else if (country == \"Iran\") countryName = \"Iran, Islamic Rep.\";\n return latestPopulationOfCountriesByCountry[countryName];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"covidTimelineDataGroupedByKeyCountries = {\n const map = new Map();\n keyCountries.forEach(country =>\n map.set(\n country,\n covidTimelineDataByKeyCountries.map(d => ({\n Date: d.Date,\n cases: d[country]\n }))\n )\n );\n return map; //d3.group(data, data.columns.slice(1));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"covidTimelineDataByKeyCountries = d3.csv(\n \"https://datahub.io/core/covid-19/r/key-countries-pivoted.csv\",\n d3.autoType\n )\n// Data Source: https://datahub.io/core/covid-19","pinned":false,"hidden":false,"mode":"ojs"},{"id":3091,"value":"allCountryNamesWithCovidData.filter(d => d.charAt(0) == \"B\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3085,"value":"allCountryNamesWithCovidData = [...covidTimelineDataGroupedByAllCountry.keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2673,"value":"covidTimelineDataGroupedByAllCountry = {\n const grp = d3.group(timeSeriesWorldCovid19Data, d => d[\"Country/Region\"]);\n for (const item of grp) {\n const country = item[0];\n const countryData = item[1];\n const subgrp = d3.group(countryData, d => d[\"Province/State\"]);\n let cumData;\n for (const subItem of subgrp) {\n const provName = subItem[0];\n const provData = subItem[1];\n if (!cumData) {\n cumData = JSON.parse(JSON.stringify(provData));\n cumData.forEach(d => (d[\"Province/State\"] = null));\n } else {\n cumData.forEach((d, i) => {\n d.Confirmed += provData[i].Confirmed;\n d.Recovered += provData[i].Recovered;\n d.Deaths += provData[i].Deaths;\n });\n }\n }\n grp.set(country, cumData);\n }\n return grp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3059,"value":"md`Note: Some of the countries have listed data for their Province/Region separately. So simple grouping of the timeSeriesWorldCovid19Data creates a large number of data elements for countries like China. See below. So the data needs further processing create data by Countries. See above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2543,"value":"covidTimelineDataGroupedByAllCountry0 = d3.group(\n timeSeriesWorldCovid19Data,\n d => d[\"Country/Region\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"timeSeriesWorldCovid19Data = d3.csv(\n \"https://datahub.io/core/covid-19/r/time-series-19-covid-combined.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1965,"value":"md`#### US Covid-19 data \nfetched from : https://data.cdc.gov/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"daysInWeek = 7 // Used for Weekly data","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"USregions = [...USstatesGroupedByRegion.keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"USstatesGroupedByRegion = d3.group(\n await d3.csv(\n \"https://raw.githubusercontent.com/cphalpert/census-regions/master/us%20census%20bureau%20regions%20and%20divisions.csv\"\n ),\n d => d.Region\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"USregionData = USregions.map(region => {\n const states = USstatesGroupedByRegion.get(region);\n const statesData = states.map(state => {\n const D = covidDataSortedAndGrouped.get(state[\"State Code\"]);\n return D.slice(D.length - daysInWeek).map(d => ({\n state: state[\"State\"],\n date: d.submission_date,\n deaths: d.new_death\n }));\n });\n let nStates = states.length;\n const regionDataArray = statesData[0].map(d => ({\n region: region,\n deaths: 0,\n date: d.date\n }));\n for (let j = 0; j < daysInWeek; j++)\n for (let i = 0; i < nStates; i++)\n regionDataArray[j].deaths += statesData[i][j].deaths;\n\n return regionDataArray;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"totalDeathsByUSregion = USregions.map(region => {\n const states = USstatesGroupedByRegion.get(region);\n const statesData = states.map(state => {\n const D = covidDataSortedAndGrouped.get(state[\"State Code\"]);\n return D[D.length - 1].tot_death;\n });\n return d3.sum(statesData);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"totalCasesByUSregion = USregions.map(region => {\n const states = USstatesGroupedByRegion.get(region);\n const statesData = states.map(state => {\n const D = covidDataSortedAndGrouped.get(state[\"State Code\"]);\n return D[D.length - 1].tot_cases;\n });\n return d3.sum(statesData);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"triStates = [\"FL\", \"CA\", \"TX\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"triStateData = triStates.map(state => {\n // [floridaData, texasData, californiaData];\n const D = covidDataSortedAndGrouped.get(state);\n return D.slice(D.length - daysInWeek).map(d => ({\n state: stateAbbreviationToName[state],\n date: d.submission_date,\n deaths: d.new_death\n }));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"floridaData = triStateData[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"californiaData = triStateData[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"texasData = triStateData[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"dates = appleLast30daysData.map(element => element.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"covidDataSortedAndGrouped = d3.group(\n covidDataFromCDC.sort((a, b) =>\n d3.ascending(a.submission_date, b.submission_date)\n ),\n d => d.state\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"covidDataFromCDC = d3.csvParse(\n await (await soFetch(\n \"https://data.cdc.gov/api/views/9mfq-cb36/rows.csv?accessType=DOWNLOAD\"\n )).text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"md`#### Apple Stock data\nFetched from Yahoo.finance \nSee: https://observablehq.com/@spattana/data-fetch-and-meta-data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"highs = appleLast30daysData.map(element => element.high)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"highs.filter(function(d) {\n return d > 130;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"appleLast30daysData = getTickerHistoryData('AAPL', 30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"md`#### Old Faithful Geyser data\nFetched from: https://gist.github.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9`","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"oldFaithful = d3.tsv(\n \"https://gist.githubusercontent.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9/raw/dcb23e8f6eefdbc4ada97d6eda22b2a4f256c263/faithful.tsv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2021,"value":"md`#### Anscombe Data\nSource: https://en.wikipedia.org/wiki/Anscombe%27s_quartet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"anscombe = d3.csv(await FileAttachment(\"anscombe.csv\").url(),d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4132,"value":"md`#### IRIS data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4133,"value":"iris = d3.csv(\n \"https://raw.githubusercontent.com/plotly/datasets/master/iris-id.csv\", //\"https://datahub.io/machine-learning/iris/r/iris.csv\"\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"Libraries = md`### External Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"getTickerHistoryData = async (ticker, days) => {\n const response = await getQuoteHistory(ticker, days);\n // Combine timestamp, high, close, open, low, volume, adjusted close\n const timestamp = response.chart.result[0].timestamp;\n const quote = response.chart.result[0].indicators.quote[0];\n return timestamp.map((time, i) => ({\n date: d3.timeFormat(\"%Y-%m-%d\")(d3.timeParse(\"%s\")(time)),\n volume: quote.volume[i],\n high: quote.high[i],\n close: quote.close[i],\n low: quote.low[i],\n open: quote.open[i]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2055,"value":"import { stateAbbreviationToName } from \"@spattana/fetch-covid-19-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"import { radio, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"import { getQuoteHistory } from \"@spattana/data-fetch-and-meta-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2508,"value":"import { zip, zipreader } from \"@fil/jszip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2571,"value":"import { Table } from \"@observablehq/table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2478,"value":"jszip = require(\"jszip@3/dist/jszip.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4207,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"Plotly = require(\"plotly.js-dist\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"regression = require(\"d3-regression\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"d3 = require(\"d3@6\", \"d3-regression@1.3.4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}