2f:Tfad,iTable = (data, { columns = maybeColumns(data), // array of column names value, // initial selection required = true, // if true, the value is everything if nothing is selected sort, // name of column to sort by, if any reverse = false, // if sorting, true for descending and false for ascending format, // object of column name to format function locale, align, // object of column name to left, right, or center header, // object of column name to string or HTML element rows = 11.5, // maximum number of rows to show height, maxWidth, width = {}, // object of column name to width, or overall table width multiple = true, layout = "auto" // "fixed" or "auto" } = {} ) => { // Deep copy original data to be displayed at all times in the summary charts const dataFull = JSON.parse(JSON.stringify(data)); const rowHeight = 22; const maxHeight = height === undefined ? (rows + 1) * rowHeight - 1 : undefined; columns = columns === undefined ? columnsof(data) : arrayify(columns); format = myFormatof(format, data, columns, locale); let colNames; let index = Uint32Array.from(data, (_, i) => i); let n = rows * 2; console.log('rows: ', rows) // Compose the table html const tbody = html``; const tr = html`${columns.map( column => html`` )}`; // Construct const theadr = html` ${columns.map(column => { let thisChart = iheaderCharts(dataFull, column); console.log('thisChart.value: ', thisChart.value) if (thisChart.value) { console.log('thisChart generator: ', Generators.input(thisChart)) console.log('thisChart.value[mean]: ', thisChart.value["mean"]) console.log('formatted thisChart.value[mean]: ', d3.format("d")(thisChart.value["mean"])) } return html`

${header && column in header ? header[column] : column}

${thisChart.value ? `Average: ${d3.format("d")(thisChart.value["mean"])}` : ''}

${thisChart}

` })} `; // Construct const element = html`

${data.length || columns.length ? theadr : null} ${tbody}

`; function render(i, j) { return Array.from(index.subarray(i, j), i => { const itr = tr.cloneNode(true); //itr.classList.toggle("selected", selected.has(i)); for (let j = 0; j < columns.length; ++j) { let column = columns[j]; let value = data[i][column]; if (value === null && !Number.isNaN(value)) continue; value = format[column](value); //value; // if (!(value instanceof Node)) value = document.createTextNode(value); itr.childNodes[j + 1].appendChild(value); } return itr; }); } tbody.append(...render(0, n)); element.value = value; return element }30:Ta4a,// FOR THIS EXERCISE ONLY CONSIDER THE HISTOGRAM // chart = d3HistogramFn(data, col) iheaderCharts = (data, col) => { let content, value, missing_label, pct_missing, min, max, median, mean, sd; const notFiniteFormat = d3.format(",.0f"); let format; let chart; let el; // Construct chart based on column type const type = getType(data, col) switch(type) { // Categorical columns ***** IGNORE FOR NOW ******* case 'ordinal': //format = d3.format(",.0f") // Calculate category percent and count const categories = d3.rollups( data, v => ({count:v.length, pct:v.length / data.length || 1}), d => d[col] ).sort((a, b) => b[1].count - a[1].count) .map(d => { let obj = {} obj[col] = (d[0] === null || d[0] === "") ? "(missing)" : d[0] obj.count = d[1].count obj.pct = d[1].pct return obj }) // Create the chart const stack_chart = SmallStack(categories, col) // element to return el = htl.html`

${stack_chart}

` break; // Date columns ***** IGNORE FOR NOW ******* case "date": // Element to return el = htl.html`

${col} ${type} CHART

` break; // Continuous columns ***** HISTOGRAM FUNCTION HERE ******* default: // Compute values min = d3.min(data, d => +d[col]) max = d3.max(data, d => +d[col]) mean = d3.mean(data, d => +d[col]) median = d3.median(data, d => +d[col]) sd = d3.deviation(data, d => +d[col]) if(Number.isFinite(sd)) { let finiteFormat = d3.format(",." + d3.precisionFixed(sd / 10) + "f"); format = x => Number.isFinite(x) ? finiteFormat(x) : notFiniteFormat(x); } else { format = notFiniteFormat; } pct_missing = data.filter(d => d[col] === null || isNaN(d[col])).length / data.length let loadData = function(selectedRegion) { console.log('loadData selectedRegion: ', selectedRegion); return selectedRegion; } chart = d3HistogramFn(data, col) el = htl.html`

${chart}

` value = {column: col, type, min, max, mean, median, sd, missing:pct_missing, n_categories:null} break; } el.value = value; el.appendChild(html``) return el; }31:Taa4,d3HistogramFn = (data, col, { // settings //type = "continuous", margin = ({top: 20, right: 20, bottom: 30, left: 40}), width = 250, height = 95, binThreshold = 10 } = {} ) => { // Sources: // https://observablehq.com/@d3/histogram/2?intent=fork // https://observablehq.com/@d3/focus-context let brushLims; // Bin the data. const bins = d3.bin() .thresholds(binThreshold) .value((d) => d[col]) (data); // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([margin.left, width - margin.right]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range([height - margin.bottom, margin.top]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a rect for each bin. svg.append("g") .attr("fill", "steelblue") .selectAll() .data(bins) .join("rect") .attr("x", (d) => x(d.x0) + 1) .attr("width", (d) => x(d.x1) - x(d.x0) - 1) .attr("y", (d) => y(d.length)) .attr("height", (d) => y(0) - y(d.length)); // Add the x-axis and label. svg.append("g") .style("font", "20px arial") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) .tickFormat(d3.format("~s")) ); // Define brush const brush = d3.brushX() .extent([[margin.left, 0.5], [width - margin.right, height - margin.bottom + 0.5]]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [x.domain()[1], x.range()[1]]; // Append brush const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); // Brush functions function brushed({selection}) { console.log('selection: ', selection) if (selection) { console.log('brush selection.map: ', selection.map(x.invert, x)) brushLims = selection.map(x.invert, x); // ********** HOW TO GET THESE BRUSH VALUES OUT?????? ******* svg.property("value", selection.map(x.invert, x)); svg.dispatch("input"); } } function brushended({selection}) { if (!selection) { gb.call(brush.move, defaultSelection); } } // Return the SVG element. return svg.node(); }32:T992,testTable = { const settings = { "margin": {top: 20, right: 20, bottom: 30, left: 40}, "width": 250, "height": 95, "binThreshold": 10 } let data = data_ev_sans_id; let columns = maybeColumns(data) === undefined ? columnsof(data) : arrayify(columns); let column = 'BEV'; const rows = 20; let n = rows * 2; let index = Uint32Array.from(data, (_, i) => i); // array of numbers from 0...len(data) console.log('index: ', index) let format; let locale; format = myFormatof(format, data, columns, locale); let thisChart = iScatterView; //iHistView; //table header let theadr = html`

	${column} ${thisChart}

`; // Construct let rowData = filteredScatterData.length !== 0 ? filteredScatterData : data; let rowIndex = Uint32Array.from(rowData, (_, i) => i); const tbody = html``; const tr = html`${columns.map( column => html`` )}`; const element = html`

${data.length || columns.length ? theadr : null} ${tbody}

`; function render(i, j) { return Array.from(rowIndex.subarray(i, j), i => { const itr = tr.cloneNode(true); //itr.classList.toggle("selected", selected.has(i)); for (let j = 0; j < columns.length; ++j) { let column = columns[j]; let value = data[i][column]; if (value === null && !Number.isNaN(value)) continue; value = format[column](value); //value; // if (!(value instanceof Node)) value = document.createTextNode(value); itr.childNodes[j + 1].appendChild(value); } return itr; }); } tbody.append(...render(0, n)); return element; }33:Ta4a,iScatterView = { // Specify the chart’s dimensions. const width = 928; const height = 600; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; const data = data_ev_sans_id; const xcol = 'BEV'; const ycol = 'TotalEV'; // Create the horizontal (x) scale, positioning N/A values on the left margin. const x = d3.scaleLinear() .domain([0, d3.max(data, d => d[xcol])]).nice() .range([marginLeft, width - marginRight]) .unknown(marginLeft); // Create the vertical (y) scale, positioning N/A values on the bottom margin. const y = d3.scaleLinear() .domain([0, d3.max(data, d => d[ycol])]).nice() .range([height - marginBottom, marginTop]) .unknown(height - marginBottom); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width - marginRight) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(xcol)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(ycol)); // Append the dots. const dot = svg.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .selectAll("circle") .data(data) .join("circle") .attr("transform", d => `translate(${x(d[xcol])},${y(d[ycol])})`) .attr("r", 3); // Create the brush behavior. svg.call(d3.brush().on("start brush end", ({selection}) => { let value = []; console.log('iHistView selection: ', selection) if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("stroke", "gray") .filter(d => x0 <= x(d[xcol]) && x(d[xcol]) < x1 && y0 <= y(d[ycol]) && y(d[ycol]) < y1) .style("stroke", "steelblue") .data(); } else { dot.style("stroke", "steelblue"); } // Inform downstream cells that the selection has changed. svg.property("value", value).dispatch("input"); })); return svg.node(); }34:Tbf8,headerChartStatic = (dataObj) => { const data = typeof dataObj.numRows === "function" ? dataObj.objects() : typeof dataObj.toArray === "function" ? dataObj.toArray().map((r) => Object.fromEntries(r)) : dataObj const sample = data[0] || {}; const columns = data.columns || Object.keys(sample); let value = []; let colNames; let index = Uint32Array.from(data, (_, i) => i); const rows = 20; let n = rows * 2; console.log('data: ',data) console.log('data.len: ',data.length) // Compose the table html // const element = htl.html`

// // // // ${columns.map((col) => html``)} // // // // ${data.map(row => { // return htl.html` // ${columns.map(col => { // return htl.html`` // })} // `; // })} // //

// ${col} // ${headerChartTypes(data, col)} //
${row[col]}

`; const tbody = html``; const tr = html`${columns.map( column => html`` )}`; const theadr = html` ${columns.map( column => html`

${column}

${headerCharts(data, column)}

` )} `; const element = html`

${data.length || columns.length ? theadr : null} ${tbody}

`; function render(i, j) { return Array.from(index.subarray(i, j), i => { const itr = tr.cloneNode(true); //itr.classList.toggle("selected", selected.has(i)); for (let j = 0; j < columns.length; ++j) { let column = columns[j]; let value = data[i][column]; if (value === null && !Number.isNaN(value)) continue; value = value; //format[column](value); if (!(value instanceof Node)) value = document.createTextNode(value); itr.childNodes[j + 1].appendChild(value); } return itr; }); } tbody.append(...render(0, n)); element.value = value; return element }35:T786,style = html``36:T651,headerCharts = (data, col) => { let format; let chart; let el; // Construct chart based on column type const type = getType(data, col) switch(type) { // Categorical columns case 'ordinal': //format = d3.format(",.0f") // Calculate category percent and count const categories = d3.rollups( data, v => ({count:v.length, pct:v.length / data.length || 1}), d => d[col] ).sort((a, b) => b[1].count - a[1].count) .map(d => { let obj = {} obj[col] = (d[0] === null || d[0] === "") ? "(missing)" : d[0] obj.count = d[1].count obj.pct = d[1].pct return obj }) //console.log('categories: ', categories) //categories: { FSA: "P0W", count: 1, pct: 0.0018484288354898336 } // Create the chart const stack_chart = SmallStack(categories, col) //let colSlider = Inputs.range([0, 100], {step: 1, label: "Select:"}); // element to return el = htl.html`

${stack_chart}

` break; // Date columns case "date": // Element to return el = htl.html`

${col} ${type} CHART

` break; // Continuous columns default: chart = Histogram(data, col, type) // Element to return el = htl.html`

${chart}

` break; } return el; }37:T53b,// Function that returns a summary table SummaryTable = (dataObj, colDict, {label="Summary"} = {}) => { const data = typeof dataObj.numRows === "function" ? dataObj.objects() : typeof dataObj.toArray === "function" ? dataObj.toArray().map((r) => Object.fromEntries(r)) : dataObj const sample = data[0] || {}; const cols = data.columns || Object.keys(sample); let value = [] // Create the summary card and track data shape // const summaryCard = SummaryCard(data, label) // value.n_rows = summaryCard.value.n_rows // value.n_columns = summaryCard.value.n_columns // value.columns = cols // Compose the element const element = htl.html`

${cols.map(d => { const ele = SummarizeColumn(data, d, colDict) value.push(ele.value) // get the value from the element return ele })}

Column	Snapshot	Missing	Mean	Median	SD

` element.value = value; return element }38:T10a8,// A function to summarize a single column SummarizeColumn = (data, col, colDict) => { let content, value, format, finiteFormat, el, chart, missing_label, pct_missing, min, max, median, mean, sd, colName; const notFiniteFormat = d3.format(",.0f"); // Construct content based on type const type = getType(data, col) // Column name to display if (JSON.stringify(colDict) === "{}") { colName = col } else { colName = colDict[col] } const col1 = htl.html`${col === "" ? "unlabeled" : colName}` switch(type) { // Categorical columns case 'ordinal': format = d3.format(",.0f") // Calculate category percent and count const categories = d3.rollups( data, v => ({count:v.length, pct:v.length / data.length || 1}), d => d[col] ).sort((a, b) => b[1].count - a[1].count) .map(d => { let obj = {} obj[col] = (d[0] === null || d[0] === "") ? "(missing)" : d[0] obj.count = d[1].count obj.pct = d[1].pct return obj }) // Calculate pct. missing pct_missing = data.filter(d => (d[col] === null || d[col] === "")).length / data.length // Create the chart const stack_chart = SmallStack(categories, col) // element to return el = htl.html` ${col1}

${stack_chart}

${pct_format(pct_missing)} - - - `; value = {column: col, type, min:null, max: null, mean: null, median: null, sd: null, missing:pct_missing, n_categories:categories.length} break; // Date columns case "date": // Calculate and format start / end const start = d3.min(data, d => +d[col]) const end = d3.max(data, d => +d[col]) mean = d3.mean(data, d => +d[col]); median = d3.median(data, d => +d[col]); sd = d3.deviation(data, d => +d[col]); // Calculate pct. missing pct_missing = data.filter(d => d[col] === null || d[col] === "").length / data.length chart = Histogram(data, col, type) // Element to return el = htl.html` ${col1}

${chart}

${pct_format(pct_missing)} - - - ` value = {column: col, type, min:start, max: end, mean: null, median: null, sd: null, missing:pct_missing, n_categories:null} break; // Continuous columns default: // Compute values min = d3.min(data, d => +d[col]) max = d3.max(data, d => +d[col]) mean = d3.mean(data, d => +d[col]) median = d3.median(data, d => +d[col]) sd = d3.deviation(data, d => +d[col]) if(Number.isFinite(sd)) { finiteFormat = d3.format(",." + d3.precisionFixed(sd / 10) + "f"); format = x => Number.isFinite(x) ? finiteFormat(x) : notFiniteFormat(x); } else { format = notFiniteFormat; } pct_missing = data.filter(d => d[col] === null || isNaN(d[col])).length / data.length chart = Histogram(data, col, type) // Element to return el = htl.html` ${col1}

${chart}

${pct_format(pct_missing)} ${format(mean)} ${format(median)} ${format(sd)} ` value = {column: col, type, min, max, mean, median, sd, missing:pct_missing, n_categories:null} break; } el.value = value; el.appendChild(html``) console.log('return el HERE: ', el.value) return el }39:T596,SmallStack = (categoryData, col, maxCategories = 100) => { // Get a horizontal stacked bar const label = categoryData.length === 1 ? " category" : " categories"; let chartData = categoryData; let categories = 0; if (chartData.length > maxCategories) { chartData = categoryData.filter((d, i) => i < maxCategories); const total = d3.sum(categoryData, (d) => d.count); const otherCount = total - d3.sum(chartData, (d) => d.count); let other = {}; other[col] = "Other categories..."; other.count = otherCount; other.pct = other.count / total; chartData.push(other); } return addTooltips( Plot.barX(chartData, { x: "count", fill: col, y: 0, title: (d) => d[col] + "\n" + pct_format(d.pct) }).plot({ color: { scheme: "blues" }, marks: [ Plot.text([0, 0], { x: 0, frameAnchor: "bottom", dy: 10, text: (d) => d3.format(",.0f")(categoryData.length) + `${label}` }) ], style: { paddingTop: "0px", paddingBottom: "15px", textAnchor: "start", overflow: "visible" }, x: { axis: null }, color: { domain: chartData.map((d) => d[col]), scheme: "blues", reverse: true }, height: 60, width: 205, y: { axis: null, range: [30, 3] } }), { fill: "darkblue" } ); }3a:T742,Histogram = (data, col, type = "continuous") => { // Compute color + mean const barColor = colorMap.get(type).brighter; const mean = d3.mean(data, (d) => d[col]); // Formatter for the mean const extent = d3.extent(data, (d) => d[col]); const format = type === "date" ? getDateFormat(extent) : Math.floor(extent[0]) === Math.floor(extent[1]) ? d3.format(",.2f") : d3.format(",.0f"); const rules = [{ label: "mean", value: mean }]; return addTooltips( Plot.plot({ height: 55, width: 240, style: { display: "inline-block" }, x: { label: "", ticks: extent, tickFormat: format }, y: { axis: null }, marks: [ Plot.rectY( data, Plot.binX( { y: "count", title: (elems) => { // compute range for the elements const [start, end] = d3.extent(elems, (d) => d[col]); let barFormat; if (type === "date") { barFormat = getDateFormat([start, end]); } else { barFormat = d3.format( Math.floor(start) === Math.floor(end) ? ",.2f" : ",.0f" ); } return `${elems.length} rows\n[${barFormat( start )} to ${barFormat(end)}]`; } }, { x: col, fill: barColor } ) ), Plot.ruleY([0]), Plot.ruleX(rules, { x: "value", strokeWidth: 2, title: (d) => `${d.label} ${col}: ${format(d.value)}` }) ], style: { marginLeft: -17, background: "none", overflow: "visible" } }), { opacity: 1, fill: colorMap.get(type).color } ); }3b:Ta07,iHistView = { // Specify the chart’s dimensions. const margin = {top: 20, right: 20, bottom: 30, left: 40}; const width = 250; const height = 95; const binThreshold = 10; const data = data_ev_sans_id; const col = 'BEV'; // Sources: // https://observablehq.com/@d3/histogram/2?intent=fork // https://observablehq.com/@d3/focus-context // Bin the data. const bins = d3.bin() .thresholds(binThreshold) .value((d) => d[col]) (data); // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([margin.left, width - margin.right]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range([height - margin.bottom, margin.top]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a rect for each bin. const bar = svg.append("g") .attr("fill", "steelblue") .selectAll() .data(bins) .join("rect") .attr("x", (d) => x(d.x0) + 1) .attr("width", (d) => x(d.x1) - x(d.x0) - 1) .attr("y", (d) => y(d.length)) .attr("height", (d) => y(0) - y(d.length)); // Add the x-axis and label. svg.append("g") .style("font", "20px arial") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) .tickFormat(d3.format("~s")) ); // Define brush const brush = d3.brushX() .extent([[margin.left, 0.5], [width - margin.right, height - margin.bottom + 0.5]]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [x.domain()[1], x.range()[1]]; // Append brush const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); // Brush functions function brushed({selection}) { if (selection) { console.log('brush selection.map: ', selection.map(x.invert, x)) svg.property("value", selection.map(x.invert, x)); svg.dispatch("input"); } else { bar.style("stroke", "steelblue"); } } function brushended({selection}) { if (!selection) { gb.call(brush.move, defaultSelection); } } // Return the SVG element. return svg.node(); return svg.node(); }3c:Ta65,iHist = (data, col, { // settings //type = "continuous", margin = ({top: 20, right: 20, bottom: 30, left: 40}), width = 250, height = 95, binThreshold = 10 } = {} ) => { // Sources: // https://observablehq.com/@d3/histogram/2?intent=fork // https://observablehq.com/@d3/focus-context // Bin the data. const bins = d3.bin() .thresholds(binThreshold) .value((d) => d[col]) (data); // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([margin.left, width - margin.right]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range([height - margin.bottom, margin.top]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a rect for each bin. const bar = svg.append("g") .attr("fill", "steelblue") .selectAll() .data(bins) .join("rect") .attr("x", (d) => x(d.x0) + 1) .attr("width", (d) => x(d.x1) - x(d.x0) - 1) .attr("y", (d) => y(d.length)) .attr("height", (d) => y(0) - y(d.length)); // Add the x-axis and label. svg.append("g") .style("font", "20px arial") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) .tickFormat(d3.format("~s")) ); // Define brush const brush = d3.brushX() .extent([[margin.left, 0.5], [width - margin.right, height - margin.bottom + 0.5]]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [x.domain()[1], x.range()[1]]; // Append brush const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); // Brush functions function brushed({selection}) { console.log('selection: ', selection) if (selection) { console.log('brush selection.map: ', selection.map(x.invert, x)) svg.property("value", selection.map(x.invert, x)); svg.dispatch("input"); } else { bar.style("stroke", "steelblue"); } } function brushended({selection}) { if (!selection) { gb.call(brush.move, defaultSelection); } } // Return the SVG element. return svg.node(); }3d:[] 2d:{"title":"iTables","cells":[{"id":1636,"value":"# iTables\nCustom data table combining an interactive version of the [Summary Table](https://observablehq.com/@observablehq/summary-table) with parts of the Observable Input Table.\n\n**PROBLEM** \n**Histograms are selectable but cannot get the brush values out of the histogram function. Generators work but not inside cells...**","pinned":false,"hidden":false,"mode":"md"},{"id":902,"value":"iTable(data_ev_sans_id, {\"rows\":19,\n \"header\": evDict})","pinned":true,"hidden":false,"mode":"ojs"},{"id":897,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1657,"value":"// Stand-alone histogram test\ntestHist = d3HistogramFn(data_ev_clean, 'BEV') ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1662,"value":"// Would be nice if I can call this generator on each chart in the HTML table to get the brush values, but the generator only works when it's in a stand-alone cell as far as I can tell...\nGenerators.input(testHist)","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1823,"value":"# Test with Generator Event Listener\nTest on one column of data using: \n- scatterplot (https://observablehq.com/@d3/brushable-scatterplot)\n- event listeners in Generators (https://observablehq.com/@rienkeisma/introduction-to-generators)","pinned":false,"hidden":false,"mode":"md"},{"id":1451,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1816,"value":"filteredScatterData = Generators.observe(next => {\n // Yield the input’s initial value.\n next(iScatterView.value);\n\n // Define an event listener to yield the input’s next value.\n const inputted = () => next(iScatterView.value);\n\n // Attach the event listener.\n iScatterView.addEventListener(\"input\", inputted);\n\n // When the generator is disposed, detach the event listener.\n return () => iScatterView.removeEventListener(\"input\", inputted);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1706,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"# POC embeddable data table options\nData table options: \n- Observable Data Table Cell: https://observablehq.com/@observablehq/data-table-cell \n- Observable Summary Table: https://observablehq.com/@observablehq/summary-table\n- Observable Input Table: https://observablehq.com/@observablehq/input-table\n- Custom data table combining an interactive version of the Summary Table with parts of the Observable Input Table\n\nTesting data table options on 2 datasets:\n- PSSD 2020\n- Electric Vehichles by Forward Sortation Area ","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"## POC 1: PSSD 2020","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"### Data Table Cell","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"pssd_table = data_pssd_clean","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"### Summary Statistics","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"// Create a view of the summary statistics of only the numeric columns of the dataset\nviewof summary_data_pssd = SummaryTable(\n data_pssd_clean.map(o => Object.fromEntries(\n summary_cols(data_pssd_clean[0]).map(k => [k, o[k]])\n )), \n {},\n {label: \"Summary Statistics\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"SummaryTable(\n data_pssd_clean, \n {},\n {label: \"Summary Statistics\"}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1168,"value":"## Basic Table","pinned":false,"hidden":false,"mode":"md"},{"id":1170,"value":"Inputs.table(data_pssd_sans_id, {\n rows: 18\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"## POC 2: Electric Vehicle Types by Forward Sortation Area - Q1 2022","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"### Data Table Cell","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"ev_table = data_ev_sans_id","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"### Summary Statistics","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"// Create a view of the summary statistics of only the numeric columns of the dataset\nviewof summary_data_ev = SummaryTable(\n data_ev_sans_id,\n evDict,\n {label: \"Summary Statistics\"}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"### Basic Table\nhttps://observablehq.com/@observablehq/input-table","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"Inputs.table(data_ev_clean, {\n columns: [\n \"FSA\",\n \"BEV\",\n \"PHEV\",\n \"TotalEV\"\n ],\n header: {\n FSA: \"Forward Sortation Area\",\n BEV: \"Battery EV\",\n PHEV: \"Plug-in Hybrid EV\",\n TotalEV: \"TotalEV\"\n },\n rows: 18\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof intensity = Inputs.range([0, 100], {step: 1, label: \"Intensity\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"Inputs.range([0, 100], {step: 1, label: \"Intensity\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"headerChartStatic(\n // All columns\n // data_ev_clean,\n // All columns except _id column\n data_ev_sans_id,\n {label: \"Summary Statistics\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"id = DOM.uid(\"table\").id","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"// const theadr = html`\n// ${columns.map((column) => html` resort(event, column)}>${header && column in header ? header[column] : column}`)}`;\n// root.appendChild(html.fragment`","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"# SETTINGS","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"// Column Name dictionary for Summary Table snapshots\nevDict = {\n let obj = {}\n obj['BEV'] = 'Battery EVs';\n obj['PHEV'] = 'Plug-in Hybrid EVs';\n obj['TotalEV'] = 'Total EVs';\n obj['FSA'] = 'Forward Sortation Area';\n\n return obj;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"# DATA","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"## PSSD\nhttps://data.ontario.ca/en/dataset/public-sector-salary-disclosure-2020/resource/23172a73-7b85-49bd-9064-d600d2b21d37","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"url_pssd = \"https://test.data.ontario.ca/api/3/action/datastore_search?resource_id=9b45fdf8-0ae1-4791-822c-36bc30307f92&limit=100000\"; //\"https://test.data.ontario.ca/api/3/action/datastore_search?resource_id=9b45fdf8-0ae1-4791-822c-36bc30307f92&limit=5000\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"api_pssd = d3.json(url_pssd);","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"data_pssd = api_pssd.result.records","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"## EV\nhttps://data.ontario.ca/en/dataset/electric-vehicles-in-ontario-by-forward-sortation-area/resource/aa3af935-3c6f-4921-8606-e9a30d088c7a","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"url_ev = \"https://test.data.ontario.ca/api/3/action/datastore_search?resource_id=ac7131a7-9f0e-4fdb-94a0-8d62f2665093&limit=541\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"api_ev = d3.json(url_ev);","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data_ev = api_ev.result.records","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"## Data Cleaning","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"data_pssd_clean = data_pssd.map(obj => {\n return { ...obj, \n Salary: Number(obj['Salary'].replace(\"$\",'').trim().replace(\",\",'')),\n Benefits: Number(obj['Salary'].replace(\"$\",'').trim().replace(\",\",'')) \n };;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"// Add the correct data types to each column\ndata_ev_clean = data_ev.map(obj => {\n return { ...obj, \n BEV: parseInt(obj['BEV']),\n PHEV: parseInt(obj['PHEV']),\n TotalEV: parseInt(obj['TotalEV'])\n };;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"// Return the data array without the _id element in each object\ndata_ev_sans_id = data_ev_clean.map(o => Object.fromEntries(\n headerCols(data_ev_clean[0]).map(k => [k, o[k]])\n ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1137,"value":"// Return the data array without the _id element in each object\ndata_pssd_sans_id = data_pssd_clean.map(o => Object.fromEntries(\n headerCols(data_pssd_clean[0]).map(k => [k, o[k]])\n ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"// Returns numeric column header names excluding \"_id\"\nsummary_cols = function (o) {\n const headers = Object.keys(o);\n\n let numeric_headers = [];\n headers.forEach(function(el) {\n if ( typeof(o[el]) === \"number\" && el !== \"_id\") {\n numeric_headers.push(el);\n };\n })\n return numeric_headers;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"// Returns numeric column header names excluding \"_id\"\nheaderCols = function (o) {\n const headers = Object.keys(o);\n\n let returnHeaders = [];\n headers.forEach(function(el) {\n if ( el !== \"_id\") {\n returnHeaders.push(el);\n };\n })\n return returnHeaders;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":647,"value":"//d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"//import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"pct_format = d3.format(\".1%\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1123,"value":"## Summary Table\nhttps://observablehq.com/@observablehq/summary-table ","pinned":false,"hidden":false,"mode":"md"},{"id":387,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"colorMap = new Map([[\"ordinal\",\"rgba(78, 121, 167, 1)\"],\n [\"continuous\", \"rgba(242, 142, 44, 1)\"],\n [\"date\", \"rgba(225,87,89, 1)\"]\n].map(d => {\n const col = d3.color(d[1])\n const color_copy = _.clone(col)\n color_copy.opacity = .6\n return [d[0], {color:col.formatRgb(), brighter:color_copy.formatRgb()}]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"getType = (data, column) => {\n for (const d of data) {\n const value = d[column];\n if (value == null) continue;\n if (typeof value === \"number\") return \"continuous\";\n if (value instanceof Date) return \"date\";\n return \"ordinal\"\n }\n // if all are null, return ordinal\n return \"ordinal\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"// Using an offet to calculate the format\ngetDateFormat = (extent) => {\n const formatMillisecond = d3.utcFormat(\".%L\"),\n formatSecond = d3.utcFormat(\":%S\"),\n formatMinute = d3.utcFormat(\"%I:%M\"),\n formatHour = d3.utcFormat(\"%I %p\"),\n formatDay = d3.utcFormat(\"%a %d\"),\n formatWeek = d3.utcFormat(\"%b %d\"),\n formatMonth = d3.utcFormat(\"%B\"),\n formatYear = d3.utcFormat(\"%Y\");\n\n // Test on the difference between the extent, offset by 1\n \n return extent[1] > d3.utcYear.offset(extent[0], 1)? formatYear :\n extent[1] > d3.utcMonth.offset(extent[0], 1)? formatMonth :\n extent[1] > d3.utcWeek.offset(extent[0], 1) ? formatWeek :\n extent[1] > d3.utcDay.offset(extent[0], 1) ? formatDay :\n extent[1] > d3.utcHour.offset(extent[0], 1) ? formatHour :\n extent[1] > d3.utcMinute.offset(extent[0], 1) ? formatMinute :\n extent[1] > d3.utcSecond.offset(extent[0], 1) ? formatSecond :\n extent[1] > d3.utcMillisecond.offset(extent[0], 1) ? formatMillisecond :\n formatDay\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"## Sliders\n- https://observablehq.com/@bumbeishvili/data-driven-range-sliders \n- https://observablehq.com/@sarah37/snapping-range-slider-with-d3-brush\n- https://observablehq.com/@trebor/snapping-histogram-slider ","pinned":false,"hidden":false,"mode":"md"},{"id":650,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"import {histogramSlider} from \"@trebor/snapping-histogram-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"viewof v = rangeSlider(data_ev_clean, d=>d.BEV)","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"## d3js Histogram with Brush\n- histogram: https://observablehq.com/@d3/histogram/2?intent=fork\n- area chart with brush: https://observablehq.com/@d3/focus-context ","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"myhist = d3HistogramFn(data_ev_clean, 'BEV') //brushRange = Generators.input(myhist)","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"brushRange = Generators.input(myhist)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1352,"value":"data_ev_sans_id.filter(res=>(res.BEV > 200 && res.BEV < 400))","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"## iTable","pinned":false,"hidden":false,"mode":"md"},{"id":1133,"value":"iTable(data_pssd_sans_id, {\"rows\":19, \"layout\":\"fixed\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":925,"value":"### iTable helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"function iterable(array) {\n return array ? typeof array[Symbol.iterator] === \"function\" : false;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":927,"value":"function maybeColumns(data) {\n if (iterable(data.columns)) return data.columns; // d3-dsv, FileAttachment\n if (data.schema && iterable(data.schema.fields)) return Array.from(data.schema.fields, f => f.name); // apache-arrow\n if (typeof data.columnNames === \"function\") return data.columnNames(); // arquero\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"function columnsof(data) {\n const columns = new Set();\n for (const row of data) {\n for (const name in row) {\n columns.add(name);\n }\n }\n return Array.from(columns);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"function arrayify(array) {\n return Array.isArray(array) ? array : Array.from(array);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"function formatof(base = {}, data, columns, locale) {\n const format = Object.create(null);\n for (const column of columns) {\n if (column in base) {\n format[column] = base[column];\n continue;\n }\n switch (type(data, column)) {\n case \"number\" && column.toLowerCase().indexOf('year') >= 0: format[column] = myFormatYear; break;\n //case \"number\" && column.toLowerCase().indexOf('year') < 0: format[column] = formatLocaleNumber(locale); break;\n case \"date\": format[column] = formatDate; break;\n default: format[column] = formatLocaleAuto(locale); break;\n }\n }\n return format;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1221,"value":"function myFormatof(base = {}, data, columns, locale, isYear) {\n const format = Object.create(null);\n for (const column of columns) {\n let thisType = inferColumnType(data, column); \n if (column in base) {\n format[column] = base[column];\n continue;\n }\n switch (thisType) {\n case \"year\" : format[column] = myFormatYear; break;\n case \"number\": format[column] = formatLocaleNumber(locale); break;\n case \"date\": format[column] = formatDate; break;\n default: format[column] = formatLocaleAuto(locale); break;\n }\n }\n return format;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"function localize(f) {\n let key = localize, value;\n return (locale = \"en\") => locale === key ? value : (value = f(key = locale));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"function type(data, column) {\n for (const d of data) {\n if (d == null) continue;\n const value = d[column];\n if (value == null) continue;\n if (typeof value === \"number\") return \"number\";\n if (value instanceof Date) return \"date\";\n return;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1243,"value":"function inferColumnType(data, column) {\n for (const d of data) {\n if (d == null) continue;\n const value = d[column];\n if (value == null) continue;\n if (typeof value === \"number\" && column.toLowerCase().indexOf('year') >= 0) {\n return \"year\";\n }\n if (typeof value === \"number\") {\n return \"number\";\n }\n if (value instanceof Date) return \"date\";\n return;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"formatLocaleAuto = localize(locale => {\n const formatNumber = formatLocaleNumber(locale);\n return value => value == null ? \"\"\n : typeof value === \"number\" ? formatNumber(value)\n : value instanceof Date ? formatDate(value)\n : `${value}`;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1146,"value":"formatLocaleNumber = localize(locale => {\n return value => value === 0 ? \"0\" : value.toLocaleString(locale); // handle negative zero\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1148,"value":"// https://observablehq.com/@mbostock/a-note-on-date-inputs\nfunction formatDate(date) {\n return [\n (date.getFullYear()).toString().padStart(4, \"0\"),\n (date.getMonth() + 1).toString().padStart(2, \"0\"),\n (date.getDate()).toString().padStart(2, \"0\")\n ].join(\"-\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1180,"value":"function myFormatYear(year) {\n return year;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1481,"value":"## One Column Test\nTest on one column of data using: \n- scatterplot (https://observablehq.com/@d3/brushable-scatterplot)\n- event listeners in Generators (https://observablehq.com/@rienkeisma/introduction-to-generators)","pinned":false,"hidden":false,"mode":"md"},{"id":1730,"value":"filteredData = Generators.observe(next => {\n // Yield the input’s initial value.\n next(iHistView.value);\n\n // Define an event listener to yield the input’s next value.\n const inputted = () => next(iHistView.value);\n\n // Attach the event listener.\n iHistView.addEventListener(\"input\", inputted);\n\n // When the generator is disposed, detach the event listener.\n return () => iHistView.removeEventListener(\"input\", inputted);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1802,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1484,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}