Parts of the example source to understand Mosaic implementation.

[Mai74D]

I am a student currently interning at a company where Mosaic has not been used before. We are now looking to apply Mosaic in our project.

I find Mosaic very interesting, but I don’t have much background knowledge in related tools like DuckDB or Mega-lite. At the moment, I only understand a little about Mosaic, and I truly want to learn more so I can apply it effectively to my current work. However, I feel quite confused by the source code and the materials from the Mosaic homepage and PDF documentation.

That’s why I would like to ask for some guidance on what steps I should take to better understand how to implement Mosaic. I would be extremely grateful for any advice or help you could share with me.

So far, I’ve been looking into the following resources:

Mosaic homepage: https://idl.uw.edu/mosaic/

Mosaic examples on GitHub: https://github.com/uwdata/mosaic

Mosaic pdf doc: https://idl.cs.washington.edu/files/2024-Mosaic-TVCG.pdf

[domoritz]

The PDF you linked to is the academic research paper which is going to give you background on the project but might also be quite dense and harder to understand.

The website is definitely a good starting point especially https://idl.uw.edu/mosaic/get-started/.

Try building a few dashboards starting with less complex ones. I highly recommend learning by making your own examples. If you have questions, look at existing issues and discussions or start your own.

[Mai74D]

Thank you for your suggestion.

Now I am creating a yaml file to show 3 chart. There are some issues and I try to fix them and also comment at discussion #741.

Actually, I don't fully understand how we go from an example to transforming a YAML or JS file into a chart.
From reading the source code for the examples, it seems like we're only calling YAML files to describe the charts, and not calling the JS files yet — is that correct?
I tried modifying the load function, but it resulted in an error. Do you know why that might be happening?

Here is the code I edited:

`async function load(name, source) {
view.replaceChildren();

let dir = '../specs/yaml';
if (name === 'none' && location.search) {
  // get example name from query string
  name = location.search.slice(1);
  if (name.startsWith('dev:')) {
    // route to local spec for testing / exploration
    name = name.slice(4);
    dir = './specs';
  }
}
if (name !== 'none') {
  let spec;

  if (source === 'yaml') {
    // load from YAML file
    spec = yaml.parse(
      await fetch(`${dir}/${name}.yaml`).then(res => res.text())
    );
  } else if (source === 'esm') {
    // load from JS file in esm folder
    const module = await import(`../specs/esm/${name}.js`);
    spec = module.default;
  }
  // options for output generation
  const baseURL = location.origin + '/';
  const options = connectorMenu.value === 'wasm' ? { baseURL } : {};

  // parse and load spec
  const ast = parseSpec(spec);
  const el = await (source === 'esm' ? loadESM : loadDOM)(ast, options);
  view.replaceChildren(el);
}

}`

The error I see is that it can't read the data files I'm passing in, I don't know if I understand this correctly?
This image is my error:

[domoritz]

Here is a simple example https://github.com/uwdata/mosaic/tree/main/examples/vanilla-example. I recommend using js instead of yaml unless you need a spec format. The error shows that the data file cannot be found so you need to fix the path and make sure the file exists.

[Mai74D]

I think this error starts from the way I import the js files into the index because every chart I call gets the same error.

[eleanorpd]

I found the jupyter widget and the Google Collab site a good place to start getting a feel for how the visualizations are constructed:
https://idl.uw.edu/mosaic/jupyter/
https://colab.research.google.com/drive/1Txy6L_of8_lJFImKEkhUCqZX70yKpYnv#scrollTo=leuzblN47K-T&uniqifier=1

And agree with Dominik, try adapting those to your own use cases to start.

[Mai74D]

Yupp! Thank you for your suggestion.

[declann]

I learned a lot using this Playground: https://mosaic-playground.netlify.app/

It's a great way to study and play with the examples; the website is also a brilliant guide

If you like Javascript I think Observable notebooks are also good to start making things: https://observablehq.com/@uwdata/mosaic-cross-filter-flights-10m

But if you are more familiar with Python the Collab notebook seems like a good starting point

There's a lot of complexity in how there are various connectors for instance, but choose and focus in one path that suits you - as Dominick suggested play around and work through available information or ask when needed - you will build up more and more knowledge and familiarity.

Mosaic crosses a lot of complexity going from data to visual, but I think if you stick with it then later you will marvel at what they have organised and presented.

Start simple and play around!

Edit: it sounds like a cool intern project, and you should also look internally for guidance when you need to

[domoritz]

Oh right, the playground is great. Definitely leave a star at https://github.com/alexkreidler/mosaic-playground for @alexkreidler for this great playground!

[Mai74D]

Yay. That is a really interesting suggestion. I will try with the playground.
Thank you.