TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Tableau-Like Data Visualizations in JavaScript

361 pointsby pallavnover 6 years ago

28 comments

pallavnover 6 years ago
Hey everyone,<p>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).<p>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.<p>Any changes to data (including application of data operations) automatically updates the visualization, without you having to do anything else.<p>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).<p>- Muze allows faceting of data out of box with multi-grid layout.<p>- 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’<p>- Muze exposes Developer-first API for enabling interactivity and customizations. You can use the low-level API to create complex interaction<p>We’ve literally just launched this last month or so, so I’d love some feedback if you can spare the time.<p>Thanks for taking a look!<p>Website: <a href="https:&#x2F;&#x2F;www.charts.com&#x2F;muze" rel="nofollow">https:&#x2F;&#x2F;www.charts.com&#x2F;muze</a> Github: <a href="https:&#x2F;&#x2F;github.com&#x2F;chartshq&#x2F;muze" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;chartshq&#x2F;muze</a>
评论 #18194053 未加载
评论 #18202150 未加载
评论 #18213362 未加载
adilmoujahidover 6 years 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?<p>This will be very helpful for cases that uses large datasets...<p>I built visualization using dc.js, and working with large datasets was the biggest pain point for me.<p><a href="http:&#x2F;&#x2F;adilmoujahid.com&#x2F;posts&#x2F;2016&#x2F;08&#x2F;interactive-data-visualization-geospatial-d3-dc-leaflet-python&#x2F;" rel="nofollow">http:&#x2F;&#x2F;adilmoujahid.com&#x2F;posts&#x2F;2016&#x2F;08&#x2F;interactive-data-visua...</a>
评论 #18194673 未加载
评论 #18198346 未加载
评论 #18195975 未加载
koolbaover 6 years ago
Holy crap that&#x27;s an A-level domain. How&#x27;d you guys get it?
评论 #18195935 未加载
评论 #18195450 未加载
physcabover 6 years ago
I&#x27;ve been a career data analyst for 12 ish years. At first I didn&#x27;t get the reference to Tableau, because I use Tableau for about 5-8 hours every day. I&#x27;ve played around with every new charting library since Flex because I&#x27;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&#x27;m trying to convey. So I&#x27;ve just put that idea on hold indefinitely.<p>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&#x27;t go under because its going to take me a while, but I&#x27;m super excited!<p>Does this work on mobile? Also, when I click &quot;Play&quot; the chart takes atleast 1-2 seconds to render. Is that just your code running engine or does every visualizations have that lag?
评论 #18199799 未加载
评论 #18199431 未加载
d0mover 6 years ago
Hey, what did you guys use to build the feedback&#x2F;roadmap part? (<a href="https:&#x2F;&#x2F;feedback.muze.charts.com" rel="nofollow">https:&#x2F;&#x2F;feedback.muze.charts.com</a>) Is it a third-party service or something built in-house?
评论 #18196675 未加载
HHalviover 6 years 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&#x27;s interested: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;1dot61803&#x2F;status&#x2F;1047384637289500673" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;1dot61803&#x2F;status&#x2F;1047384637289500673</a>
jupiter90000over 6 years 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?
评论 #18203075 未加载
评论 #18198874 未加载
评论 #18199786 未加载
codegladiatorover 6 years ago
Checkout <a href="https:&#x2F;&#x2F;github.com&#x2F;vega&#x2F;voyager" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vega&#x2F;voyager</a>
评论 #18194168 未加载
atombenderover 6 years ago
Looks promising. How does Muze integrate with React?
评论 #18196209 未加载
vlandhamover 6 years ago
I&#x27;d like to know how the team made that amazing SVG-based animated banner image. That alone looks amazing!
评论 #18196223 未加载
bigger_cheeseover 6 years 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.<p>Example here: <a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;zd5Giom" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;zd5Giom</a>
uptownover 6 years ago
Looks very nice at first glance. I&#x27;m just digging into each example visualization. Noticed that the &quot;Bubble with temporal axes&quot; seems to peg my browser (Chrome 69 on Mid 2015 2.5 GHz Intel Core i7 Macbook Pro).
评论 #18194106 未加载
andyflemingover 6 years ago
Thanks for sharing!<p>A number of the charts in the examples are cut off (height-wise). <a href="https:&#x2F;&#x2F;www.charts.com&#x2F;muze&#x2F;examples&#x2F;view&#x2F;heatmap" rel="nofollow">https:&#x2F;&#x2F;www.charts.com&#x2F;muze&#x2F;examples&#x2F;view&#x2F;heatmap</a> for example (in Chrome 69). Seems fine in Firefox.<p><a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;Dq4fiz0" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;Dq4fiz0</a>
评论 #18195936 未加载
krikouover 6 years ago
Shameless plug for a data + markup based approach, hiding some of d3.js complexity: <a href="https:&#x2F;&#x2F;github.com&#x2F;PolymerEl&#x2F;multi-verse" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;PolymerEl&#x2F;multi-verse</a>.<p>Codebase is being migrated to Polymer 2.0, and better documentation.
评论 #18196368 未加载
matthjensenover 6 years ago
How do you plan to support the team and project, financially, over the long haul?
评论 #18194301 未加载
sandGorgonover 6 years ago
this was the most interesting thing for us, but it is broken in Chrome&#x2F;Linux. <a href="https:&#x2F;&#x2F;www.charts.com&#x2F;muze&#x2F;examples&#x2F;view&#x2F;microcharts-in-table-using-crosstab" rel="nofollow">https:&#x2F;&#x2F;www.charts.com&#x2F;muze&#x2F;examples&#x2F;view&#x2F;microcharts-in-tab...</a><p>Also what is the Reactjs story here ? We went down the &quot;tabular views&quot; journey a while back and eventually settled on react-virtualized which i think is the best of breed.
评论 #18195926 未加载
starsolover 6 years ago
Is there any timeline example? Like <a href="http:&#x2F;&#x2F;visjs.org&#x2F;timeline_examples.html" rel="nofollow">http:&#x2F;&#x2F;visjs.org&#x2F;timeline_examples.html</a>
评论 #18196218 未加载
ccozanover 6 years ago
Nice work. I see a lot of potential.<p>Offtopic question, apologies: Where and how one can create the start page animation ( the one in 3D , with the moving impulses and floating charts ) ?
评论 #18196207 未加载
rayshanover 6 years ago
How does this compare to Plottable, another composable visualization library?<p><a href="http:&#x2F;&#x2F;plottablejs.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;plottablejs.org&#x2F;</a>
评论 #18194944 未加载
jansanover 6 years ago
That&#x27;s quite an interesting mix of HTML and SVG. Cool stuff.<p>The website could be a bit more responsive. The charts are overlapping if I make the browser narrower.
评论 #18194279 未加载
tyingqover 6 years ago
The example pages all have the visualizations in an iframe.<p>Is that required, or is there some way to generate and display these without the iframe?
评论 #18199448 未加载
评论 #18196073 未加载
Jerry2over 6 years 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!
评论 #18197318 未加载
评论 #18199792 未加载
troyntover 6 years ago
How will this be monetized? Any pricing&#x2F;licensing info?
评论 #18196539 未加载
anonnelover 6 years ago
Where did you get the cool animation? It’s nice.
评论 #18199512 未加载
评论 #18196222 未加载
modzuover 6 years ago
thanks for sharing, but holy slowwww
评论 #18195994 未加载
评论 #18196156 未加载
aldoushuxley001over 6 years ago
Great Animation on the front page.
评论 #18199773 未加载
metasynover 6 years ago
What does pseudo-immutable mean?
评论 #18194253 未加载
victor106over 6 years ago
how does this compare with fusioncharts ?
评论 #18196203 未加载