2c:null 2d:["$","title",null,{"children":"New Color Scheme Validation - Sequential | Liu Cong | Observable"}] 32:T5f6,sample_chart = { const div = d3.create('div') .style('padding', `${chart_layout.svgMargin}px`) .style('background-color', dashboardStyle.baseBG) const innerDiv = div.append('div') .style('display','flex') .style('flex-direction','column') .style('gap', `${chart_layout.svgGutter}px`) innerDiv.append('div') .style('display','flex') .style('gap', `${chart_layout.svgGutter}px`) .call(div=>{ div.append('div') .style('background-color', dashboardStyle.cardBG) .style('border',`1px solid ${dashboardStyle.borderColor}`) .style('border-radius', '6px') .call(draw_donuts) }) .call(div=>{ div.append('div') .style('background-color', dashboardStyle.cardBG) .style('border',`1px solid ${dashboardStyle.borderColor}`) .style('border-radius', '6px') .call(draw_grouped_bars) }) innerDiv.append('div') .style('display','flex') .style('gap', `${chart_layout.svgGutter}px`) .call(div=>{ div.append('div') .style('background-color', dashboardStyle.cardBG) .style('border',`1px solid ${dashboardStyle.borderColor}`) .style('border-radius', '6px') .call(draw_funnel) }) .call(div=>{ div.append('div') .style('background-color', dashboardStyle.cardBG) .style('border',`1px solid ${dashboardStyle.borderColor}`) .style('border-radius', '6px') .call(draw_heatmap) }) return div.node() }33:T1267,table = { const layout = { width, height: 1200, margin:{ top: 12, bottom: 12, left: 12, right: 12, }, get innerWidth(){ return this.width - this.margin.left - this.margin.right }, get innerHeight(){ return this.height - this.margin.top - this.margin.bottom }, get gradeHight(){ return (this.height - this.margin.top - this.margin.bottom)/6 }, gradeWidth: 90, attrWidth: 90 } const svg = d3.create('svg') .attr('width', layout.width) .attr('height', layout.height) const g = svg.append('g') .attr('transform', `translate(${layout.margin.left},${layout.margin.top})`) const table_g = g.append('g') .selectAll('g') .data(data_table) .join('g') table_g.append('g') .attr('transform', (d, i)=> `translate(0, ${i*layout.gradeHight})`) .call(g=>{ g.append('rect') .attr('width', layout.gradeWidth) .attr('height', layout.gradeHight) .attr('fill', 'none') .attr('stroke', '#DEE0E3') } ) .call(g=>{ g.append('text') .text((d, i)=> `Grads - ${d[0]}`) .style("font", "13px sans-serif") .style("font-weight", '500') .style("text-anchor","start") .attr('fill', '#646A73') .attr('transform', `translate(${12}, ${layout.gradeHight / 2})`) } ) table_g.append('g') .attr('transform', (d, i)=> `translate(${layout.gradeWidth}, ${i*layout.gradeHight})`) .selectAll('g') .data([1,2,3,4]) .join('g') .attr('transform', (d, i)=> `translate(0, ${i*layout.gradeHight/4})`) .call(g=>{ g.append('rect') .attr('width', layout.attrWidth) .attr('height', layout.gradeHight/4) .attr('fill', 'none') .attr('stroke', '#DEE0E3') }) .call(g=>{ g.append('text') .text((d, i)=> { if(i==1){ return 'Lightness' }else if(i==2){ return 'Chroma' }else if(i==3){ return 'Hue' } }) .style("font", "13px sans-serif") .style("font-weight", '500') .style("text-anchor","start") .attr('fill', '#646A73') .attr('transform', `translate(${12}, ${layout.gradeHight / 8 + 6})`) } ) const dataTableWidth = (layout.innerWidth - (layout.gradeWidth + layout.attrWidth))/data_table.get(1).length table_g.append('g') .attr('transform', (d, i)=> `translate(${layout.gradeWidth + layout.attrWidth}, ${i*layout.gradeHight})`) .selectAll('g') .data(d=>d[1]) .join('g') .attr('transform', (d, i)=> { return `translate(${dataTableWidth * i}, 0)` }) .selectAll('g') .data(d=>[d, d, d, d]) .join('g') .attr('transform', (d, i)=> { return `translate(0, ${layout.gradeHight/4 * i})` }) .call(g=>{ g.append('rect') .attr('width', dataTableWidth) .attr('height', layout.gradeHight/4) .attr('fill', ({Hex},i)=>{ if(i==0){ return Hex }else{ return 'none' } }) .attr('stroke', '#DEE0E3') }) .call(g=>{ g.append('text') .text(({Hex}, i)=> { const {lightness, chroma, hue} = chroma_okhcl(Hex) if(i==0){ return Hex }else if(i==1){ return d3.format('.4f')(lightness) }else if(i==2){ return d3.format('.4f')(chroma) }else if(i==3){ return d3.format('.2f')(hue) } }) .style("font", "13px sans-serif") .style("font-weight", '500') .style("text-anchor","start") .attr('fill', (d,i)=>{ if(i==0){ const bgColor = d['Hex'] // console.log(d) // console.log(d['Source']) const {Hex: textColor} = newColorData.find(e=>{ return (e['Source'] == d['Source']) && e['Grads'] == 1 }) // console.log(textColor) const contrast = colorContrast(bgColor, textColor) if(contrast < contrastThreshold){ return '#fff' }else{ return textColor } }else{ return '#1F2329' } }) .attr('transform', `translate(${12}, ${layout.gradeHight / 8 + 6})`) }) return svg.node() }34:T535,function colorInterpolate(colorArray, {type = 'default'} = {}){ // 构建一个渐变函数对象，用节点作为key const colorFuncObj = {}; for (let i = 1; i < colorArray.length; ++i) { colorFuncObj[`${i}`] = [colorArray[i-1], colorArray[i]] } // 返回一个函数 return function(number) { if(number<0 || number>1){ return '#fff' } let mappedNumber = number * (colorArray.length - 1) //根据前景色或者背景色映射 if(type == 'default'){ }else if(type == 'front'){ mappedNumber = mappedNumber * colorPercentage.frontColor // console.log('front color') }else if(type == 'background'){ mappedNumber = mappedNumber * colorPercentage.backgroundColor + (1 - colorPercentage.backgroundColor) * (colorArray.length - 1) // console.log('background color') }else{ throw new Error('"type" is illegal') } for (const key in colorFuncObj){ if((mappedNumber >= +key-1)&&(mappedNumber < +key)){ const ratio = mappedNumber - Math.trunc(mappedNumber) const [color1, color2] = colorFuncObj[`${key}`] return d3.color(d3.interpolate(color1, color2)(ratio)).formatHex() }else if(mappedNumber == colorArray.length-1){ return colorArray[colorArray.length - 1] } } } }35:T4e6,function draw_donuts(div){ const container = div.append('div') .style('display','flex') .style('flex-direction', 'column') const title = container.append('div') .append('p') .text('销售额占比') .style('margin', '0 0 0 0') .style('padding', '18px 16px') .style('font-family', 'sans-serif') .style('font-size', '14px') .style('font-weight', 500) .style('color', dashboardStyle.textColor) const svg = container.append('div') .style('display','flex') .style('flex-direction', 'column') .append('svg') .attr('width', `${chart_layout_specific.donuts.width}px`) .attr('height', `${chart_layout_specific.donuts.height}px`) const chart_g = svg.append('g') .attr('transform',`translate(${chart_layout_specific.donuts.width/2},${chart_layout_specific.donuts.height/2})`) const donuts_data_pied = pie(donuts_data.slice(0, chartFirstN.donuts)) chart_g.selectAll('g') .data(donuts_data_pied.slice(0, chartFirstN.donuts)) .join('g') .call(g=>{ g.append('path') .attr('d', d=>arc(d)) .style('fill', d=>scaleColor_donuts(d['data'][0])) .style('stroke-width', '1px') .style('stroke', dashboardStyle.cardBG) }) }36:T90b,function draw_grouped_bars(div) { const container = div.append('div') .style('display','flex') .style('flex-direction', 'column') const title = container.append('div') .append('p') .text('不同员工各产品销售额') .style('margin', '0 0 0 0') .style('padding', '18px 16px') .style('font-family', 'sans-serif') .style('font-size', '14px') .style('font-weight', 500) .style('color', dashboardStyle.textColor) const svg = container.append('div') .style('display','flex') .style('flex-direction', 'column') .append('svg') .attr('width', `${chart_layout_specific.groupedBars.width}`) .attr('height', `${chart_layout_specific.groupedBars.height}px`) const chart_g = svg.append('g') .attr('transform',`translate(${chart_layout_specific.groupedBars.margin.left},${chart_layout_specific.groupedBars.margin.top})`) chart_g.append('g') .attr('class', 'x-axis') .attr('transform', `translate(0,${chart_layout_specific.groupedBars.innerHeight})`) .call(xAxis_groupBars) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) chart_g.append('g') .attr('class', 'y-axis') .call(yAxis_groupBars) .call(g=>{ g.selectAll('.tick line').clone() .attr("x2", chart_layout_specific.groupedBars.innerWidth) .attr("stroke-opacity", 0.1) }) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) chart_g.append('g') .selectAll('g') .data(grouped_bars_data.slice(0, chartFirstN.barChart_outer)) .join('g') .attr('transform', d=> `translate(${outerXScale_groupedBars(d[0])},0)`) .selectAll('rect') .data(d=>d[1].slice(0, chartFirstN.barChart_inner)) .join('rect') .attr('x', d=> innerXScale_groupedBars(d[0])) .attr('y', d=> yScale_groupedBars(d[1])) .attr('width', innerXScale_groupedBars.bandwidth()) .attr('height', d=>chart_layout_specific.groupedBars.innerHeight - yScale_groupedBars(d[1])) .attr('fill', d=>colorScale_groupBars(d[0])) }37:Tf6d,function draw_funnel(div) { const container = div.append('div') .style('display','flex') .style('flex-direction', 'column') const title = container.append('div') .append('p') .text('招聘过程漏斗') .style('margin', '0 0 0 0') .style('padding', '18px 16px') .style('font-family', 'sans-serif') .style('font-size', '14px') .style('font-weight', 500) .style('color', dashboardStyle.textColor) const svg = container.append('div') .style('display','flex') .style('flex-direction', 'column') .append('svg') .attr('width', `${chart_layout_specific.funnel.width}`) .attr('height', `${chart_layout_specific.funnel.height}px`) const chart_g = svg.append('g').attr('transform',`translate(${chart_layout_specific.funnel.margin.left},${chart_layout_specific.funnel.margin.top})`) let funnelBarNum = funnel_data.slice(0, chartFirstN.funnel).length if(funnelBarNum < 4){ funnelBarNum = 4 } const funnelBarUnit = chart_layout_specific.funnel.innerHeight/(funnelBarNum * 3 - 1) const chart_center_g = chart_g.append('g') .attr('transform',d=>{ let yOffset = 0 if(chartFirstN.funnel < 4){ yOffset = (chart_layout_specific.funnel.innerHeight - funnelBarUnit*3*chartFirstN.funnel-funnelBarUnit)/2 } return `translate(${chart_layout_specific.funnel.innerWidth/2}, ${yOffset})` }) chart_center_g.append('g') .attr('class', 'rects-g') .selectAll('g') .data(funnel_data.slice(0, chartFirstN.funnel)) .join('g') .attr('transform', (d, i) => `translate(${- widthScale_funnel(d[1])/2}, ${i * funnelBarUnit * 3})`) .call(g=>{ g.append('rect') .attr('width', d => widthScale_funnel(d[1])) .attr('height', funnelBarUnit * 2) .attr('rx', 4) .attr('fill', (d, i) => colorScale_funnel(d[0])) }) .call(g=>{ g.append('text') .attr('transform', (d, i) => `translate(${widthScale_funnel(d[1])/2}, ${funnelBarUnit + 6})`) .text(d => d[1]) .style("font", "13px sans-serif") .style("font-weight", '600') .style("text-anchor","middle") .attr('fill', d=>{ const bgColor = d3.color( colorScale_funnel(d[0])).formatHex() const contrast = colorContrast(bgColor, textColor) if(contrast < contrastThreshold){ return '#fff' }else{ return textColor } }) }) const trapezoid_data = []; for (let i = 0; i < funnel_data.slice(0, chartFirstN.funnel).length - 1; i++) { trapezoid_data.push(funnel_data.slice(0, chartFirstN.funnel).slice(i, i + 2)); } chart_center_g.append('g') .attr('class', 'trapezoid-g') .selectAll('g') .data(trapezoid_data) .join('g') .attr('transform', (d, i) => `translate(${- widthScale_funnel(d[0][1])/2}, ${i * funnelBarUnit * 3 + funnelBarUnit * 2})`) .call(g=>{ g.append('polygon') .attr('points', (d, i) => { const point0 = { x:0, y:0 }, point1 = { x:widthScale_funnel(d[0][1]), y:0 }, point2 = { x:(widthScale_funnel(d[0][1])-widthScale_funnel(d[1][1]))/2+widthScale_funnel(d[1][1]), y:funnelBarUnit }, point3 = { x:(widthScale_funnel(d[0][1])-widthScale_funnel(d[1][1]))/2, y:funnelBarUnit } return `${point0.x},${point0.y} ${point1.x},${point1.y} ${point2.x},${point2.y} ${point3.x},${point3.y}` }) .attr('fill', ()=>{ if(dashboardTheme=='Light'){ return '#F4F4F4' }else if(dashboardTheme=='Dark'){ return '#3A3A3A' } }) }) }38:Tffd,function draw_heatmap(div) { const container = div.append('div') .style('display','flex') .style('flex-direction', 'column') const title = container.append('div') .append('p') .text('员工绩效热力图') .style('margin', '0 0 0 0') .style('padding', '18px 16px') .style('font-family', 'sans-serif') .style('font-size', '14px') .style('font-weight', 500) .style('color', dashboardStyle.textColor) const svg = container.append('div') .style('display','flex') .style('flex-direction', 'column') .append('svg') .attr('width', `${chart_layout_specific.heatmap.width}`) .attr('height', `${chart_layout_specific.heatmap.height}`) const chart_g = svg.append('g') .attr('transform',`translate(${chart_layout_specific.heatmap.margin.left},${chart_layout_specific.heatmap.margin.top})`) chart_g.append('g') .call(yAxis_heatmap) .call(g=>{ g.selectAll('.domain').remove() }) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) chart_g.append('g') .attr('transform',`translate(0, ${chart_layout_specific.heatmap.innerHeight})`) .call(xAxis_heatmap) .call(g=>{ g.selectAll('.domain').remove() }) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) const chart_rects_g = chart_g .append('g') .attr('class', 'heatmap-rects-g') chart_rects_g.selectAll('g') .data(heatmap_data) .join('g') .attr('class', 'rects-horizontal-g') .attr('transform',d=> `translate(0, ${yBandScale_heatmap(d[0])})`) .selectAll('g') .data(d=> d[1]) .join('g') .attr('transform',d=> `translate(${xBandScale_heatmap(d[0])}, 0)`) .call(g=>{ g.append('rect') .attr('x', heatmap_attrs.gap/2) .attr('y', heatmap_attrs.gap/2) .attr('width', xBandScale_heatmap.bandwidth() - heatmap_attrs.gap) .attr('height', yBandScale_heatmap.bandwidth() - heatmap_attrs.gap) .attr('rx', 4) .attr('fill', d=>colorScale_heatmap(d[1])) }) .call(g=>{ g.append('g') .call( g=>{ g.append('text') .attr('transform',`translate(${xBandScale_heatmap.bandwidth()*0.85}, ${yBandScale_heatmap.bandwidth()*0.44})`) .text(d=>{ const ratio = d[1]/d3.sum(heatmap_sample_data, d=>d['value']) return d3.format(".1%")(ratio) }) .style("font", "13px sans-serif") .style("font-weight", '600') .style("text-anchor","end") .attr('fill', d=>{ const bgColor = d3.color(colorScale_heatmap(d[1])).formatHex() const contrast = colorContrast(bgColor, textColor) if(contrast < contrastThreshold){ return '#fff' }else{ return textColor } }) }) .call( g=>{ g.append('text') .attr('transform',`translate(${xBandScale_heatmap.bandwidth()*0.85}, ${yBandScale_heatmap.bandwidth()*0.44 + 15})`) .text(d=>d[1]) .style("font", "13px sans-serif") .style("font-weight", '600') .style("text-anchor","end") .attr('fill', d=>{ const bgColor = d3.color(colorScale_heatmap(d[1])).formatHex() const contrast = colorContrast(bgColor, textColor) if(contrast < contrastThreshold){ return '#fff' }else{ return textColor } }) }) }) }39:T8de,function draw_plot(div){ const svg = div.append('svg').attr('width', '100%').attr('height', '100%') const svg_plot_g = svg.append('g').attr('id', 'svg-plot-group') .attr('transform', `translate(${plot_layout.margin.left},${plot_layout.margin.top})`); const dots_group = svg_plot_g.append('g') .attr('id', 'dots-group') .raise() dots_group.selectAll('circle') .data(stepColors) .join('circle') .attr('r', r) .attr('cx', d=>scaleX(chroma_okhcl(d['Hex'])[feilds.polt_xFeild])) .attr('cy', d=>scaleY(chroma_okhcl(d['Hex'])[feilds.polt_yFeild])) .attr('fill', d=>d['Hex']) svg_plot_g.append('g') .attr('transform', `translate(0,${plot_layout.innerHeight})`) .call(xAxis) .call(g=>{ g.selectAll('.tick line') .clone() .attr('y2', -plot_layout.innerHeight) .attr('opacity', .1) }) .call(g=>{ g.selectAll('.tick:last-child line') .clone() .attr('y2', -plot_layout.innerHeight) }) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) svg_plot_g.append('g') .call(yAxis) .call(g=>{ g.selectAll('.tick line') .clone() .attr('x2', plot_layout.innerWidth) .attr('opacity', .1) }) .call(g=>{ g.selectAll('.tick:last-child line') .clone() .attr('x2', plot_layout.innerWidth) }) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) svg_plot_g.append('g') .append('text') .text(`↑${feilds.polt_yFeild.charAt(0).toUpperCase() + feilds.polt_yFeild.slice(1)}`) .style("font", "12px sans-serif") .style("font-weight", '500') .attr('transform', 'translate(-8, -20)') svg_plot_g.append('g') .append('text') .text(`${feilds.polt_xFeild.charAt(0).toUpperCase() + feilds.polt_xFeild.slice(1)} →`) .style("font", "12px sans-serif") .style("font-weight", '500') .attr('transform', `translate(${plot_layout.innerWidth - 60}, ${plot_layout.innerHeight + 40})`) }3a:T4dd,function draw_radar(div){ const svg = div.append('svg').attr('width', '100%').attr('height', '100%') const svg_radar_g = svg.append('g').attr('id', 'svg-plot-group') .attr('transform', `translate(${plot_layout.margin.left},${plot_layout.margin.top})`); const svg_radar_g_center_g = svg_radar_g.append('g').attr('id', 'svg-plot-group-center-g') .attr('transform', `translate(${plot_layout.innerR},${plot_layout.innerR})`); svg_radar_g_center_g.append('g') .selectAll('circle') .data(stepColors) .join('circle') .attr('r', r) .attr('fill', d=>d['Hex']) .attr('cx', d=>scaleR(chroma_okhcl(d['Hex'])[feilds.radar_rFeild])) .attr('transform', d=>`rotate(${scaleCircle(chroma_okhcl(d['Hex'])['hue'])})`) svg_radar_g_center_g.append('g') .call(rAxis) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) svg_radar_g_center_g.append('g') .call(circleAxis) .call(g=>{ g.selectAll('.domain, .tick line') .attr('stroke', dashboardStyle.axisLine) g.selectAll('text') .attr('fill', dashboardStyle.axisText) }) }3b:T4d3,chart_layout_specific = ({ donuts:{ width: chart_layout.frameWidth[0][0], height: chart_layout.svgHeight, }, groupedBars:{ width: chart_layout.frameWidth[0][1], height: chart_layout.svgHeight, margin:{ top: 12, bottom: 36, left: 64, right: 36, }, get innerWidth(){ return this.width - this.margin.left - this.margin.right }, get innerHeight(){ return this.height - this.margin.top - this.margin.bottom } }, funnel:{ width: chart_layout.frameWidth[1][0], height: chart_layout.svgHeight * 1.2, margin:{ top: 8, bottom: 24, left: 24, right: 24, }, get innerWidth(){ return this.width - this.margin.left - this.margin.right }, get innerHeight(){ return this.height - this.margin.top - this.margin.bottom } }, heatmap:{ width: chart_layout.frameWidth[1][1], height: chart_layout.svgHeight * 1.2, margin:{ top: 12, bottom: 56, left: 56, right: 36, }, get innerWidth(){ return this.width - this.margin.left - this.margin.right }, get innerHeight(){ return this.height - this.margin.top - this.margin.bottom } }, })3c:[] 30:{"id":"33432b7ef3a8ef71","slug":null,"title":"New Color Scheme Validation - Sequential","thumbnail":"c631ed3853cfcec2df20c9989994ffc73a182186b0c96645f6d6adc0fea7da99","access_level":"public","create_time":"$D2023-07-25T09:57:51.225Z","update_time":"$D2024-10-11T08:14:46.251Z","view_time":null,"first_public_time":"$D2023-07-25T09:57:51.225Z","has_unpublished_edits":null,"fork":{"id":"193a4aeb7ff7ae25","slug":"new-color-scheme-validation-categorical-public","title":"New Color Scheme Validation - Categorical - Public","owner":{"id":"7e6c6df6a27dfd33","login":"liucsny","name":"Liu Cong"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7e6c6df6a27dfd33","login":"liucsny","name":"Liu Cong","avatar_url":"https://avatars-next.observableusercontent.com/76ffe44b2649d39c3f3458cb93b4c1b249132d6500f14fee259852ca6274ee33","tier":"starter_2024"},"version":1901,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf94b48539e80bd5","login":"liucsny","name":"Liu Cong","avatar_url":"https://avatars-next.observableusercontent.com/76ffe44b2649d39c3f3458cb93b4c1b249132d6500f14fee259852ca6274ee33","tier":null}],"members":[{"type":"individual","id":"cf94b48539e80bd5","login":"liucsny","name":"Liu Cong","avatar_url":"https://avatars-next.observableusercontent.com/76ffe44b2649d39c3f3458cb93b4c1b249132d6500f14fee259852ca6274ee33","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"25b446e61fe89774","slug":"color-analysis","title":"Color Analysis","owner":{"id":"7e6c6df6a27dfd33","login":"liucsny","name":"Liu Cong"}},"type":"notebook","body":{"title":"New Color Scheme Validation - Sequential","cells":[{"id":0,"value":"# New Color Scheme Validation - Sequential","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1636,"value":"viewof n = Inputs.range([1, 20], {label: \"n\", step: 1, value: 14})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"newColorData = d3.csv(getCsvUrl(url_new_color), (e)=>{\n if(e['Hex'].trim().charAt(0)==='#'){\n return {\n Source: `${e['Source']} - ${e['Serise']}`,\n SourceOrigin: e['Serise'],\n Serise: e['Serise'],\n Hex: e['Hex'],\n Grads: +e['Grads'],\n Type: e['Source'],\n Serise: e['Serise']\n }\n }else{\n return {\n Source: `${e['Source']} - ${e['Serise']}`,\n SourceOrigin: e['Serise'],\n Serise: e['Serise'],\n Hex: '#'+e['Hex'],\n Grads: +e['Grads'],\n Type: e['Source'],\n Serise: e['Serise']\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"viewof chartFirstN = Inputs.form({\n donuts: Inputs.range([1, 30], {label: \"Donuts FirstN\", step: 1, value: 7}),\n barChart_outer: Inputs.range([1, 30], {label: \"Bar Chart FirstN outer\", step: 1}),\n barChart_inner: Inputs.range([1, 30], {label: \"Bar Chart FirstN inner\", step: 1, value: 7}),\n funnel: Inputs.range([1, 10], {label: \"Funnel FirstN\", step: 1}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"viewof donuts_attrs = Inputs.form({\n groupBy: Inputs.select([\"name\", \"key\"], {label: \"Group by\"}),\n innerRRatio: Inputs.range([0, 1], {label: \"inner R Ratio\", step: .01, value: 0.3}),\n outerRRatio: Inputs.range([0, 1], {label: \"outer R Ratio\", step: .01, value: 0.8}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"viewof grouped_bars_attrs = Inputs.form({\n groupOrder: Inputs.select([\"name - key\", \"key - name\"], {label: \"Group order\", value: \"key - name\"}),\n paddingInner: Inputs.range([0, 1], {label: \"paddingInner\", step: .01, value: 0.2}),\n paddingInner_2: Inputs.range([0, 1], {label: \"paddingInner-2\", step: .01, value: 0.15}),\n paddingOuter: Inputs.range([0, 1], {label: \"paddingOuter\", step: .01, value: 0.2}),\n paddingOuter_2: Inputs.range([0, 10], {label: \"paddingOuter-2\", step: .01, value: 0}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"viewof contrastThreshold = Inputs.range([0, 12], {label: \"Contrast Threshold\", step: .1, value: 4})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"viewof colorPercentage = Inputs.form({\n frontColor: Inputs.range([0, 1], {label: \"Front Color\", step: .01, value: 0.8}),\n backgroundColor: Inputs.range([0, 1], {label: \"Background Color\", step: .01, value: 0.8}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof colorScheme = {\n const array = []\n newColorData.forEach(e=>{\n if(!array.includes(e['Source']))array.push(e['Source'])\n })\n return Inputs.select(array, {label: \"Select Color Scheme\", \n value: 'New - Blue'\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"viewof dashboardTheme = Inputs.select([\"Light\", \"Dark\"], {label: \"Dashboard Theme\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"dashboardStyle = {\n // \n let style = {}\n if(dashboardTheme=='Light'){\n style = {\n textColor: '#1f2329',\n baseBG: '#f2f3f5',\n cardBG: '#ffffff',\n axisLine: '#1F2329',\n axisText: '#1F2329',\n borderColor: '#dee0e3'\n }\n }else if(dashboardTheme=='Dark'){\n style = {\n textColor: '#f0f0f0',\n baseBG: '#0a0a0a',\n cardBG: '#1a1a1a',\n axisLine: '#EBEBEB',\n axisText: '#EBEBEB',\n borderColor: '#5f5f5f'\n }\n }\n return style\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"data_table = d3.group(newColorData.filter(e=>e['Type']=='New'), d=>d['Grads'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"## Color Interpolate Function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"function colorSampling(colorArray,n, {type = 'default'} = {}){\n if(n == 1){\n return [colorInterpolate(colorArray, {type})(0.35)]\n }else if(n == 2){\n return [colorInterpolate(colorArray, {type})(0.25), \n colorInterpolate(colorArray, {type})(0.6)]\n }else if(n == 3){\n return [colorInterpolate(colorArray, {type})(0.2), \n colorInterpolate(colorArray, {type})(0.45), \n colorInterpolate(colorArray, {type})(0.8)]\n }else if(n == 4){\n return [colorInterpolate(colorArray, {type})(0.1), \n colorInterpolate(colorArray, {type})(0.35), \n colorInterpolate(colorArray, {type})(0.6), \n colorInterpolate(colorArray, {type})(0.85)]\n }else{\n return d3.quantize(colorInterpolate(colorArray, {type}),n)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"viewof heatmap_attrs = Inputs.form({\n colorClassed: Inputs.toggle({label: \"Color Classed\", value: false}),\n gap: Inputs.range([0, 10], {label: \"Gap\", step: .1, value: 4}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof r = Inputs.range([0, 10], {label: \"r\", step: 0.1, value: 5.6})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"viewof steps = {\n const value = newColorData.filter(e=>e['Source']===colorScheme).length\n return Inputs.range([1, 40], {label: \"Steps\", step: 1, value})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"viewof classedColor = Inputs.toggle({label: \"Classed Color\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"{\n const colorArray = newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex'])\n if(classedColor){\n return ramp(colorInterpolate(colorArray, {type: 'default'}), steps+1)\n }else{\n return ramp(colorInterpolate(colorArray))\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"plots = {\n const div = d3.create('div')\n .style('padding', `${plot_layout.svgMargin}px`)\n .style('display','flex')\n .style('gap', `${chart_layout.svgGutter}px`)\n .style('background-color',dashboardStyle.cardBG)\n .call(div=>{\n div.append('div')\n .style('flex-grow',1)\n .style('height', `${plot_layout.height}px`)\n .call(draw_plot)\n })\n .call(div=>{\n div.append('div')\n .style('flex-grow',1)\n .style('height', `${plot_layout.height}px`)\n .call(draw_radar)\n })\n \n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"colorInterpolate(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']))(.6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof feilds = Inputs.form({\n polt_xFeild: Inputs.select([\"lightness\", \"chroma\", \"hue\"], {label: \"xFeild\", value: 'chroma'}),\n polt_yFeild: Inputs.select([\"lightness\", \"chroma\", \"hue\"], {label: \"yFeild\", value: 'lightness'}),\n radar_rFeild: Inputs.select([\"lightness\", \"chroma\"], {label: \"rFeild\", value: 'lightness'}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"## Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1189,"value":"### Draw Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1195,"value":"#### Donuts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"donuts_data = d3.rollups(donuts_sample_data, v=> d3.sum(v, d=>d['value']),d=> d[donuts_attrs.groupBy])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"arc = d3.arc()\n.innerRadius(donuts_attrs.innerRRatio * chart_layout_specific.donuts.width/2)\n.outerRadius(donuts_attrs.outerRRatio * chart_layout_specific.donuts.width/2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"pie = d3.pie()\n.value(d=>d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"donuts_shapes = pie(donuts_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"#### Grouped Bars","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":562,"value":"grouped_bars_data = {\n if(grouped_bars_attrs.groupOrder=='name - key'){\n return d3.rollups(donuts_sample_data, v=> d3.sum(v, d=>d['value']), d=> d['name'], d=> d['key'])\n }else{\n return d3.rollups(donuts_sample_data, v=> d3.sum(v, d=>d['value']), d=> d['key'], d=> d['name'])\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"#### Funnel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1272,"value":"funnel_data = d3.rollups(funnel_sample_data, v=>d3.sum(v, d=>d['value']), e=> e['key']).sort((a,b)=>b[1]-a[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"#### Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1342,"value":"heatmap_data = d3.rollups(heatmap_sample_data, v=>d3.sum(v, d=>d['value']), e => e['name'], e=> e['key'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"textColor = newColorData.filter(e=>e['Source']===colorScheme)[0]['Hex']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"newColorData.filter(e=>e['Source']===colorScheme)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"colorContrast(textColor, '#fff')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"// contrastThreshold = 4.0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"### Color Contrast\nhttps://observablehq.com/@mbostock/wcag-contrast-ratio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1523,"value":"function colorContrast(c1, c2) {\n const l1 = lrgb_luminance(rgb_lrgb(d3.rgb(c1)));\n const l2 = lrgb_luminance(rgb_lrgb(d3.rgb(c2)));\n return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"function lrgb_luminance([r, g, b]) {\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"function rgb_lrgb({r, g, b}) {\n return [r / 255, g / 255, b / 255].map(rgb_lrgb1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"function rgb_lrgb1(v) {\n return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## Color Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1618,"value":"newColorData.filter(e=>e['Source']===colorScheme)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1615,"value":"colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), 12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"stepColors = colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), steps).map(e=>{\n return {\n Hex: e\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"## Sample Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"## Layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"plot_layout = {\n let svgMargin = 30\n let svgGutter = 30\n let svgWidth = (width - svgMargin * 2 - svgGutter)/2\n \n return {\n height: 546,\n svgMargin,\n svgGutter,\n svgWidth,\n margin:{\n top: 60,\n bottom: 60,\n left: 60,\n right: 60,\n },\n get innerWidth(){\n return this.svgWidth - this.margin.left - this.margin.right\n },\n get innerHeight(){\n return this.height - this.margin.top - this.margin.bottom\n },\n get innerR(){\n const innerWidth = this.svgWidth - this.margin.left - this.margin.right,\n innerHeight = this.height - this.margin.top - this.margin.bottom\n return Math.min(innerWidth,innerHeight)/2\n },\n insideR: 60\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"chart_layout = {\n let svgMargin = 20\n let svgGutter = 20\n \n return {\n svgHeight: 260,\n svgMargin,\n svgGutter,\n ratio:[[1, 3], [1, 2]],\n chartMargin:{\n top: 60,\n bottom: 60,\n left: 60,\n right: 60,\n },\n get frameWidth(){\n let frameWidth = width - svgMargin - svgMargin - this.svgGutter * (this.ratio.length-1)\n return this.ratio.map(e=>{\n if(typeof e === 'number'){\n return e/d3.sum(this.ratio) * frameWidth\n }else if(typeof e === 'object'){\n return e.map(d=>d/d3.sum(e) * frameWidth)\n }\n })\n },\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"# Scale & Aixs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"## Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":600,"value":"### Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"scaleLightness = d3.scaleLinear()\n .domain([0, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"scaleChroma = d3.scaleLinear()\n .domain([0, 0.25])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"scaleHue = d3.scaleLinear()\n .domain([0, 360])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"scale = ({\n lightness: scaleLightness,\n chroma: scaleChroma,\n hue: scaleHue\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"scaleX = scale[feilds.polt_xFeild].copy().range([0, plot_layout.innerWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"scaleY = scale[feilds.polt_yFeild].copy().range([plot_layout.innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"scaleR = scale[feilds.radar_rFeild].copy().range([plot_layout.insideR, plot_layout.innerR])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"scaleCircle = d3.scaleLinear()\n .domain([0, 360])\n .range([-90, 270])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"### Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"xAxis = d3.axisBottom().scale(scaleX).ticks(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"yAxis = d3.axisLeft().scale(scaleY).ticks(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"circleAxis = function(node) {\n node.append('g')\n .attr('class','x-axis')\n .call(g=>{\n g.selectAll('g')\n .data(scaleR.ticks(5))\n .join('g')\n .append('circle') \n .attr('r', d=>scaleR(d))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", dashboardStyle.axisLine)//外圈边界\n .attr('opacity', (d,n)=> !n?0:1)\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-dasharray\", \"2\")\n })\n .call(g=>{\n g.append('circle')\n .attr('r', plot_layout.innerR)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", dashboardStyle.axisLine)//外圈边界\n .attr(\"stroke-width\", 0.5)\n })\n .call(g=>{\n g.append('circle')\n .attr('r', d=>scaleR(0))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", dashboardStyle.axisLine)//内圈边界\n .attr(\"stroke-width\", 0.5)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"RtickArray = {\n let interpolator = d3.interpolate(scaleCircle.range()[0],scaleCircle.range()[1])\n let array = d3.quantize(interpolator, 13)\n array.shift()\n return array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"rAxis = function(node) {\n node.append('g')\n .attr('class','r-axis')\n .call(g=>{\n g.selectAll('g')\n .data(RtickArray)\n .join('g')\n .attr('class', 'tick')\n .attr('transform', d => {\n return `rotate(${scaleCircle(d)})`\n }) \n .append('line')\n .attr('x1', plot_layout.innerR+10)\n .attr('x2', d=>scaleR(0)-5)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#aaa\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-dasharray\", \"3\")\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"## Donuts Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"### Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"scaleColor_donuts = {\n let samplingNum\n if(chartFirstN.donuts< donuts_data.length){\n samplingNum = chartFirstN.donuts\n }else{\n samplingNum = donuts_data.length\n }\n return d3.scaleOrdinal()\n .domain(donuts_data.sort((a,b)=>b[1]-a[1]).map(d=> d[0]))\n .range(colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), samplingNum, {type: 'front'}))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"## Grouped Bars Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"### Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"outerXScale_groupedBars =d3.scaleBand()\n .domain(d3.groups(donuts_sample_data, d=>{\n if(grouped_bars_attrs.groupOrder=='name - key'){\n return d['name']\n }else{\n return d['key']\n }\n }).map(e=>e[0]).slice(0, chartFirstN.barChart_outer))\n .range([0, chart_layout_specific.groupedBars.innerWidth])\n .paddingInner(grouped_bars_attrs.paddingInner)\n .paddingOuter(grouped_bars_attrs.paddingOuter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"innerXScale_groupedBars =d3.scaleBand()\n .domain(d3.groups(donuts_sample_data, d=>{\n if(grouped_bars_attrs.groupOrder=='name - key'){\n return d['key']\n }else{\n return d['name']\n }\n }).map(e=>e[0]).slice(0, chartFirstN.barChart_inner))\n .range([0, outerXScale_groupedBars.bandwidth()])\n .paddingInner(grouped_bars_attrs.paddingInner_2)\n .paddingOuter(grouped_bars_attrs.paddingOuter_2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"yScale_groupedBars = d3.scaleLinear()\n .domain([0, d3.max(grouped_bars_data.slice(0, chartFirstN.barChart_outer), d=> d3.max(d[1].slice(0, chartFirstN.barChart_inner), d=>d[1]))])\n .range([chart_layout_specific.groupedBars.innerHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"d3.max(grouped_bars_data, d=> d3.max(d[1], d=>d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"colorScale_groupBars = {\n let keyName, samplingNum\n if(grouped_bars_attrs.groupOrder=='name - key'){\n keyName = 'key'\n if(chartFirstN.barChart_inner < grouped_bars_data[0][1].length){\n samplingNum = chartFirstN.barChart_inner\n }else{\n samplingNum = grouped_bars_data[0][1].length\n }\n }else{\n keyName = 'name'\n if(chartFirstN.barChart_inner < grouped_bars_data[0][1].length){\n samplingNum = chartFirstN.barChart_inner\n }else{\n samplingNum = grouped_bars_data[0][1].length\n }\n }\n \n \n return d3.scaleOrdinal()\n .domain(d3.groups(donuts_sample_data, d=>d[keyName]).map(e=>e[0]))\n .range(colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), samplingNum, {type: 'front'}))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"### Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":733,"value":"xAxis_groupBars = d3.axisBottom().scale(outerXScale_groupedBars)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"yAxis_groupBars = d3.axisLeft().scale(yScale_groupedBars).ticks(4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"## Funnel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"widthScale_funnel = d3.scaleLinear()\n .domain([0, d3.max(funnel_data, d=>d[1])])\n .range([0, chart_layout_specific.funnel.innerWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"colorScale_funnel = {\n let samplingNum\n if(chartFirstN.funnel< funnel_data.length){\n samplingNum = chartFirstN.funnel\n }else{\n samplingNum = funnel_data.length\n }\n\n return d3.scaleOrdinal()\n .domain(funnel_data.map(d=>d[0]))\n .range(colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), samplingNum, {type: 'front'}))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"## Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1434,"value":"### Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1357,"value":"yBandScale_heatmap = d3.scaleBand()\n .domain(d3.groups(heatmap_sample_data, d=>d['name']).map(d=>d[0]))\n .range([0, chart_layout_specific.heatmap.innerHeight])\n .paddingInner(0)\n .paddingOuter(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"xBandScale_heatmap = d3.scaleBand()\n .domain(d3.groups(heatmap_sample_data, d=>d['key']).map(d=>d[0]))\n .range([0, chart_layout_specific.heatmap.innerWidth])\n .paddingInner(0)\n .paddingOuter(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"colorScale_heatmap = {\n if(heatmap_attrs.colorClassed){\n \n }else{\n return d3.scaleSequential()\n .domain([d3.max(heatmap_data, d=>d3.max(d[1], e=> e[1])), 0])\n .interpolator(colorInterpolate(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), {type: 'background'}))\n }\n}\n// d3.scaleOrdinal()\n// .domain(funnel_data.map(d=>d[0]))\n// .range(colorSampling(newColorData.filter(e=>e['Source']===colorScheme).map(e=>e['Hex']), samplingNum))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"### Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1442,"value":"yAxis_heatmap = d3.axisLeft().scale(yBandScale_heatmap)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"xAxis_heatmap = d3.axisBottom().scale(xBandScale_heatmap)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"## Ramp","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":807,"value":"function ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"-moz-crisp-edges\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## Fetch data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"url_new_color = \"https://docs.google.com/spreadsheets/d/1XYmEOWlWjYGU4ulRxbYkk975lKEM-vbJvKq3rPh3gLI/edit?usp=sharing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"url_sample_data = 'https://docs.google.com/spreadsheets/d/1YGzRCI3f9_b1lPMIy1I-IRoRpaRvh8afMyE_umFyRY0/edit?usp=sharing'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"getCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"sample_data = d3.csv(getCsvUrl(url_sample_data), (e)=>{\n return {\n name: e['Name'],\n key: e['Key'],\n value: +e['Value'].replace(',','').replace(' ',''),\n chartType: e['Chart']\n }\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"donuts_sample_data = sample_data.filter(e=>e['chartType']== 'donuts_groupedbars')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"funnel_sample_data = sample_data.filter(e=>e['chartType']== 'funnel')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"heatmap_sample_data = sample_data.filter(e=>e['chartType']== 'heatmap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"## Chromajs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"chroma = require('https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"function chroma_okhcl(hex) {\n return {\n lightness: chroma(hex).oklch()[0],\n chroma: chroma(hex).oklch()[1],\n hue:chroma(hex).oklch()[2]\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 31:"$30:body"