28:null 29:["$","title",null,{"children":"D3 scale chooser | Gordon Tu | Observable"}] 2e:T6e3,function scaleFunctionRecommender(domainArray, rangeArray, caveat = {}) { // Check if domainArray or rangeArray is empty if (!domainArray.length || !rangeArray.length) { return "Invalid domain or range array."; } // Check the type of the first element in domainArray to infer the input type const domainType = typeof domainArray[0]; // Check if the range array contains colors, which could infer a color scale const isColorScale = rangeArray.every( (value) => typeof value === "string" && value.startsWith("#") ); // Check the length difference between domain and range arrays const lengthDiff = rangeArray.length - domainArray.length; // Use conditions based on caveat arguments and characteristics of domain and range to recommend scales if (caveat.diverging) { return "d3.scaleDiverging"; } else if (caveat.radius) { return "d3.scaleRadial"; } else if (caveat.time) { return caveat.utc ? "d3.scaleUtc" : "d3.scaleTime"; } else if (caveat.logNoZero) { return "d3.scaleLog"; } else if (caveat.logIncludeZero) { return "d3.scaleSymlog"; } else if (caveat.exponential) { return "d3.scalePow"; } else if (caveat.quantile) { return "d3.scaleQuantile"; } else if (caveat.quantize) { return "d3.scaleQuantize"; } else if (caveat.point) { return "d3.scalePoint"; } else if (lengthDiff === 0 || domainType === "string") { return "d3.scaleOrdinal"; } else if (domainType === "number") { if (lengthDiff === 1) { return "d3.scaleThreshold"; } else if (isColorScale && rangeArray.length === 2) { return "d3.scaleSequential"; } else { return "d3.scaleLinear"; } } // Default to linear scale if no specific match return "d3.scaleLinear"; }2f:T1657,import { OmniElement, OmniStyleElement, html, css, svg } from 'omni-ui'; import { OmniAppContainerMixin } from 'omni-app-container'; // Data Management import { connect } from 'pwa-helpers'; import * as dataConfig from '../../../dataVis.json'; import { store } from '../../../state-management/store'; import { addAudience, removeAudience } from '../../../state-management/actions'; import { FetchDataController } from './utility/fetchAudienceNameController'; // UI Components import { LoadingDots } from '../../loading-dots'; import omniLogo from '../../../assets/svg-icons/omni-logo'; // Custom Utility export class ClickstreamVizHeader extends connect(store)(OmniAppContainerMixin(OmniElement)) { // clickawayModal = new ClickawayControllerModal(this, false); // clickawayDropdown = new ClickawayControllerDropdown(this, false); initialLegendColors = [ { key: 'Over-Index', value: dataConfig.config.colorOverIndex }, { key: 'Under-Index', value: dataConfig.config.colorUnderIndex }, { key: 'Neutral', value: dataConfig.config.colorNeutralIndex1 } ]; compareLegendColors = dataConfig.config.seriesColors; activeAudiencesInPath = ''; static properties = { audiences: { type: Array }, outerPadding: { type: Number }, audienceList: { type: Array }, activePage: { type: String }, activeAudiences: { type: Array }, selectedAudienceHistory: { type: Array }, audienceNamesForLegend: { type: Array }, activeAudiencesInPath: { type: Object }, selectedAudienceName: { type: String } }; constructor() { super(); this.audiences = []; this.outerPadding = 50; this.audienceList = []; this.fetchDataController = new FetchDataController(this, () => this.activeAudiencesInPath); } handleSelectAudience(e, result) { // console.log(e); const selectedAudience = e.detail.selectedAudienceInfo[0]; const selectedAudienceId = selectedAudience.project_guid; // 1. Check if the audience is one of the active ones this.inActiveAudienceOrNot = this.activeAudiences.includes(selectedAudienceId); // 2. if so, Remove the selected audience from the active audience if (this.inActiveAudienceOrNot) { // Deselecting audience from this.activeAudiences array // this.activeAudiences = this.activeAudiences.filter(id => id !== selectedAudienceId); // this.fetchDataController.selectedAudienceInfo = this.inActiveAudienceOrNot; // store.dispatch(removeAudience(selectedAudienceId)); } else { // Check if adding another audience exceeds the limit if (this.activeAudiences.length >= 3) { alert('Oops! The maximum number of audiences to compare is 3.'); return; } // 3. if this is a new audience that we never selected, add the audience array to the STORE store.dispatch(addAudience(selectedAudienceId)); } // Update navigation based on the current list of active audiences this.updateNavigation(); // the line below is essential // without it, no reactive cycle is triggered // consequently, hostUpdated wouldn't run this.selectedAudienceName = selectedAudience.project_name; // documents all the audiences that have been selected // pass updated value to reactive controller, so that rc can start a new round of fetching, which is fetching actual data this.fetchDataController.selectedAudienceInfo = selectedAudience; } // navigate to different page depending on how many audiences you've selected. Up to 3 updateNavigation() { switch (this.activeAudiences.length) { case 0: this.navigateTo(`clickstream-viz`); break; case 1: this.navigateTo(`clickstream-viz/${this.activeAudiences[0]}`); break; case 2: this.navigateTo(`clickstream-viz/compare/${this.activeAudiences[0]}/${this.activeAudiences[1]}`); break; case 3: this.navigateTo( `clickstream-viz/compare/${this.activeAudiences[0]}/${this.activeAudiences[1]}/${this.activeAudiences[2]}` ); break; } } render() { return html`

${this.fetchDataController.renderAudienceList({ complete: result => html` this.handleSelectAudience(e, result)} .audienceList=${result}> `, initial: () => html`

Select Audience

`, pending: () => html``, error: e => html`

${e}

` })}

`; } stateChanged(state) { this.activeAudiences = state.data.activeAudiences; //.map(d => d.guid); this.selectedAudienceHistory = state.data.audiences; // just pull data from this variable below this.audienceList = state.data.audiencesList; } } customElements.define('clickstream-header', ClickstreamVizHeader); 30:[] 2c:{"id":"1b7907bcecf2e4ba","slug":null,"title":"D3 scale chooser","thumbnail":"8e74ab2841e79186c977aea88736f8a82ef8a9db03e66b8af32c115b66ed5c1e","access_level":"public","create_time":"$D2023-09-28T18:11:02.818Z","update_time":"$D2023-12-11T01:55:42.710Z","view_time":null,"first_public_time":"$D2023-09-28T18:11:02.818Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024"},"version":200,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null}],"members":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 scale chooser","cells":[{"id":0,"value":"# D3 scale chooser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"scaleFunctionRecommender([100, 200], [0, 480], { radius: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"scaleFunctionRecommender([-1, 0, 1], [\"green\", \"white\", \"orange\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"scaleFunctionRecommender([-1, 0, 1], [\"green\", \"white\", \"orange\"], {\n point: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"scaleFunctionRecommender([-1, 0, 1], [\"green\", \"white\", \"orange\"], {\n diverging: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"scaleFunctionRecommender([0,10000], [\"red\", \"blue\"], {\n logNoZero:true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"ha = ({\n category: [1, 2, 3, 4],\n hah: [1, 2, \"no\", 4],\n heihi: [123, 312, \"haha\"],\n categoryLength: 4,\n hahLength: 4,\n heihiLength: 3\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"key = \"category\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"Object.fromEntries(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"haa = [\n {\n category: [1, 2, 3, 4]\n },\n { hah: [1, 2, \"no\", 4] },\n { heihi: [123, 312, \"haha\"] },\n { categoryLength: 4 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"{\n let a = key + \"Length\";\n return ha[key + \"Length\"];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"function isColorString(str) {\n // Check for hexadecimal notation\n const hex = /^#([A-Fa-f0-9]{3,4}){1,2}$/;\n\n // Check for RGB and RGBA\n const rgb = /^rgb\$(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\$$/i;\n const rgba = /^rgba\$(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d*(?:\\.\\d+)?)\$$/i;\n\n // Check for HSL and HSLA\n const hsl = /^hsl\$(\\d{1,3}),\\s*([\\d.]+)%,\\s*([\\d.]+)%\$$/i;\n const hsla = /^hsla\$(\\d{1,3}),\\s*([\\d.]+)%,\\s*([\\d.]+)%,\\s*(\\d*(?:\\.\\d+)?)\$$/i;\n\n // List of named colors - this is a limited set, there are more than 140 named colors\n const namedColors = [\n \"red\", \"green\", \"blue\", \"cyan\", \"magenta\", \"yellow\", \"black\", \"white\", \"gray\", \"grey\", \n \"purple\", \"lime\", \"teal\", \"aqua\", \"maroon\", \"navy\", \"silver\", \"olive\", \"fuchsia\", \"orange\"\n // ... add more named colors if needed\n ];\n\n return hex.test(str) || rgb.test(str) || rgba.test(str) || hsl.test(str) || hsla.test(str) || namedColors.includes(str.toLowerCase());\n}\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"import(\"https://cdn.skypack.dev/seedrandom@3.0.5?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2d:"$2c:body"