11 ms·

Show HN: Tableau-Like Data Visualizations in JavaScript

361 points by pallavn 8y ago

pallavn 8y ago
Hey everyone, I’m part of the Muze team at Charts.com. Over the years I’ve seen lots of people who struggle to find the perfect balance between low-level visualization kernel (like d3), or black-box configurable charts (HighCharts, FusionCharts). So we decided to build Muze taking a data-first approach, where you load your data in an in-browser DataModel, run relational algebra enabled data operators to get the right subset of data, and then just pass to Muze engine, which automatically renders the best visualization for it. Any changes to data (including application of data operations) automatically updates the visualization, without you having to do anything else. Couple of added benefits are : - With other libraries, if you’ve to connect multiple charts (for cross-interactivity, drill-down etc.), you’ve to manually write the ‘glue’ code. With Muze, all charts rendered from the same DataModel are automatically connected (enabling cross-filtering). - Muze allows faceting of data out of box with multi-grid layout. - Composability of visualizations allow you to create any kind of cartesian visualization with Muze, without having to wait for the charting library vendor to release it as a ‘new chart type’ - Muze exposes Developer-first API for enabling interactivity and customizations. You can use the low-level API to create complex interaction We’ve literally just launched this last month or so, so I’d love some feedback if you can spare the time. Thanks for taking a look! Website: https://www.charts.com/muze https://www.charts.com/muze Github: https://github.com/chartshq/muze https://github.com/chartshq/muze
- cpsempek 8y ago
  > I’ve seen lots of people who struggle to find the perfect balance between low-level visualization kernel (like d3), or black-box configurable charts (HighCharts, FusionCharts) This is the biggest pain point for me with most current solutions. Either development time is super fast (e.g., tableau, periscope) but going beyond 80% is difficult, or development time is much longer (e.g., d3 or apis thereof) but you get full customization and getting to 100% is straightforward. For me, there is certainly a need to develop an 80% solution fast, but I also am always wanting to then redo the whole thing with lower level solution. I would prefer that I can piggy back off the 80% solution to 100% in the same software. That's a huge win for me. Thanks for providing a solution to this end, will definitely play around with this.
  - hglaser 8y ago
    Hey `cpsempek, Periscope Data CEO here. In a perfect world, how would the charting in Periscope work? How would you want to go from getting 80% very fast, to going to 100%, in the same software?
    - cpsempek 8y ago
      Hi, thanks for the reply! Actually, apologies for throwing your name next to tableau like that. I think your product does a great job incorporating things like R/python scripting to allow more flexibility in how data can be manipulated within the product. In this sense I prefer periscope to tableau (an in many other senses actually). A problem I encountered (granted over a year ago) was creating grouped bar charts with confidence intervals. Bars were grouped on some discrete x axis labels. The suggested solution for confidence intervals on grouped bars was to use a scatter plot to draw the confidence intervals, but this clumped them all on the xlabel position, not in the center of each bar. matplotlib for example treats the visualization as an object, in which case it makes a lot of sense that to add confidence intervals just query the bar objects for their positions and place line segments of desired widths in the center of the tops of the bars (or wherever, you have full control over this). So in general, a marriage of these two paradigms, quick development of a visualization based on data, but then the ability to switch to viewing and manipulating the visualization as a collection of instantiated objects with full control over their attributes. I am open to revisiting over any development periscope has made to this end.
      - hglaser 8y ago
        Appreciate the feedback! Yeah, the hack you described for CIs is typical of "80% charting". We have a list of probably thousands of longtail visualization requests and we're way past the 80/20 point. These days customers who want to go 100% use the Python/R editors and do their custom visualization there. So you do your SQL query like usual, but then pipe it to Python/R for the visualization. Have you tried that, and has it worked for you? Or do you prefer another model?
        8y ago
- moorhosj 8y ago
  I'm trying to implement the Programmatic trellis layout, but having difficulty re-creating it because I can't see the structure of the data. I started with the "yo muze" generator and am trying to manipulate with my own data. Am I missing something?
  - yonl 8y ago
    hey here is the full code starting from data loading to housing the viz on a dom node. https://jsfiddle.net/adarshlilha/8n5a94j1/20/ https://jsfiddle.net/adarshlilha/8n5a94j1/20/ Does this help?
    - moorhosj 8y ago
      I will work through this. Thanks for the help!
- educationdata 8y ago
  Do you support exporting the chart as png, pdf, etc.?
metasyn 8y ago
What does pseudo-immutable mean?
- yonl 8y ago
  So we create instance of DataModel once and then we perform operation like filtering, projection of columns, sorting etc. Everytime an operation is performed a new instance of DataModel is returned. Hence its immutable. But under the hood there is only one copy of data resides in the system shared by all instance of DataModel, for every operation we just record a formula and save it on DataModel instance. The data for that particular instance is computed on demand based on the formula. Its not a pure immutability by definition. Hence pseudo-immutable. However, every operation does not support formula storing. Operation like joining, grouping creates new data. We are updating the docs rapidly. All this info would be on the docs soon.
codegladiator 8y ago
Checkout https://github.com/vega/voyager https://github.com/vega/voyager
- yonl 8y ago
  Voyager is a recommendation system based on variables characteristics present in data. User is mostly limited by the offerings of voyegar (same story of https://github.com/vega/polestar https://github.com/vega/polestar). Vega is descriptive version of d3. We find it hard for debugging and creating complex viz. Vega-lite is concise and more intuitive version of vega though. However Muze was created to start directly from data, creating layout, composable layers, automatic cross interaction and a robust interaction mental model. Muze is inspired from VegaLite-InfoVis and Snap together viz paper.
  - domoritz 8y ago
    Hi, one of the Vega-Lite author here. I'm glad you like Vega-Lite and were inspired by our Infovis paper. Vega-Lite is much more mature than when we wrote the Infovis paper so I suggest you to check it out. Compared to Muze, Vega-Lite is embracing full declarativeness.
    - yonl 8y ago
      Hey I think you are Dominik (guessed from your handle). Thanks for the reply. Vega-Lite paper and layered grammar of graphics are the biggest motivations to write Muze. Vega-Lite is still my goto viz library for my ipython and JS work. Hence there are healthy intersections between vega-lite and muze terminologies and concepts. Would definitely love to check new development.
      - devj 8y ago
        How is Vegalite different from Muze?
uptown 8y ago
Looks very nice at first glance. I'm just digging into each example visualization. Noticed that the "Bubble with temporal axes" seems to peg my browser (Chrome 69 on Mid 2015 2.5 GHz Intel Core i7 Macbook Pro).
- yonl 8y ago
  yes we have also noticed that and fixing that.
jansan 8y ago
That's quite an interesting mix of HTML and SVG. Cool stuff. The website could be a bit more responsive. The charts are overlapping if I make the browser narrower.
- kakashi141 8y ago
  Seems to work properly if you inspect it at common breakpoints. Love the cross-connectivity between charts.
  - yonl 8y ago
    Yup cross connection could be configured using API to change the default behaviour Example: https://www.charts.com/muze/examples/view/crossfiltering-with-dynamic-layer-addition https://www.charts.com/muze/examples/view/crossfiltering-wit... Will upload the docs for this soon.
matthjensen 8y ago
How do you plan to support the team and project, financially, over the long haul?
- pallavn 8y ago
  We intend to be an open-core company, and monetize support and tools around the product.
  - matthjensen 8y ago
    Cool. You might consider describing Muze as a project rather than a product. E.g., On the homepage: Our first product, Muze... -> Our first project, Muze....
    - pallavn 8y ago
      Thanks for this nugget. Will consider and then change! Curious question: why would you not want to call an open source library as product?
      - matthjensen 8y ago
        I associate "product" with something that is sold, so when I saw Muze described as a "product," but I didn't see a price, I was somewhat wary that the price was hidden or forthcoming. "Project" is also a fairly common term to refer to open source tools and the community around them. See the nav bars for linuxfoundation.org or numfocus.org, for instance.
        runako 8y ago
        ^^^ I had the same thought process. I spent a few minutes clicking around the site to figure out the catch to the open-source library that is the only product of a company with a $$$$ domain.
        8y ago
koolba 8y ago
Holy crap that's an A-level domain. How'd you guys get it?
- harrisreynolds 8y ago
  Great question! We have https://chart.ly https://chart.ly which is pretty good. But charts dot com???
  - pallavn 8y ago
    Yeah, we got lucky :)
- Drdrdrq 8y ago
  Interestingly enough, while this is as good as it gets, my initial reaction to domain name was negative. From previous experience I learned that domains like that are taken by squatters or companies that... Well, don't really know how to capitalize on them. Kudos to OP for actually offering something to do with charts! :)
  - pallavn 8y ago
    Well - we took it from squatters :) and are trying to turn it into something really useful. That's why looking for feedback on what we've built!
    - no1youknowz 8y ago
      Took it from squatters? Do you mean legal action? If so. I think this would definitely be worthy of a blog post on exactly how you did it. Everytime I search for domain names, they are all taken up by squatters who want 5 to 6 figure amounts and they have been sitting on them for more than 5 years, 10 in some cases. Of course I email them back laughing, but it does mean I have to choose something completely different. I'm definitely not going to do a snappa.io to snappa.com lol [0]. [0]: https://www.reddit.com/r/Entrepreneur/comments/60gnyx/how_we_purchased_the_snappacom_domain_for_40000/ https://www.reddit.com/r/Entrepreneur/comments/60gnyx/how_we...
adilmoujahid 8y ago
Is there a plan to create a version that generate the graphs and manage all the filtering on the server side instead of having all the data in the browser? This will be very helpful for cases that uses large datasets... I built visualization using dc.js, and working with large datasets was the biggest pain point for me. http://adilmoujahid.com/posts/2016/08/interactive-data-visualization-geospatial-d3-dc-leaflet-python/ http://adilmoujahid.com/posts/2016/08/interactive-data-visua...
- yonl 8y ago
  We had plans to move DataModel (manages all data ops) to serverside. We even have a half baked DataModel in Scala which we thought we would do it once we understand some usecase. But currently we have put it on hold. We would love to know your - use case - number of data points - ops on data on serverside You can mail us to eng@charts.com
  - deleted 8y ago
    [deleted]
  - adilmoujahid 8y ago
    One use case could be a data visualization similar to what I built in [1] To build the visualization in [1], I used 3 datasets in csv format from a kaggle competition [2], and I implemented the charts using dc.js and Leaflet.js. The charts were interactive and I could managed to filter the data even in the map. The largest dataset was 284 MB, which was still ok and didn't crash my browser. There were 2 drawbacks to my approach: 1- All the data was in the browser. If my data was bigger (~1GB), then it would crash my browser. 2- If I deploy the visualization to a server (for example AWS), then it would make the rendering extremely slowly as it has to download all the data to the browser... [1] http://adilmoujahid.com/posts/2016/08/interactive-data-visualization-geospatial-d3-dc-leaflet-python/ http://adilmoujahid.com/posts/2016/08/interactive-data-visua... [2] https://www.kaggle.com/c/talkingdata-mobile-user-demographics/data https://www.kaggle.com/c/talkingdata-mobile-user-demographic...
    - 8y ago
atombender 8y ago
Looks promising. How does Muze integrate with React?
- pallavn 8y ago
  It’s well compatible with react. However we dont have a react component at this point of time. We are gonna make that happen soon.
andyfleming 8y ago
Thanks for sharing! A number of the charts in the examples are cut off (height-wise). https://www.charts.com/muze/examples/view/heatmap https://www.charts.com/muze/examples/view/heatmap for example (in Chrome 69). Seems fine in Firefox. https://imgur.com/a/Dq4fiz0 https://imgur.com/a/Dq4fiz0
- yonl 8y ago
  Ahh. Will fix this. For the time being, you can click on the play button on top right corner of the code section.
rayshan 8y ago
How does this compare to Plottable, another composable visualization library? http://plottablejs.org/ http://plottablejs.org/
- yonl 8y ago
  Just saw plottablejs. I can make an informed comparison without using it. However https://www.charts.com/muze/docs/composing-layers https://www.charts.com/muze/docs/composing-layers explains some part about muze's composability. And this is an example https://www.charts.com/muze/examples/view/composition-of-layer https://www.charts.com/muze/examples/view/composition-of-lay... Apart from composable layers Muze has - tabular layout (visual crosstab) created from data facets https://www.charts.com/muze/examples/view/crosstab-chart https://www.charts.com/muze/examples/view/crosstab-chart - auto interactions https://www.charts.com/muze/examples/view/crossfiltering-with-dynamic-layer-addition https://www.charts.com/muze/examples/view/crossfiltering-wit... - Legend on any chart https://www.charts.com/muze/examples/view/gradient-legend https://www.charts.com/muze/examples/view/gradient-legend etc...
modzu 8y ago
thanks for sharing, but holy slowwww
- NVRM 8y ago
  Exactly what I saw. This isn't a matter of slow server, but some examples are taking way too much ressources. Freezes. In the case of many charts in the scope, as i need refresh every 10 seconds, this will turn in blocking in no time. Testing performances in firefox debugger is already freezing with one chart and no refresh, and i didn't see the garbage collector be significant. (Memory leaks..) Too bad that charts are good. But performances should be a big warning.
  - pallavn 8y ago
    Sorry - early days. Thanks for pointing out. We'll fix them as we go! Soon.
  - yonl 8y ago
    Hey we noticed https://www.charts.com/muze/examples/view/bubble-with-temporal-axes https://www.charts.com/muze/examples/view/bubble-with-tempor... is a slow one but should not as bad as you are saying. However we are making some changes for performance and gonna release in few weeks. But i’ll double check the scenarios you mentioned.
- pallavn 8y ago
  Hey, any specific example are you talking about? We know https://www.charts.com/muze/examples/view/bubble-with-temporal-axes https://www.charts.com/muze/examples/view/bubble-with-tempor... is a pain so far and we are fixing this along side other performance improvement.
HHalvi 8y ago
Just saw a tweet storm of the CTO of Charts.com talking about Muze and a lot of the things make sense as to why they went with a data first model and the roadmap ahead. Link for anyone that's interested: https://twitter.com/1dot61803/status/1047384637289500673 https://twitter.com/1dot61803/status/1047384637289500673
victor106 8y ago
how does this compare with fusioncharts ?
- pallavn 8y ago
  FusionCharts is a configurable JS charting library. You choose your chart, define the parameters (highly configurable, though) and then render it. FusionCharts' strength is ease of use, backward compatibility, theming etc. Muze is data-first. You start with data, apply any operations (if needed), then render. Muze automatically detects the right chart for that and then renders. Also Muze allows you to compose any kind of cartesian visualization, as it follows grammar of graphics. So if I've to explain this in a spectrum, it goes like this: d3 (very powerful, high learning curve, you can do anything) Muze (data-first, Grammar of graphics oriented, compose viz) FusionCharts (chart-first, lot of depth in configurations, but can't extend yourself for new chart types) Hope this helps.
vlandham 8y ago
I'd like to know how the team made that amazing SVG-based animated banner image. That alone looks amazing!
- pallavn 8y ago
  It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
sandGorgon 8y ago
this was the most interesting thing for us, but it is broken in Chrome/Linux. https://www.charts.com/muze/examples/view/microcharts-in-table-using-crosstab https://www.charts.com/muze/examples/view/microcharts-in-tab... Also what is the Reactjs story here ? We went down the "tabular views" journey a while back and eventually settled on react-virtualized which i think is the best of breed.
- yonl 8y ago
  Hey, which linux distribution are you talking about? We have checked in chrome/Ubuntu and seems it works alright. However, will make sure it gets tested with all linux dist before next release. Are you looking for integration? > Also what is the Reactjs story here ?
starsol 8y ago
Is there any timeline example? Like http://visjs.org/timeline_examples.html http://visjs.org/timeline_examples.html
- pallavn 8y ago
  Thanks for bringing this up. It’s possible to create visualization like this using Muze easily. Will create an example and keep you updated. Should we reach out to you once done (if yes, let me know how)!
ccozan 8y ago
Nice work. I see a lot of potential. Offtopic question, apologies: Where and how one can create the start page animation ( the one in 3D , with the moving impulses and floating charts ) ?
- pallavn 8y ago
  It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
  - ccozan 8y ago
    Thank you. Very well done!
  - sbr464 8y ago
    That SVG is very well done!
anonnel 8y ago
Where did you get the cool animation? It’s nice.
- pallavn 8y ago
  It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
  - somada141 8y ago
    lol was curious about that too. Looks gorgeous!
- kakashi141 8y ago
  Animations like the one on the front page of https://www.charts.com/muze https://www.charts.com/muze can be created using adobe aftereffects and exported using the bodymovi plugin as a JSON file along with keyframe images. The exported animation can be loaded using the lottie framework. https://airbnb.io/lottie/ https://airbnb.io/lottie/
  - anonnel 8y ago
    This is great.
tyingq 8y ago
The example pages all have the visualizations in an iframe. Is that required, or is there some way to generate and display these without the iframe?
- pallavn 8y ago
  That's just our doc framework (early days). You can embed them in a DIV/SPAN etc.
- kakashi141 8y ago
  Hey tyingq, The examples are loaded in iframes due to security considerations given that the sample code is editable. For your own use you don't have to load the charts in in iframe.
krikou 8y ago
Shameless plug for a data + markup based approach, hiding some of d3.js complexity: https://github.com/PolymerEl/multi-verse https://github.com/PolymerEl/multi-verse. Codebase is being migrated to Polymer 2.0, and better documentation.
- pallavn 8y ago
  Looks great! Can we think of a way to integrate muze using your approach? :)
  - krikou 8y ago
    Core idea behind this approach is to expose API properties as web-component attributes so that you can compose your charts and visualization at markup level (and share/react to properties between components). I do not see any reason why this could not work with your API. If interested, some concrete/simpler examples available from https://github.com/PolymerEl/multi-chart https://github.com/PolymerEl/multi-chart (also being ported / simplified; ETA next week)
troynt 8y ago
How will this be monetized? Any pricing/licensing info?
- pallavn 8y ago
  Open-core is free. We'll monetize support & tools we build around it!
d0m 8y ago
Hey, what did you guys use to build the feedback/roadmap part? (https://feedback.muze.charts.com https://feedback.muze.charts.com) Is it a third-party service or something built in-house?
- yonl 8y ago
  We have used fider https://github.com/getfider/fider https://github.com/getfider/fider
  - jannyfer 8y ago
    Omg, I've been looking for an open source version of something like this for a long time. Thank you!
aldoushuxley001 8y ago
Great Animation on the front page.
- kannangsl 8y ago
  Thanks, aldoushuxley001
Jerry2 8y ago
Hi pallavn (or someone else who might know), how was the animation at the top of the page created? Beautiful work all around btw!
- yonl 8y ago
  It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
  - Jerry2 8y ago
    Thanks yonl!
  - dstroot 8y ago
    Is the person who did it available for hire? Awesome work!!
- kannangsl 8y ago
  thanks Jerry2, the Animation was created using adobe aftereffects and exported using the bodymovi plugin as a JSON file along with keyframe images. The exported animation can be loaded using the lottie framework. https://airbnb.io/lottie/ https://airbnb.io/lottie/. Hope this helps.
bigger_cheese 8y ago
Is it possible to have multiple scales on a single axis this is something we use a lot at my work but very few javascript charting libraries seem to support. Example here: https://imgur.com/a/zd5Giom https://imgur.com/a/zd5Giom
jupiter90000 8y ago
We currently use Plotly quite a bit where I work for a customer facing website with a wide variety of charts. Does anyone know what some of the tangible benefits might be to migrating to this instead of using Plotly?
- erikig 8y ago
  Thanks for sharing Plotly. I'd recommend pointing out the Plotly features you'd like to improve and seeing if the Muze team has solutions/improvements.
- yonl 8y ago
  Depends on your use case. Can you share any pointers where - you feel you had hard time achieving with Plotly? - a feature you wanted is not supported by Plotly?
- cjf4 8y ago
  Having only browsed both Plotly and this project, this is my understanding: Plotly seems like its just the charting/graphing layer. A common use case (and increasingly an expectation) is that a series of graphs on a single page be responsive and cross filterable. For instance, if you click on a single element on one chart, it should filter the related charts accordingly. Additionally, these filters should build on each other and the developer/analyst should be able to define that. Really, you're now doing a form of data modelling and in the domain of BI, and Plotly isn't going to help you figure any of this out. Tableau and Power BI have gotten traction by building products that not only include but prioritize this form of modelling. Once you define your data model, you get the multi dimensional charting for free. The appeal to me of this library (not having done a thorough G2) is an open source alternative to those products that integrates charts and data modelling easily.
physcab 8y ago
I've been a career data analyst for 12 ish years. At first I didn't get the reference to Tableau, because I use Tableau for about 5-8 hours every day. I've played around with every new charting library since Flex because I've always wanted to create a free version of Tableau that gets me 80% of what I use Tableau for, but with 1% the frustration of using Tableau. Problem was, I could never figure out how Tableau is able to create its visualizations so easily just by drag and drop. Every library makes you think of the chart you want to make beforehand, but as an analyst, I work on the data first then spend almost equal amount of time finding the most intuitive visualization for the trend I'm trying to convey. So I've just put that idea on hold indefinitely. I went through the tutorial and I have to say...oh man, this is amazing. Building a Tableau clone is now possible! I hope you guys don't go under because its going to take me a while, but I'm super excited! Does this work on mobile? Also, when I click "Play" the chart takes atleast 1-2 seconds to render. Is that just your code running engine or does every visualizations have that lag?
- kakashi141 8y ago
  Hey physcab, The charts do work on mobile. Also the lag you are seeing is only a limitation of our code engine which has to fetch and process the sample in an iframe due to security constraints. In a normal environment where the library is loaded via a script tag the charts should render very quickly.
- yonl 8y ago
  Hey it does work on mobile. However, remember visualizations like crosstab, splom are not meant to be displayed in a space constrained area as is. There are multiple way to handle this situation. At this point of time Muze does not changes layout based on space. The web framework fetches data, does some additional checking on data and schema, process visible code and render it. That is probably the reason you are seeing lag. Also there are few areas where Muze performance needs to be improved. We are doing a release to address this soon.
petersonh 8y ago
This looks interesting, had to look on my phone, thought you might want to know that my corporate firewall blocked it in case others are experiencing this as well.

361 points by pallavn 8y ago

Hey everyone, I’m part of the Muze team at Charts.com. Over the years I’ve seen lots of people who struggle to find the perfect balance between low-level visualization kernel (like d3), or black-box configurable charts (HighCharts, FusionCharts). So we decided to build Muze taking a data-first approach, where you load your data in an in-browser DataModel, run relational algebra enabled data operators to get the right subset of data, and then just pass to Muze engine, which automatically renders the best visualization for it. Any changes to data (including application of data operations) automatically updates the visualization, without you having to do anything else. Couple of added benefits are : - With other libraries, if you’ve to connect multiple charts (for cross-interactivity, drill-down etc.), you’ve to manually write the ‘glue’ code. With Muze, all charts rendered from the same DataModel are automatically connected (enabling cross-filtering). - Muze allows faceting of data out of box with multi-grid layout. - Composability of visualizations allow you to create any kind of cartesian visualization with Muze, without having to wait for the charting library vendor to release it as a ‘new chart type’ - Muze exposes Developer-first API for enabling interactivity and customizations. You can use the low-level API to create complex interaction We’ve literally just launched this last month or so, so I’d love some feedback if you can spare the time. Thanks for taking a look! Website: https://www.charts.com/muze https://www.charts.com/muze Github: https://github.com/chartshq/muze https://github.com/chartshq/muze

cpsempek 8y ago
> I’ve seen lots of people who struggle to find the perfect balance between low-level visualization kernel (like d3), or black-box configurable charts (HighCharts, FusionCharts) This is the biggest pain point for me with most current solutions. Either development time is super fast (e.g., tableau, periscope) but going beyond 80% is difficult, or development time is much longer (e.g., d3 or apis thereof) but you get full customization and getting to 100% is straightforward. For me, there is certainly a need to develop an 80% solution fast, but I also am always wanting to then redo the whole thing with lower level solution. I would prefer that I can piggy back off the 80% solution to 100% in the same software. That's a huge win for me. Thanks for providing a solution to this end, will definitely play around with this.
- hglaser 8y ago
  Hey `cpsempek, Periscope Data CEO here. In a perfect world, how would the charting in Periscope work? How would you want to go from getting 80% very fast, to going to 100%, in the same software?
  - cpsempek 8y ago
    Hi, thanks for the reply! Actually, apologies for throwing your name next to tableau like that. I think your product does a great job incorporating things like R/python scripting to allow more flexibility in how data can be manipulated within the product. In this sense I prefer periscope to tableau (an in many other senses actually). A problem I encountered (granted over a year ago) was creating grouped bar charts with confidence intervals. Bars were grouped on some discrete x axis labels. The suggested solution for confidence intervals on grouped bars was to use a scatter plot to draw the confidence intervals, but this clumped them all on the xlabel position, not in the center of each bar. matplotlib for example treats the visualization as an object, in which case it makes a lot of sense that to add confidence intervals just query the bar objects for their positions and place line segments of desired widths in the center of the tops of the bars (or wherever, you have full control over this). So in general, a marriage of these two paradigms, quick development of a visualization based on data, but then the ability to switch to viewing and manipulating the visualization as a collection of instantiated objects with full control over their attributes. I am open to revisiting over any development periscope has made to this end.
    - hglaser 8y ago
      Appreciate the feedback! Yeah, the hack you described for CIs is typical of "80% charting". We have a list of probably thousands of longtail visualization requests and we're way past the 80/20 point. These days customers who want to go 100% use the Python/R editors and do their custom visualization there. So you do your SQL query like usual, but then pipe it to Python/R for the visualization. Have you tried that, and has it worked for you? Or do you prefer another model?
      - 8y ago
moorhosj 8y ago
I'm trying to implement the Programmatic trellis layout, but having difficulty re-creating it because I can't see the structure of the data. I started with the "yo muze" generator and am trying to manipulate with my own data. Am I missing something?
- yonl 8y ago
  hey here is the full code starting from data loading to housing the viz on a dom node. https://jsfiddle.net/adarshlilha/8n5a94j1/20/ https://jsfiddle.net/adarshlilha/8n5a94j1/20/ Does this help?
  - moorhosj 8y ago
    I will work through this. Thanks for the help!
educationdata 8y ago
Do you support exporting the chart as png, pdf, etc.?

metasyn 8y ago

What does pseudo-immutable mean?

yonl 8y ago
So we create instance of DataModel once and then we perform operation like filtering, projection of columns, sorting etc. Everytime an operation is performed a new instance of DataModel is returned. Hence its immutable. But under the hood there is only one copy of data resides in the system shared by all instance of DataModel, for every operation we just record a formula and save it on DataModel instance. The data for that particular instance is computed on demand based on the formula. Its not a pure immutability by definition. Hence pseudo-immutable. However, every operation does not support formula storing. Operation like joining, grouping creates new data. We are updating the docs rapidly. All this info would be on the docs soon.

codegladiator 8y ago

Checkout https://github.com/vega/voyager https://github.com/vega/voyager

yonl 8y ago
Voyager is a recommendation system based on variables characteristics present in data. User is mostly limited by the offerings of voyegar (same story of https://github.com/vega/polestar https://github.com/vega/polestar). Vega is descriptive version of d3. We find it hard for debugging and creating complex viz. Vega-lite is concise and more intuitive version of vega though. However Muze was created to start directly from data, creating layout, composable layers, automatic cross interaction and a robust interaction mental model. Muze is inspired from VegaLite-InfoVis and Snap together viz paper.
- domoritz 8y ago
  Hi, one of the Vega-Lite author here. I'm glad you like Vega-Lite and were inspired by our Infovis paper. Vega-Lite is much more mature than when we wrote the Infovis paper so I suggest you to check it out. Compared to Muze, Vega-Lite is embracing full declarativeness.
  - yonl 8y ago
    Hey I think you are Dominik (guessed from your handle). Thanks for the reply. Vega-Lite paper and layered grammar of graphics are the biggest motivations to write Muze. Vega-Lite is still my goto viz library for my ipython and JS work. Hence there are healthy intersections between vega-lite and muze terminologies and concepts. Would definitely love to check new development.
    - devj 8y ago
      How is Vegalite different from Muze?

uptown 8y ago

Looks very nice at first glance. I'm just digging into each example visualization. Noticed that the "Bubble with temporal axes" seems to peg my browser (Chrome 69 on Mid 2015 2.5 GHz Intel Core i7 Macbook Pro).

yonl 8y ago
yes we have also noticed that and fixing that.

jansan 8y ago

That's quite an interesting mix of HTML and SVG. Cool stuff. The website could be a bit more responsive. The charts are overlapping if I make the browser narrower.

kakashi141 8y ago
Seems to work properly if you inspect it at common breakpoints. Love the cross-connectivity between charts.
- yonl 8y ago
  Yup cross connection could be configured using API to change the default behaviour Example: https://www.charts.com/muze/examples/view/crossfiltering-with-dynamic-layer-addition https://www.charts.com/muze/examples/view/crossfiltering-wit... Will upload the docs for this soon.

matthjensen 8y ago

How do you plan to support the team and project, financially, over the long haul?

pallavn 8y ago
We intend to be an open-core company, and monetize support and tools around the product.
- matthjensen 8y ago
  Cool. You might consider describing Muze as a project rather than a product. E.g., On the homepage: Our first product, Muze... -> Our first project, Muze....
  - pallavn 8y ago
    Thanks for this nugget. Will consider and then change! Curious question: why would you not want to call an open source library as product?
    - matthjensen 8y ago
      I associate "product" with something that is sold, so when I saw Muze described as a "product," but I didn't see a price, I was somewhat wary that the price was hidden or forthcoming. "Project" is also a fairly common term to refer to open source tools and the community around them. See the nav bars for linuxfoundation.org or numfocus.org, for instance.
      - runako 8y ago
        ^^^ I had the same thought process. I spent a few minutes clicking around the site to figure out the catch to the open-source library that is the only product of a company with a $$$$ domain.
        8y ago

koolba 8y ago

Holy crap that's an A-level domain. How'd you guys get it?

harrisreynolds 8y ago
Great question! We have https://chart.ly https://chart.ly which is pretty good. But charts dot com???
- pallavn 8y ago
  Yeah, we got lucky :)
Drdrdrq 8y ago
Interestingly enough, while this is as good as it gets, my initial reaction to domain name was negative. From previous experience I learned that domains like that are taken by squatters or companies that... Well, don't really know how to capitalize on them. Kudos to OP for actually offering something to do with charts! :)
- pallavn 8y ago
  Well - we took it from squatters :) and are trying to turn it into something really useful. That's why looking for feedback on what we've built!
  - no1youknowz 8y ago
    Took it from squatters? Do you mean legal action? If so. I think this would definitely be worthy of a blog post on exactly how you did it. Everytime I search for domain names, they are all taken up by squatters who want 5 to 6 figure amounts and they have been sitting on them for more than 5 years, 10 in some cases. Of course I email them back laughing, but it does mean I have to choose something completely different. I'm definitely not going to do a snappa.io to snappa.com lol [0]. [0]: https://www.reddit.com/r/Entrepreneur/comments/60gnyx/how_we_purchased_the_snappacom_domain_for_40000/ https://www.reddit.com/r/Entrepreneur/comments/60gnyx/how_we...

adilmoujahid 8y ago

Is there a plan to create a version that generate the graphs and manage all the filtering on the server side instead of having all the data in the browser? This will be very helpful for cases that uses large datasets... I built visualization using dc.js, and working with large datasets was the biggest pain point for me. http://adilmoujahid.com/posts/2016/08/interactive-data-visualization-geospatial-d3-dc-leaflet-python/ http://adilmoujahid.com/posts/2016/08/interactive-data-visua...

yonl 8y ago
We had plans to move DataModel (manages all data ops) to serverside. We even have a half baked DataModel in Scala which we thought we would do it once we understand some usecase. But currently we have put it on hold. We would love to know your - use case - number of data points - ops on data on serverside You can mail us to eng@charts.com
- deleted 8y ago
  [deleted]
- adilmoujahid 8y ago
  One use case could be a data visualization similar to what I built in [1] To build the visualization in [1], I used 3 datasets in csv format from a kaggle competition [2], and I implemented the charts using dc.js and Leaflet.js. The charts were interactive and I could managed to filter the data even in the map. The largest dataset was 284 MB, which was still ok and didn't crash my browser. There were 2 drawbacks to my approach: 1- All the data was in the browser. If my data was bigger (~1GB), then it would crash my browser. 2- If I deploy the visualization to a server (for example AWS), then it would make the rendering extremely slowly as it has to download all the data to the browser... [1] http://adilmoujahid.com/posts/2016/08/interactive-data-visualization-geospatial-d3-dc-leaflet-python/ http://adilmoujahid.com/posts/2016/08/interactive-data-visua... [2] https://www.kaggle.com/c/talkingdata-mobile-user-demographics/data https://www.kaggle.com/c/talkingdata-mobile-user-demographic...
  - 8y ago

atombender 8y ago

Looks promising. How does Muze integrate with React?

pallavn 8y ago
It’s well compatible with react. However we dont have a react component at this point of time. We are gonna make that happen soon.

andyfleming 8y ago

Thanks for sharing! A number of the charts in the examples are cut off (height-wise). https://www.charts.com/muze/examples/view/heatmap https://www.charts.com/muze/examples/view/heatmap for example (in Chrome 69). Seems fine in Firefox. https://imgur.com/a/Dq4fiz0 https://imgur.com/a/Dq4fiz0

yonl 8y ago
Ahh. Will fix this. For the time being, you can click on the play button on top right corner of the code section.

rayshan 8y ago

How does this compare to Plottable, another composable visualization library? http://plottablejs.org/ http://plottablejs.org/

yonl 8y ago
Just saw plottablejs. I can make an informed comparison without using it. However https://www.charts.com/muze/docs/composing-layers https://www.charts.com/muze/docs/composing-layers explains some part about muze's composability. And this is an example https://www.charts.com/muze/examples/view/composition-of-layer https://www.charts.com/muze/examples/view/composition-of-lay... Apart from composable layers Muze has - tabular layout (visual crosstab) created from data facets https://www.charts.com/muze/examples/view/crosstab-chart https://www.charts.com/muze/examples/view/crosstab-chart - auto interactions https://www.charts.com/muze/examples/view/crossfiltering-with-dynamic-layer-addition https://www.charts.com/muze/examples/view/crossfiltering-wit... - Legend on any chart https://www.charts.com/muze/examples/view/gradient-legend https://www.charts.com/muze/examples/view/gradient-legend etc...

modzu 8y ago

thanks for sharing, but holy slowwww

NVRM 8y ago
Exactly what I saw. This isn't a matter of slow server, but some examples are taking way too much ressources. Freezes. In the case of many charts in the scope, as i need refresh every 10 seconds, this will turn in blocking in no time. Testing performances in firefox debugger is already freezing with one chart and no refresh, and i didn't see the garbage collector be significant. (Memory leaks..) Too bad that charts are good. But performances should be a big warning.
- pallavn 8y ago
  Sorry - early days. Thanks for pointing out. We'll fix them as we go! Soon.
- yonl 8y ago
  Hey we noticed https://www.charts.com/muze/examples/view/bubble-with-temporal-axes https://www.charts.com/muze/examples/view/bubble-with-tempor... is a slow one but should not as bad as you are saying. However we are making some changes for performance and gonna release in few weeks. But i’ll double check the scenarios you mentioned.
pallavn 8y ago
Hey, any specific example are you talking about? We know https://www.charts.com/muze/examples/view/bubble-with-temporal-axes https://www.charts.com/muze/examples/view/bubble-with-tempor... is a pain so far and we are fixing this along side other performance improvement.

HHalvi 8y ago

Just saw a tweet storm of the CTO of Charts.com talking about Muze and a lot of the things make sense as to why they went with a data first model and the roadmap ahead. Link for anyone that's interested: https://twitter.com/1dot61803/status/1047384637289500673 https://twitter.com/1dot61803/status/1047384637289500673

victor106 8y ago

how does this compare with fusioncharts ?

pallavn 8y ago
FusionCharts is a configurable JS charting library. You choose your chart, define the parameters (highly configurable, though) and then render it. FusionCharts' strength is ease of use, backward compatibility, theming etc. Muze is data-first. You start with data, apply any operations (if needed), then render. Muze automatically detects the right chart for that and then renders. Also Muze allows you to compose any kind of cartesian visualization, as it follows grammar of graphics. So if I've to explain this in a spectrum, it goes like this: d3 (very powerful, high learning curve, you can do anything) Muze (data-first, Grammar of graphics oriented, compose viz) FusionCharts (chart-first, lot of depth in configurations, but can't extend yourself for new chart types) Hope this helps.

vlandham 8y ago

I'd like to know how the team made that amazing SVG-based animated banner image. That alone looks amazing!

pallavn 8y ago
It was a handwritten svg animation with d3 later enhanced using adobe illustrator.

sandGorgon 8y ago

this was the most interesting thing for us, but it is broken in Chrome/Linux. https://www.charts.com/muze/examples/view/microcharts-in-table-using-crosstab https://www.charts.com/muze/examples/view/microcharts-in-tab... Also what is the Reactjs story here ? We went down the "tabular views" journey a while back and eventually settled on react-virtualized which i think is the best of breed.

yonl 8y ago
Hey, which linux distribution are you talking about? We have checked in chrome/Ubuntu and seems it works alright. However, will make sure it gets tested with all linux dist before next release. Are you looking for integration? > Also what is the Reactjs story here ?

starsol 8y ago

Is there any timeline example? Like http://visjs.org/timeline_examples.html http://visjs.org/timeline_examples.html

pallavn 8y ago
Thanks for bringing this up. It’s possible to create visualization like this using Muze easily. Will create an example and keep you updated. Should we reach out to you once done (if yes, let me know how)!

ccozan 8y ago

Nice work. I see a lot of potential. Offtopic question, apologies: Where and how one can create the start page animation ( the one in 3D , with the moving impulses and floating charts ) ?

pallavn 8y ago
It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
- ccozan 8y ago
  Thank you. Very well done!
- sbr464 8y ago
  That SVG is very well done!

anonnel 8y ago

Where did you get the cool animation? It’s nice.

pallavn 8y ago
It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
- somada141 8y ago
  lol was curious about that too. Looks gorgeous!
kakashi141 8y ago
Animations like the one on the front page of https://www.charts.com/muze https://www.charts.com/muze can be created using adobe aftereffects and exported using the bodymovi plugin as a JSON file along with keyframe images. The exported animation can be loaded using the lottie framework. https://airbnb.io/lottie/ https://airbnb.io/lottie/
- anonnel 8y ago
  This is great.

tyingq 8y ago

The example pages all have the visualizations in an iframe. Is that required, or is there some way to generate and display these without the iframe?

pallavn 8y ago
That's just our doc framework (early days). You can embed them in a DIV/SPAN etc.
kakashi141 8y ago
Hey tyingq, The examples are loaded in iframes due to security considerations given that the sample code is editable. For your own use you don't have to load the charts in in iframe.

krikou 8y ago

Shameless plug for a data + markup based approach, hiding some of d3.js complexity: https://github.com/PolymerEl/multi-verse https://github.com/PolymerEl/multi-verse. Codebase is being migrated to Polymer 2.0, and better documentation.

pallavn 8y ago
Looks great! Can we think of a way to integrate muze using your approach? :)
- krikou 8y ago
  Core idea behind this approach is to expose API properties as web-component attributes so that you can compose your charts and visualization at markup level (and share/react to properties between components). I do not see any reason why this could not work with your API. If interested, some concrete/simpler examples available from https://github.com/PolymerEl/multi-chart https://github.com/PolymerEl/multi-chart (also being ported / simplified; ETA next week)

troynt 8y ago

How will this be monetized? Any pricing/licensing info?

pallavn 8y ago
Open-core is free. We'll monetize support & tools we build around it!

d0m 8y ago

Hey, what did you guys use to build the feedback/roadmap part? (https://feedback.muze.charts.com https://feedback.muze.charts.com) Is it a third-party service or something built in-house?

yonl 8y ago
We have used fider https://github.com/getfider/fider https://github.com/getfider/fider
- jannyfer 8y ago
  Omg, I've been looking for an open source version of something like this for a long time. Thank you!

aldoushuxley001 8y ago

Great Animation on the front page.

kannangsl 8y ago
Thanks, aldoushuxley001

Jerry2 8y ago

Hi pallavn (or someone else who might know), how was the animation at the top of the page created? Beautiful work all around btw!

yonl 8y ago
It was a handwritten svg animation with d3 later enhanced using adobe illustrator.
- Jerry2 8y ago
  Thanks yonl!
- dstroot 8y ago
  Is the person who did it available for hire? Awesome work!!
kannangsl 8y ago
thanks Jerry2, the Animation was created using adobe aftereffects and exported using the bodymovi plugin as a JSON file along with keyframe images. The exported animation can be loaded using the lottie framework. https://airbnb.io/lottie/ https://airbnb.io/lottie/. Hope this helps.

bigger_cheese 8y ago

Is it possible to have multiple scales on a single axis this is something we use a lot at my work but very few javascript charting libraries seem to support. Example here: https://imgur.com/a/zd5Giom https://imgur.com/a/zd5Giom

jupiter90000 8y ago

We currently use Plotly quite a bit where I work for a customer facing website with a wide variety of charts. Does anyone know what some of the tangible benefits might be to migrating to this instead of using Plotly?

erikig 8y ago
Thanks for sharing Plotly. I'd recommend pointing out the Plotly features you'd like to improve and seeing if the Muze team has solutions/improvements.
yonl 8y ago
Depends on your use case. Can you share any pointers where - you feel you had hard time achieving with Plotly? - a feature you wanted is not supported by Plotly?
cjf4 8y ago
Having only browsed both Plotly and this project, this is my understanding: Plotly seems like its just the charting/graphing layer. A common use case (and increasingly an expectation) is that a series of graphs on a single page be responsive and cross filterable. For instance, if you click on a single element on one chart, it should filter the related charts accordingly. Additionally, these filters should build on each other and the developer/analyst should be able to define that. Really, you're now doing a form of data modelling and in the domain of BI, and Plotly isn't going to help you figure any of this out. Tableau and Power BI have gotten traction by building products that not only include but prioritize this form of modelling. Once you define your data model, you get the multi dimensional charting for free. The appeal to me of this library (not having done a thorough G2) is an open source alternative to those products that integrates charts and data modelling easily.

physcab 8y ago

I've been a career data analyst for 12 ish years. At first I didn't get the reference to Tableau, because I use Tableau for about 5-8 hours every day. I've played around with every new charting library since Flex because I've always wanted to create a free version of Tableau that gets me 80% of what I use Tableau for, but with 1% the frustration of using Tableau. Problem was, I could never figure out how Tableau is able to create its visualizations so easily just by drag and drop. Every library makes you think of the chart you want to make beforehand, but as an analyst, I work on the data first then spend almost equal amount of time finding the most intuitive visualization for the trend I'm trying to convey. So I've just put that idea on hold indefinitely. I went through the tutorial and I have to say...oh man, this is amazing. Building a Tableau clone is now possible! I hope you guys don't go under because its going to take me a while, but I'm super excited! Does this work on mobile? Also, when I click "Play" the chart takes atleast 1-2 seconds to render. Is that just your code running engine or does every visualizations have that lag?

kakashi141 8y ago
Hey physcab, The charts do work on mobile. Also the lag you are seeing is only a limitation of our code engine which has to fetch and process the sample in an iframe due to security constraints. In a normal environment where the library is loaded via a script tag the charts should render very quickly.
yonl 8y ago
Hey it does work on mobile. However, remember visualizations like crosstab, splom are not meant to be displayed in a space constrained area as is. There are multiple way to handle this situation. At this point of time Muze does not changes layout based on space. The web framework fetches data, does some additional checking on data and schema, process visible code and render it. That is probably the reason you are seeing lag. Also there are few areas where Muze performance needs to be improved. We are doing a release to address this soon.

petersonh 8y ago

This looks interesting, had to look on my phone, thought you might want to know that my corporate firewall blocked it in case others are experiencing this as well.