10 ms·
Britecharts: D3.js based charting library of components
- untilHellbanned 10y agoVery grateful for the open source solution. D3.js itself seems "reusable". Can you maybe explain the benefits of this another way and/or in greater detail? Is the most apparent benefit less lines of code? I'm not familiar as to why transpiling with Babel would be a selling point.
- forvelin 10y agoI think it is like C3.js [1] or Chart.js [2], just yet another layer of abstraction. If you don't want to do something extra-special, just a simple bar chart or so, those two were my go-to libraries. I wonder what does this one offer ? [1] - http://c3js.org/ http://c3js.org/ [2] - http://www.chartjs.org/ http://www.chartjs.org/
- swah 10y agoIIRC Chart.js is canvas based, and D3.js SVG based. What would you use for a very custom chart (something like a Gantt, say) ? D3 or something like snapsvg.io ? I used to like Raphael a few years ago..
- forvelin 10y agoQuite a coincidence but we just made a live Gantt chart with a raw d3+canvas and websockets in production, works quite well.
- swah 10y agoNice! This one https://frappe.github.io/gantt/ https://frappe.github.io/gantt/ looks good but simple, and D3 is probably better for doing customizations. Can you explain what you mean by D3 + canvas? A secondary view?
- Golodhros 10y agoHi forvelin, Britecharts use case would be essentially the same. If you need a simple chart, you can use one of them out of the box. Although if you know a bit about D3, you could easily fork the chart and customize it to your needs, making use of our Demo page as a sandboxed test space and our current test suite for keeping the quality of your chart high!
- jordache 10y agod3.js is a very low level api. Out of the box, it is not re-usable at the level of this and other charting libraries like c3 or highcharts.
- catacombs 10y agoLow level? D3 has some of the most jargony docs I've ever read for a JavaScript library. Not to mention the steep learning curve to make anything of value using available data, that is, if the data is formatted correctly. And don't even get me started on trying to make D3 charts responsive ;)
- jordache 10y agoWhat meaning of low level are you objecting to? You have to work with the DOM + JS at fairly low abstraction level in order to get an output out of D3. It is be definition reusable. It is extremely powerful though!
- zebraflask 10y agoThat's interesting, I've run across the "make the chart responsive" request before. My impression, after beating responsiveness into the code with a sledgehammer, is that it's really not meant for that. You can, but why? And, on most screens - even smartphones - they don't need to be responsive at ordinary dimensions. Usually, the request seems to indicate a fundamental lack of understanding of how D3 is meant to be used, or design/page layout flaws that get dumped on the chart code.
- ar15saveslives 10y agoD3.js is quite low-level library, it's basically a wrapper around SVG with some sugar like animations and enter/exit/update. > Is the most apparent benefit less lines of code? Yes! With "reusable components" you don't need to write (or copypaste) a line chart over and over. From their demos: brushChart .width(containerWidth) .height(300) .onBrush(function(brushExtent) { // Do something with the brushExtent }); brushContainer.datum(dataset).call(brushChart);
- coldtea 10y ago>D3.js is quite low-level library, it's basically a wrapper around SVG with some sugar like animations and enter/exit/update. While D3 is low level, it's in no way just a "wrapper around SVG with some sugar thrown in". Besides the tons and tons of helpers for scales, mapping, projections, calculations and all that jazz (including the animation stuff with enter/exit etc which you did mention), it's also a whole functional concept on top of the drawing primitives. One could theoretically even remove SVG and add another rendering backend with D3 with the same top level primitives.
- Golodhros 10y agoHi UntilHellBanned, Thanks, we are super excited about releasing this project as Open Source, it's been such a trip! Totally, D3.js is a fantastic low-level library and is super reusable in all senses (examples, low-level plugins, different reusability patterns). However, one of D3.js usability problems comes from its main advantage, how powerful it is! This means that D3 has a very low-level granularity and a huge API, making it hard for newcomers to create a simple chart for a dashboard or a one-off data viz. That's one of the reasons why we created Britecharts, to democratize D3.js charts, and at the same time, serve as a stepping stone to those who want to learn more about D3. In our mind, using Britecharts, a junior developer could render a chart quickly, just doing d3 selections. Then, she can start tinkering with one of the charts and even create a new one, learning d3.js in the process.
- deleted 10y ago[deleted]
- deleted 10y ago[deleted]
- jacobolus 10y agoRecommendation: put several examples of charts on the front page.
- vuldin 10y agoMultiple links to demos are easily accessible from the linked page. Better than most submissions.
- cessor 10y agoI felt the same way. The examples are accessible, but a better overview would be helpful.
- Golodhros 10y agoHi Cessor, thanks for the feedback! We are super interested to know what we can do better on our docs, any feedback would be great! What do you find is missing on the examples? Would you like more info about when to use each chart? Or more examples of the different configuration options?
- maccard 10y agohttps://eventbrite.github.io/britecharts/tutorial-kitchen-sink.html https://eventbrite.github.io/britecharts/tutorial-kitchen-si...
- Golodhros 10y agoThanks for the feedback Jacobolus! We will try to sneak something there soon! In your case, you would want it to see the 'looks' of the charts, or you would also want them to be editable?
- welder 10y agoHow does this compare to http://c3js.org/ http://c3js.org/, also a reusable charting library using D3.js?
- verbify 10y agoThere's also NVD3 - http://nvd3.org/ http://nvd3.org/ - https://github.com/novus/nvd3 https://github.com/novus/nvd3. And there's a product based off NVD3 called sucrose - http://sucrose.io/ http://sucrose.io/ and https://github.com/sugarcrm/sucrose https://github.com/sugarcrm/sucrose.
- mshenfield 10y agoThe blog post introducing Britecharts has a good discussion of the difference between it and other reusable charting options: https://www.eventbrite.com/engineering/introducing-britecharts/#comment-9860 https://www.eventbrite.com/engineering/introducing-britechar.... One other big difference is that Britecharts is compatible with the latest version of D3. D3 V4 underwent a major refactor to increase modularity. NVD3 is actively looking for volunteers to help them get there though - https://github.com/novus/nvd3#do-we-support-d3-v4x https://github.com/novus/nvd3#do-we-support-d3-v4x. Disclaimer: I work with the folks who develop Britecharts.
- Golodhros 10y agoThat's a great question, and we are preparing a write-up talking about the D3 libraries ecosystem at this moment. There is certainly a good amount of D3 libraries out there, and it could be frustrating to do some research on so many! Specifically, stacked against C3, Britecharts has a more 'D3-like' API, while C3 is a lot more declarative. This means that on C3, we will render charts by passing large configuration objects, while in Britecharts we strive to use a different API, chaining settings like we do on D3. Also, C3 hasn't been updated to D3 v4, and we can say it is an inactive project.
- mparr4 10y agoc3 is decent, but it is no longer maintained and with 675 issues and counting, it's the wrong choice for any new project. We've had it in production for a couple of years now. The best thing about it was it got us off the ground quickly but at this point I think we've likely sunk more hours into debugging issues and hacking features than it would have cost us to have built it with d3.
- sciurus 10y agoIt's cool to see my coworkers' efforts on the front page! There is some more sample code and charts in the introductory blog post at https://www.eventbrite.com/engineering/introducing-britecharts/ https://www.eventbrite.com/engineering/introducing-britechar...
- Dowwie 10y agoGenuinely curious-- why did they decide to create yet another charting library?
- rwholey 10y agoBritecharts was conceived a bit over two years ago. We needed something that was fully tested with the flexibility to freely customize the look and feel. There were (and still are!) plenty of great libraries out there nvd3, c3, highcharts, etc. but nothing that quite fit the bill for what we needed at Eventbrite at the time. So we rolled our own and rather than keep it to ourselves, we decided to share it with the community! My colleague posted a followup to a question on a blog post he wrote that goes into more detail about this topic if you're interested: https://www.eventbrite.com/engineering/introducing-britecharts/ https://www.eventbrite.com/engineering/introducing-britechar...
- rhizome 10y agoThe article mentions only d3 in comparison, what does Britecharts have that the ones you mention don't? UPDATE: Ah, it's (somewhat) in a third post: https://www.eventbrite.com/engineering/introducing-britecharts/#comment-9860 https://www.eventbrite.com/engineering/introducing-britechar...
- andybak 10y agoI hit this a couple of years ago and hoped things had improved. d3 was too low-level for my tastes (There are two types of programmers - builders and disassemblers. I'm the latter in that I like to start with something working and figure out how to take it apart). I toyed with Vega, nv3d, Bokeh and they all had great things going for them but nothing felt like it had nailed "making the easy things easy, and the hard things possible".
- usaphp 10y agoWhen I scroll on iPhone on this page: https://eventbrite.github.io/britecharts/tutorial-donut.html https://eventbrite.github.io/britecharts/tutorial-donut.html the chart keeps redrawing itself. Edit: actually every demo keeps restating itself when I scroll up and down on iPhone
- Golodhros 10y agoHi usaphp, Thanks for the bug report! I will create a ticket for it and check it out soon. From what you said, it seems scrolling is triggering a viewport resize, so we will review our viewport resize listener on the demos (it's not really inside Britecharts). Thanks again!
- amingilani 10y agoSame on Nexus 6P Android 7.1.2 Chrome
- Golodhros 10y agoIt should be fixed!
- asabil 10y agoSlightly off topic, but after discovering Vega[1], I can't quite imagine using a template based charting library again. [1] https://vega.github.io/ https://vega.github.io/
- earlyriser 10y agoWow, this is great. Thanks for sharing the link.
- mholmes680 10y agoOh wow, thanks for this! Side note: Anyone know why "calendars" don't qualify as part of these packages? I just have a series of data and want to render it on a calendar-graph instead of some typical data rendering... too abstract?
- lucisferre 10y agoHave you looked at ECharts? https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-calendar https://ecomfe.github.io/echarts-examples/public/index.html#...
- mholmes680 10y agoExactly this, thanks!
- tenken 10y agoThe declarative markup is interesting for custom datasets. But without some sort of UI builder it's unusable by clients.
- capkutay 10y agoHow does this compare to highcharts? Both use a JSON configuration to generate charts. https://www.highcharts.com/ https://www.highcharts.com/
- ConfucianNardin 10y ago
- magsafe 10y agoCan this be used in React Native apps?
- Golodhros 10y agoHi Magsafe, Sadly not, and we don't have a mid-term plan to do it. From my research, the only charting library that supports React Native at the moment is Victoryjs: https://formidable.com/open-source/victory/ https://formidable.com/open-source/victory/
- aw3c2 10y agoOh nice, finally a D3.js based charting library of reusable components!
- mgkimsal 10y agoWhat's the accessibility story with this? And, while we're at it, what's the accessibility story for other charting tools? Are there good open source charting tools that can be used in section 508 situations?
- Golodhros 10y agoHi Mgkimsal, That's a great question! We at Eventbrite are looking into improving our accessibility, our designer Sun is pushing for it on this issue: https://github.com/eventbrite/britecharts/issues/168 https://github.com/eventbrite/britecharts/issues/168 In that link you can find some references about accessibility on other libraries and best practices.
- mgkimsal 10y agothanks. accessibility has been an increasing theme of several projects over the last 2-3 years, and it's now something I know some of my clients want to have answers for before we commit to certain components.
- Golodhros 10y agoMakes sense! It's also good to know that this feature is such important!
- saltysalty 10y agoWhat about trees? I think none of the wrappers around d3.js support trees. That's one area you guys could improve and differentiate from others.
- Golodhros 10y agoHi Saltysalty, Thanks for the feedback! Totally, we want trees too!! Recently we saw an application for them in our product, so we will be pushing to include this chart on Britecharts soon!
- gasbag 10y agoSomeone else linked Sucrose, which has a tree chart. Looks like the expand/collapse nodes isn't working though.
- deleted 10y ago[deleted]
- Dowwie 10y agoAnother viable addition to https://github.com/fasouto/awesome-dataviz#charting-libraries https://github.com/fasouto/awesome-dataviz#charting-librarie...
- markovbling 10y agoI've had a great time using DC.js - highly recommended... It's a wrapper around both D3.js and crossfilter.js and makes building linked interactive charts / dashboards really easy.
- myrryr 10y agoDC.js is amazing. I am not sure if it will get d3v4ed any time soon though.
- krikou 10y agoHumbly tried a polymer/webcomponents approach for composing similar vizualisation than dc.js. it uses d3v4 and multi-chart (https://www.webcomponents.org/element/PolymerEl/multi-chart https://www.webcomponents.org/element/PolymerEl/multi-chart) as a charting library: https://www.webcomponents.org/element/PolymerEl/multi-verse https://www.webcomponents.org/element/PolymerEl/multi-verse
- yllus 10y agoThis is terrific work - like many others I found myself needing to use Chart.js or some other abstraction layer on top of D3 in order to get anywhere. Britecharts seems to have everything its competitors does, but also looks utterly fantastic from a visual point of view. Well done guys and gals.
- Golodhros 10y agoThanks a lot!! :)
- mrborgen 10y agoAwesome! Do you have an simple one page example where you're pulling the lib from a CDN?
- Golodhros 10y agoIt's coming! We have an issue with our webpack configuration and the way we create the 'whole' bundle, but it will be ready soon!
- metafunctor 10y agoI spent a few moments trying to use this as a standalone JS library for showing a simple chart, but couldn't make it work. I cannot see anything useful being exported from dist/bundled/britecharts.min.js. I'd prefer to simply load d3.js, then britecharts.js on top of that, and be on my way. This is how metricsgraphics.js worked, and it was super simple to take into use.
- Golodhros 10y agoHi Metafunctor, thanks for checking out Britecharts! I am sorry that you just find our current bug with the build! We have an issue about that, and we will be trying to fix it ASAP. I totally understand, having all the charts available in one file is an important use case. In the meanwhile, you can use the individual chart bundles, like '/dist/umd/bar.min.js' and either load it with require/commonJS or load it with a script tag (it would be assigned to document.britecharts.bar).
- deleted 10y ago[deleted]
- deleted 10y ago[deleted]
- mstijak 10y agoSlightly off topic, but I'm curious what is the common use of JS charting libraries these days? Is it for making dashboards with simple graphs or complex data visualizations? I'm an author of a JS charting library myself, so here is something I'm proud of - https://worldoscope.cxjs.io/8nhpbo6 https://worldoscope.cxjs.io/8nhpbo6
- eat_veggies 10y agoI'm building a web app for tracking your steam gaming habits. I don't really play games anymore so my profile is boringly empty but here's a page for a guy I know who plays a lot: http://162.243.163.202/profiles/76561198074712603 http://162.243.163.202/profiles/76561198074712603 I'm using chart.js but since I only have two charts so far I'm free to change my charting library. Maybe even to OP's Britecharts or your library. Here's the source btw: https://github.com/veggiedefender/steamlog https://github.com/veggiedefender/steamlog
- mstijak 10y agoThanks for the reply. I guess that would be dashboard use. As a Steam player myself, how can I see my own stats? I tried searching by my username, but couldn't find it...
- eat_veggies 10y agoIt'll only track your stats if you're signed up, so hit the log in button! Steam doesn't provide any history data (either they don't collect it or they don't share it) so I have to manually request the profile of each user I'm tracking from their API. relevant logging code: https://github.com/veggiedefender/steamlog/blob/master/steamlog/logger/log.py https://github.com/veggiedefender/steamlog/blob/master/steam...
- 91bananas 10y agoYour stuff looks very nice.
- bigger_cheese 10y ago
- skocznymroczny 10y agoI read Breitbart at first.
- antoaravinth 10y agoWe are currently writing a BI report module and want to use any open source library for creating charts. This looks really nice. But I want to understand whether we could able to extend it to create say custom chart? Is that possible? And also we can extend it to support say drilldown charts?
- Golodhros 10y agoHi antoaravinth, thanks for the question! Totally! You could fork the library and modify the charts if that's what you need. The source code is based on the reusable API (https://www.eventbrite.com/engineering/leveling-up-d3-the-reusable-chart-api/ https://www.eventbrite.com/engineering/leveling-up-d3-the-re...), and it should be easy for D3 developers to understand the code and extend it. Our development environment also provides with the demo pages that can be used as a sandboxed context, and you can make use of our current tests to keep the code well tested! Regarding the drill down charts, in theory, is possible!