PageSourceSearch

https://peterbeshai.com/experiments/3d-faceted-search/

html peterbeshai.com collected 2026-09-25 21:04:12 UTC 27,968 bytes, 43 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.a6cf05b5abeb1d21fb12.css">/* ! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */
2
3/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:IBM Plex Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,ui-monospace,SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}html{font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));font-family:IBM Plex Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;--tw-text-opacity:1;color:rgba(17,24,39,var(--tw-text-opacity));font-kerning:normal;font-feature-settings:"kern","liga","clig","calt";font-variant-ligatures:none;font-variant:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.prose{color:#374151;max-width:65ch}.prose [class~=lead]{color:#4b5563;font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose a{color:#111827;text-decoration:underline;font-weight:500}.prose strong{color:#111827;font-weight:600}.prose ol[type=A]{--list-counter-style:upper-alpha}.prose ol[type=a]{--list-counter-style:lower-alpha}.prose ol[type=I]{--list-counter-style:upper-roman}.prose ol[type=i]{--list-counter-style:lower-roman}.prose ol[type="1"]{--list-counter-style:decimal}.prose ol>li{position:relative;padding-left:1.75em}.prose ol>li:before{content:counter(list-item,var(--list-counter-style,decimal)) ".";position:absolute;font-weight:400;color:#6b7280;left:0}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li:before{content:"";position:absolute;background-color:#d1d5db;border-radius:50%;width:.375em;height:.375em;top:.6875em;left:.25em}.prose hr{border-color:#e5e7eb;border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose blockquote{font-weight:500;font-style:italic;color:#111827;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:first-of-type:before{content:open-quote}.prose blockquote p:last-of-type:after{content:close-quote}.prose h1{color:#111827;font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h2{color:#111827;font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose h3{font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h3,.prose h4{color:#111827;font-weight:600}.prose h4{margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose figure figcaption{color:#6b7280;font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{color:#111827;font-weight:600;font-size:.875em}.prose code:after,.prose code:before{content:"`"}.prose a code{color:#111827}.prose pre{color:#e5e7eb;background-color:#1f2937;overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose pre code{background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:400;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code:after,.prose pre code:before{content:none}.prose table{width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose thead{color:#111827;font-weight:600;border-bottom-width:1px;border-bottom-color:#d1d5db}.prose thead th{vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose tbody tr{border-bottom-width:1px;border-bottom-color:#e5e7eb}.prose tbody tr:last-child{border-bottom-width:0}.prose tbody td{vertical-align:top;padding:.5714286em}.prose{font-size:1rem;line-height:1.75}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose figure,.prose img,.prose video{margin-top:2em;margin-bottom:2em}.prose figure>*{margin-top:0;margin-bottom:0}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ol,.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*{margin-top:0}.prose thead th:first-child{padding-left:0}.prose thead th:last-child{padding-right:0}.prose tbody td:first-child{padding-left:0}.prose tbody td:last-child{padding-right:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.bg-black{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}
3.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.leading-loose{line-height:2}.m-1{margin:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mt-8{margin-top:2rem}.mb-12{margin-bottom:3rem}.max-w-md{max-width:28rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.pt-8{padding-top:2rem}.pb-12{padding-bottom:3rem}.fixed{position:fixed}.absolute{position:absolute}.resize{resize:both}*{--tw-shadow:0 0 transparent;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}.text-pink-400{--tw-text-opacity:1;color:rgba(244,114,182,var(--tw-text-opacity))}.text-cyan-500{--tw-text-opacity:1;color:rgba(6,182,212,var(--tw-text-opacity))}.uppercase{text-transform:uppercase}.visible{visibility:visible}.w-1{width:.25rem}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.filter{--tw-blur:var(--tw-empty,/*!*/ /*!*/);--tw-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-invert:var(--tw-empty,/*!*/ /*!*/);--tw-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-sepia:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.funky-underline{display:inline-block;position:relative}.funky-underline:before{--underline-color:#22d3ee;position:absolute;bottom:-1px;left:-2px;right:-4px;content:"";height:4px;border-radius:99999px;background:var(--underline-color);transform:rotate(-2deg)}:root{--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--cyan-400:#22d3ee;--cyan-500:#06b6d4}.prose a{text-decoration:none}code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:.92em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:16px 0 32px;overflow:auto;border:1px solid var(--gray-200);background:var(--gray-50);border-radius:4px}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal;background:none}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}</style><meta name="generator" content="Gatsby 2.24.84"/><title data-react-helmet="true">3D Faceted Search - Peter Beshai</title><link data-react-helmet="true" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,600,700" rel="stylesheet"/><meta data-react-helmet="true" name="description" content="A proof of concept of a 3D faceted search UI for the browser"/><meta data-react-helmet="true" name="twitter:description" content="A proof of concept of a 3D faceted search UI for the browser"/><meta data-react-helmet="true" property="og:description" content="A proof of concept of a 3D faceted search UI for the browser"/><meta data-react-helmet="true" name="keywords" content="dataviz, data visualization, creative coding, generative art, nba, basketball"/><meta data-react-helmet="true" name="twitter:site" content="@pbesh"/><meta data-react-helmet="true" name="twitter:creator" content="@pbesh"/><meta data-react-helmet="true" property="og:title" content="3D Faceted Search"/><meta data-react-helmet="true" property="twitter:title" content="3D Faceted Search"/><meta data-react-helmet="true" property="og:url" content="https://peterbeshai.com/experiments/3d-faceted-search/"/><meta data-react-helmet="true" property="og:image" content="https://peterbeshai.com/static/075d35f0104b70b2d99917a53c21ddb3/35c24/banner.png"/><meta data-react-helmet="true" name="twitter:image" content="https://peterbeshai.com/static/075d35f0104b70b2d99917a53c21ddb3/35c24/banner.png"/><meta data-react-helmet="true" property="og:type" content="article"/><link rel="icon" href="/favicon-32x32.png?v=8eada2f2c54a980a0d0d715a284fca9b" type="image/png"/>
3<link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=8eada2f2c54a980a0d0d715a284fca9b"/><style data-styled="dgrgPo bRzELH jlbBry krNbLw bxmoFz bNJDNF hRIHo hJIQXL eiraze iZTvUI gQsBqH" data-styled-version="4.4.1">
4/* sc-component-id: core__Box-eqpeba-0 */
5.jlbBry{margin-left:auto;margin-right:auto;padding:16px;max-width:800px;}.krNbLw{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;padding-top:64px;padding-bottom:64px;}
6/* sc-component-id: core__Flex-eqpeba-1 */
7.dgrgPo{margin-top:16px;margin-bottom:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
8/* sc-component-id: core__Text-eqpeba-2 */
9.gQsBqH{text-align:center;}
10/* sc-component-id: core__Header-eqpeba-3 */
11.bxmoFz{margin:0px;font-size:27px;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#1f2937;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:bold;line-height:1.15;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;}
12/* sc-component-id: core__StyledLink-eqpeba-5 */
13.eiraze{color:#374151;border-bottom:2px solid #e5e7eb;-webkit-text-decoration:none;text-decoration:none;background:transparent;-webkit-transition:0.2s background linear,0.2s border-color linear;transition:0.2s background linear,0.2s border-color linear;} .eiraze:hover{color:#1f2937;background:#e3fafc;border-color:#99e9f2;}
14/* sc-component-id: core__Image-eqpeba-7 */
15.iZTvUI{margin:0px;margin-left:auto;margin-right:auto;display:block;max-width:100%;height:auto;}
16/* sc-component-id: core__InlineList-eqpeba-11 */
17.bNJDNF{color:#4b5563;list-style-type:none;list-style-type:none;padding-left:0;}.hRIHo{list-style-type:none;padding-left:0;}
18/* sc-component-id: core__InlineListItem-eqpeba-12 */
19.hJIQXL{margin-right:16px;display:inline-block;} .hJIQXL:last-child{margin-right:0;} .hJIQXL::before{content:'•';color:#d1d5db;margin-right:16px;} .hJIQXL:first-child::before{content:'';margin-right:0;}
20/* sc-component-id: layout___StyledText-sc-1yov7wq-0 */
21.bRzELH{padding-left:8px;padding-right:8px;font-size:16px;color:#ffffff;background-color:#000000;font-weight:700;border-radius:5px;box-shadow:3px 4px #3bc9db;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:box-shadow 200ms;transition:box-shadow 200ms;} .bRzELH:hover{box-shadow:5px 6px #3bc9db;} .bRzELH:active{box-shadow:2px 3px #3bc9db;}</style><link rel="preconnect" href="https://www.google-analytics.com"/><link rel="dns-prefetch" href="https://www.google-analytics.com"/><link as="script" rel="preload" href="/webpack-runtime-06a9210293dd0d2a2358.js"/><link as="script" rel="preload" href="/framework-d80f7338bc29523a5c3b.js"/><link as="script" rel="preload" href="/app-fcd7ff88a19f1bf11c6c.js"/><link as="script" rel="preload" href="/styles-e9d24b1846c7d6eb9685.js"/><link as="script" rel="preload" href="/commons-16a344fd9551feb818bd.js"/><link as="script" rel="preload" href="/21b0c71395f743ee87503268ff5f3f467b604f32-88a5d176af816359574b.js"/><link as="script" rel="preload" href="/component---src-templates-demo-js-86292a96b849eb84e1cf.js"/>
21<link as="fetch" rel="preload" href="/page-data/experiments/3d-faceted-search/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="core__Box-eqpeba-0 core__Flex-eqpeba-1 dgrgPo"><a bg="black" color="white" px="2" font-size="1" font-weight="700" class="core__Box-eqpeba-0 core__Text-eqpeba-2 layout___StyledText-sc-1yov7wq-0 bRzELH" href="/">Peter Beshai</a></div><div></div><div class="core__Box-eqpeba-0 jlbBry"><h2 font-size="4" font-weight="bold" font-family="header" color="gray.8" letter-spacing="-0.01em" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__Header-eqpeba-3 bxmoFz">3D Faceted Search</h2><ul color="gray.6" class="core__Box-eqpeba-0 core__List-eqpeba-10 core__InlineList-eqpeba-11 bNJDNF"><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="https://twitter.com/pbesh/status/1208451307687817217" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze">Related Tweet</a></li></ul><div><p>Made during a hack week at work. This is a proof of concept of a 3D faceted search UI allowing filtering and partitioning over 50,000 data points at 60 FPS in the browser. Uses react, threejs and react-three-fiber.</p>
22<div class="gatsby-resp-iframe-wrapper" style="padding-bottom:56.25%;position:relative;height:0;overflow:hidden"> <iframe src="https://www.youtube.com/embed/o_v5SR_qS30" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe> </div>
23<p><span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:700px">
24      <span class="gatsby-resp-image-background-image" style="padding-bottom:58.285714285714285%;position:relative;bottom:0;left:0;background-image:url(&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACnklEQVQozyVTu47TQBQ1CAHK5uk4iR3nYXs8fiWO4yRO1ijAIu0usAUS0koUiJ+gpOEb6PgDKipKKugQJRVfwScczkyKqzuPO/eee88Zoz/y0bcDmEMP40mEub/EZJbAcUOMHB/DkUcf0PsYcK3MGs5g9l10TRud7hCtdh9nzS69CcMczNDhZaNlYTyNIWSJMN4iSirE6QFJVtOfc3+yOK1Pa322h4wr2g4y2el3hmUTIas2WgOikgjCFURU6qC5t8BYn63h+StaDhGWLLqlbRBGLMy4MNpwv6YviXA4R7s31glVa2m2Z9BGX3pBxoQCfrDEbEb0YaHvYqKJ4j2y7EIjFgThCxaTBYyBM0fHdNDs2Gi2TDhjJk33iPlwsXgMxxFI0iOq3Tsk8hIyuICMasbUyPOXjHmGhAXSlCNK2PLAdmFaTNh1OPjZCQkrSc4jz19ABBVCecT1k4/4/vUXfv/4g9fP3yMMj1ivXqFY3ZxmyI5U+0bXUqRMNClekPPxGoEoENBnqnp8gUV6qRN++fwXP7/9w3lxizt37yGNL7HMrxhbsou9RklSPCim1QyVRBIeJmRQWZo+YktHbMprLLMb1NsPuDp+wlnDxoP7DVh9nwAOmExTTOdLzv8AQzHc7jka4XSeYrE819XiRM1xR88CXIeiwn77BvXhLbblLSquZVhDShV3gBAbjugpDMVws2vjrD2koFPNoprfnO37bNuXqn2yqOVUcJ9j6i8woaQ8sYLND2BR9HFygMuPYahEyhTLDx620OuN+LiE5UhY4xiDsYQzjTCaSNj0FqU1sCdk36U6XLTYneJAhBuMOD6j2RlB2UnYIbXF2fF3uLMFUSpU/Ams7os1PVun/lZFhaqkoGVF9Ftqdq8lli1r/Ad6el4lXFpQmQAAAABJRU5ErkJggg==&#x27;);background-size:cover;display:block"></span>
25  <img display="block" class="core__Box-eqpeba-0 core__Image-eqpeba-7 iZTvUI gatsby-resp-image-image" alt="Screenshot" title="Screenshot" src="/static/075d35f0104b70b2d99917a53c21ddb3/f6cdf/banner.png" srcSet="/static/075d35f0104b70b2d99917a53c21ddb3/fe88d/banner.png 175w, /static/075d35f0104b70b2d99917a53c21ddb3/0c175/banner.png 350w, /static/075d35f0104b70b2d99917a53c21ddb3/f6cdf/banner.png 700w, /static/075d35f0104b70b2d99917a53c21ddb3/4cbff/banner.png 1050w, /static/075d35f0104b70b2d99917a53c21ddb3/6e6b4/banner.png 1400w, /static/075d35f0104b70b2d99917a53c21ddb3/1ba1c/banner.png 1535w" sizes="(max-width: 700px) 100v
25w, 700px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy"/>
26    </span></p></div></div><div class="core__Box-eqpeba-0 krNbLw"><div class="core__Box-eqpeba-0 core__Text-eqpeba-2 gQsBqH"><ul class="core__Box-eqpeba-0 core__List-eqpeba-10 core__InlineList-eqpeba-11 hRIHo"><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="/cdn-cgi/l/email-protection#cabaafbeafb8e4a8afb9a2aba38aada7aba3a6e4a9a5a7" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze"><span class="__cf_email__" data-cfemail="4232273627306c2027312a232b02252f232b2e6c212d2f">[email&#160;protected]</span></a></li><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="https://twitter.com/pbesh" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze">Twitter</a></li><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="https://twitch.tv/pbeshai" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze">Twitch</a></li><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="https://github.com/pbeshai" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze">GitHub</a></li><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="https://instagram.com/pbeshasketch" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze">Instagram</a></li><li class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__InlineListItem-eqpeba-12 hJIQXL"><a href="https://www.linkedin.com/in/pbeshai" class="core__Box-eqpeba-0 core__Text-eqpeba-2 core__StyledLink-eqpeba-5 eiraze">LinkedIn</a></li></ul></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
vendor: 108 bytes, line 26
26<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
26<script>
27  
28  
29  if(true) {
30    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
31    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
32    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
33    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
34  }
35  if (typeof ga === "function") {
36    ga('create', 'UA-55938435-1', 'auto', {});
37      
38      
39      
40      
41      
42      }</script>
42<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/experiments/3d-faceted-search/";/*]]>*/</script>
42<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-b540199392df4ae4b2b3.js"],"app":["/app-fcd7ff88a19f1bf11c6c.js"],"component---src-pages-404-js":["/component---src-pages-404-js-c2832438e0b6a94d149f.js"],"component---src-pages-index-js":["/component---src-pages-index-js-9fd4d7b2f08ac5830f3c.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-0d55bb857b27ef483d4e.js"],"component---src-templates-demo-js":["/component---src-templates-demo-js-86292a96b849eb84e1cf.js"]};/*]]>*/</script>
42<script src="/polyfill-b540199392df4ae4b2b3.js" nomodule=""></script>
42<script src="/component---src-templates-demo-js-86292a96b849eb84e1cf.js" async=""></script>
42<script src="/21b0c71395f743ee87503268ff5f3f467b604f32-88a5d176af816359574b.js" async=""></script>
42<script src="/commons-16a344fd9551feb818bd.js" async=""></script>
42<script src="/styles-e9d24b1846c7d6eb9685.js" async=""></script>
42<script src="/app-fcd7ff88a19f1bf11c6c.js" async=""></script>
42<script src="/framework-d80f7338bc29523a5c3b.js" async=""></script>
42<script src="/webpack-runtime-06a9210293dd0d2a2358.js" async=""></script>
42<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"955d7c87d49a4378a21db6c033f2920c","r":1,"spa":2}' crossorigin="anonymous"></script>
42
43</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.