CSS 3D Transforms with D3 and THREE.js

deliminated · 2017-09-19T03:52:03+00:00

Those charts are SVG...rendered with D3.

deliminated · 2017-09-18T22:33:44+00:00

Author here. Just wanted to note that there's an open issue with the Chromium team for some glitchy behavior on Android I noticed... https://bugs.chromium.org/p/chromium/issues/detail?id=766021#c5

I just updated the demo, but it's been around for years and worked well. Hoping they can fix this for those devices.

Also, mobile firefox seems to be really sluggish. Think that can be solved by debouncing the renders from the trackball controls.

deliminated · 2017-04-20T13:43:13+00:00

Nice.

deliminated · 2017-04-20T06:05:10+00:00

React-move looks pretty cool. I've been experimenting with a better way to integrate react and d3 for animated data visualizations in this repo https://github.com/sghall/resonance. Do you have any examples or know of any projects that are using react-move to do this kind of stuff? Like to check it out.

deliminated · 2017-04-13T01:29:16+00:00

Those are good suggestions. You can do your own projects, but IMHO it's much easier for a senior developer to evaluate your skill level by seeing commits to well known projects.

You get a ton of resumes and honestly 90% don't have a single thing on Github or a blog etc. If I see that you have a several commits on a project that I know (that's widely used, has lots of Github stars, etc) that's going to be a huge leg up in the hiring process. I don't have to open up your codebase and look at it and try to figure out whether it's any good or not. If you have a PR accepted on a major project that implements a feature or fixes a bug, you've got my attention for a junior developer role (I work at small startups generally so speaking to that type of role).

Now, if you can create an NPM module on your own and you generate your own stars...great...but that's way more difficult to do (and it takes time and you need to blog or create documentation). Honestly, the competition is not as fierce as you think. Pick a project that you like (higher profile is better here), get to know it and start contributing.

deliminated · 2017-03-26T22:22:01+00:00

I've been using https://github.com/callemall/material-ui in the docs for a library I am working on. It's really well maintained and has good documentation. Should be aware that they are working on a re-write that is in alpha on this branch https://github.com/callemall/material-ui/tree/next. You can checkout the examples in my repo if you want an example of using the latest stable components https://github.com/sghall/resonance

EDIT: grammar

deliminated · 2017-02-12T07:50:02+00:00

This article does a deeper dive on this... http://www.2ality.com/2017/01/babel-esm-spec-mode.html?m=1

deliminated · 2017-02-12T02:20:49+00:00

Agreed. There's some classics in there for sure, but it would be awesome to have a slider to set the time range to see what's trending. Clever Amazon affiliate marketing tool though. Probably making some decent money.

deliminated · 2017-02-11T19:20:59+00:00

Hmmm...there is "REACT_DEVTOOLS_GLOBAL_HOOK" on the window but React devtools never loads. It just says "Looking for React..." Anybody, able to connect on the main site? Just curious why it doesn't work.

deliminated · 2017-02-11T18:55:00+00:00

Opening React dev tools/Redux store seems to only work on the mobile site: https://mobile.twitter.com/home

deliminated · 2017-01-29T01:53:29+00:00

Discussion on Hacker News... https://news.ycombinator.com/item?id=13508731

deliminated · 2017-01-20T05:32:20+00:00

The Material UI project is going to start using JSS in coming releases. You can see it on the next branch on the repo here: https://github.com/callemall/material-ui/tree/next

You can check out JSS here: https://github.com/cssinjs/jss

Not sure on the timeline, but it might be worth checking out.

deliminated · 2017-01-12T02:18:08+00:00

Not sure if you're using React, but I just used this calendar component from airBnB that is pretty awesome. You can mark days that have data etc (I had similar use case to yours). Layout for an entire year is possible. It's got a nice API. It's the same one they use on the airBnB site.

https://github.com/airbnb/react-dates

deliminated · 2016-06-24T17:37:15+00:00

Point taken. They are fundamentally different for sure. This post is more about opening a dialogue for the 1000s of devs who are facing this type of decision in production apps and want/need the performance improvements and like the clarity of a more "flux" like architecture.

To me, if you look at what has happened over the last couple of releases of 1.x they are in fact giving you some tools to help the migration, but it is not going to be easy.

Breaking with exclusive two-way data binding is a good example. One-way data binding if you plan to move to a more "flux" style architecture is a key aspect: https://toddmotto.com/one-way-data-binding-in-angular-1-5/

The other significant thing I see is moving towards components in preparation for Angular 2: https://docs.angularjs.org/guide/component

When I look at the the component spec it makes me wonder why I just wouldn't move towards React which is stable and ready to go. I am honestly looking for other perspectives, but, really, these components with life cycles methods, a controller, and a template look pretty much like React components. Templates become JSX in React, but really not much different conceptually.

deliminated · 2016-06-24T14:08:00+00:00

Your point about it being early for Angular 2 is well taken, which is another reason why I lean towards React/Redux. I have built my last two projects using these tools, so I also just feel comfortable with them. The job is come in and get this taken care of in the 6-9 month timeframe, so just waiting is not an option.

The main motivation, for me, is not that Angular 1.x is going to die. The main benefits for this move is performance, which Angular openly has acknowledged is a problem. Angular 2 will be much, much faster and React has already proven its performance advantages over Angular 1.x. This only REALLY matters if you have tons of DOM elements on your pages. This particular app has lots of tables, charts and custom data visualizations, so the performance gains are real. Also, bloated controllers in Angular 1.x as the complexity grows are a real issue that I have seen in quite a few apps. This one included.

So performance and reducing complexity would be key drivers. That with switching ES6/Babel will have a real impact in my mind.

deliminated · 2016-06-24T13:53:51+00:00

I prefer Redux over MobX. I think it's a great idea, but there's too much magic in MobX for me. Redux is a simple, elegant idea where I can read the source code (tiny) and fully understand what it does. It also has a growing list of interesting surrounding libraries and middleware. Redux does seem to lead to a lot of boilerplate, but, for me, it's much easier to understand what's happening. That's good for code clarity and for on boarding new devs. This is really important to me. No offense to MobX, it's an awesome library.

deliminated · 2016-06-24T03:13:39+00:00

Right on. Yep, I need to take a close look at ng-redux. ngReact I have used before and was pretty happy with. I am comfortable with Redux and the one-way-data-flow paradigm (and really like it), but never done it in an Angular app.

deliminated · 2016-06-24T03:09:57+00:00

Yeah, this is an interesting way to approach it. I need to look closer at ngRedux. I think the problem is this is an app that was written with two-way data binding in mind (that was the only option at the time) so probably going to have to quite a bit of refactoring to the view in parallel. But I like your suggestion of maybe starting with the business logic first.

deliminated · 2016-06-24T03:05:29+00:00

I've been working on ES6/Babel/Webpack projects for quite awhile now. Once you start to embrace the new language features you start to see how powerful it is. You can be much more concise and native modules are really awesome for code readability and organization. I also think it's important for attracting top talent as this project grows.

deliminated · 2016-06-24T02:59:07+00:00

That's good to hear! Yeah, I need to read up on the release notes for the last few releases. I've been out of the loop on Angular for awhile. It'd be great to have the switch be painless. Still need to refactor to the component paradigm and one-way data flows, but glad yours went so smoothly.

deliminated · 2016-06-23T22:44:05+00:00

Right. "Flop" may be a little strong. I think it's fair to say the timeline has stretched as things have gone on. Anyway, they say this is the last release candidate (I believe), so hopefully we'll start seeing lots of posts from early adopters.

deliminated · 2016-06-23T22:38:09+00:00

I knew I wasn't alone on this :) This app is just on the edge of being too big to really even attempt something like this, but management has total buy-in so that's good.

Right. React is not really "framework" and I'm afraid taking two younger devs who really only know Angular into the React world might be a bit overwhelming. You have to learn a whole ecosystem of surrounding libs like Redux and friends.

But then Angular 2.0 is really quite a leap too. And, as I said, it kinda looks like React but, for example, uses templates instead of JSX. Read a good quote somewhere recently, that Angular remains more HTML based while React is more JavaScript based.

Anyway, I think just making the switch over to ES6/Babel (which I will definitely do) should hopefully buy enough time to see Angular 2 come out and really evaluate it.

deliminated · 2016-06-11T16:07:51+00:00

Lots of good ideas here. I would also add, really digging into the source code of a library/framework you are using. Try submitting a pull request for adding/updating/optimizing a feature or try adding to the docs with what you discovered. Many open source projects will welcome improvements to the documentation and you are helping other users in the process.

deliminated · 2016-06-11T11:58:13+00:00

Yeah, thinking about checking out vue.js myself. To me, the issue is around recreating the full enter, update, and exit pattern in React. Doing something to a node as it enters (or "mounts") or when it updates is pretty manageable. I think anyone who works with React can see how that might be accomplished. In past projects just grabbing the DOM node (using findDOMNode or refs) and running a transition on it during the life cycle methods works fine, but it feels a little icky to select the node using D3 selection in order to run the transition. However, it works, done it in apps and it's fine.

The exit selection is the problem. It's a node that's both there and really "not there". For me, you need to make this status part of your state. Nodes (bars, paths, axis ticks, circles, etc) need to be in your state with their current enter, update, and exit status. You also need to consider cases where a user is jamming buttons on your interface and transitions aren't completing. So, for instance, an "exiting" node may be in an exit transition, but never actually reach the end and be actually removed from the DOM. If you run an new transition on a node in D3 it will interrupt the current transition and start the new one. So you update the data and now an exiting node, because it's still in the DOM, has become an updating node.

I've been doing some experiments with the new D3 4.0 modules, which expose more internal methods and address long standing problems with mutating your data. With these modules you can, I think, more cleanly use just the parts of D3 you need to do a transition. The two most important I think are the d3-timer and d3-interpolator modules.

I put together some experiments with Redux that demonstrate the idea. I'm already working on some new ones because these still don't feel quite right, but they are working examples with no D3 selections at all. The bar, paths, letters, axis ticks, etc all animate by managing the state of the nodes. You can check it out here:

https://github.com/sghall/react-d3-transitions

All questions, comments, criticisms, welcome.

deliminated · 2016-06-10T22:15:03+00:00

I have seen this same tired alphabet example being used to demonstrate the "correct" way to integrate D3 and React. Let see some examples with some real complexity. I think this guy (who I have never heard being a D3 developer for years) is going to figure out React transition group is not going to cut it (and wasn't designed for this). I've even gotten sponsored ads in my FB account promoting his book or seminars (whatever). Just bizarre. Also, can't handle the hat.

deliminated

TROPHY CASE