2/28/2023 0 Comments Color as elementI discovered that the rationale for choosing Web Components as a technology for developing UI is due to it utilizing native Browser APIs such as Custom Elements, Shadow DOM, Slots, and Templates. One of the projects I contributed to while working there utilized Custom Elements for its UI, so I had the opportunity to learn the Web Component spec and create some fun and experimental stuff with it. The motivation for choosing Web Components as a (non?) “framework” for building the CLE was influenced by my experience working as a UX Engineer at Google. It’s worth mentioning that there is plenty of * criticism of Web Components (but also some rebuttals). things like component libraries such as Material UI or Carbon Components, as well as starter kits like Create React App and Svelte Kit). When building web applications using JavaScript, I typically reach for JS frameworks like React or Svelte, not Web Components, partly because of the ecosystem that exists around those frameworks (e.g. I see both their inherit value and drawbacks, so am neither really for or against them. Design Decisions Why Web Components?įirst off let me preface the following text by confessing that I am not a Web Components “expert”, but that I’ve learned a thing or two about them. This means you don’t necessarily need to be rendering your chart or visualization using D3JS, or even with client side JavaScript for that matter. Rather than using JavaScript functions, classes, or method chaining, the CLE will most likely be generated declaratively using HTML. My intention with CLE is to limit its functionality to using color as the primary form of visual encoding and to decouple it a bit more from D3 (even though it still requires a handful of D3 modules as dependencies). The D3 SVG Legend implementation also covers more use cases than CLE currently does, such as graduated circles. One of which is Susie Lu’s D3 SVG Legend library, which follows D3’s style of method chaining and reusing scales. I do want to mention that CLE shouldn’t discount previous legend components or libraries out there. However, I was more interested in the idea of packaging CLE as a Web Component so that it could be used declaratively in HTML or JSX like syntax. This wouldn’t be too difficult as it’s simply a function that relies on D3JS as a dependency. One option would be to port the Observable Color Legend to vanilla JavaScript. The only issue was using it outside of Observable. It was an epiphany when I began using Mike’s Color Legend I realized how great it was to not have to write a legend from scratch as it meant more time to focus on the visualization I was working on. It renders an SVG legend based on the type of scale as well as its domain and range. Its implementation assumes you’re already using D3JS, and accepts a d3-scale as input, plus additional configuration options as needed. The Color Legend (which CLE is directly influenced by) was written by Mike Bostock, one of the founders of Observable and primary authors of D3JS. When using Observable Notebooks for exploring and prototyping data visualizations, one has access to such a reusable legend component. By the time I’m done, I lament “why haven’t I made this reusable yet?”. Yet each time I find myself creating a legend I notice the repetition and it starts to feel like a bit of a time sink. Often it’s a simple enough of an exercise to write a legend that’s paired with a specific visualization that it doesn’t feel worth the time to abstract it into a reusable component. Try opening your browser’s developer tools and poking around at it! BackgroundĬreating legends for data visualizations is one of those pesky yet necessary tasks that I tend to find to be mundane and repetitive. The above CLE example is rendered in the DOM of this webpage (as are others that follow). The most important attributes are scaletype, domain, and range which determine how the CLE renders. You can read more about its usage in the links mentioned above, but the gist of it is: It’s API (attributes and properties) makes it fairly straight forward to use (IMHO) and it is well documented in the CLE website, Observable Notebook, and Github repository.Īn important part of creating the CLE for me was making it simple to use. I’m fairly satisified with its current functionality which covers common use cases when visualizing continuous, discrete, or categorical data. I recently open sourced and launched version 1.0 of Color Legend Element, a Custom Element that’s intended to be used as a legend with data visualizations. Notes on building a legend UI component using Lit, D3JS, and TypeScript
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |