HeyjinJS

I gave a talk with Andre about “Using Ember to Make the Seemingly Impossible Easy” at EmberConf this year. Here’s the Video and Slides.

One of the things I spoke about was “Ember to make working with D3 easy”. There are many reasons why we should use D3 with Ember for Data Visualization, but in this talk, my focuses were 1) productivity 2) Ember as a framework to nudge your code in the right direction.

Now I know why D3 jelly tastes so good with the Ember.js peanut butter. #emberconf @heyjinkim @ramcio pic.twitter.com/2KSbgOVSXe

— Tom Dale (@tomdale)

March 25, 2014

Great write ups:

by Allison Sheren from Other Great Things I Learned At EmberConf

The second aspect they spoke about were visualizations. This is basically helping people understand the story behind the data. In order to do this effectively, they used an ember component (something that was frequently discussed throughout the conference). Basically, in an ember component, they encapsulated D3 code. They did this by defining a components, adding the D3 code into it which allowed them to draw a donut chart. I’d never heard of D3 code before but the main point was that by wrapping this code into an ember component, a developer can change/utilize the ember component to make the changes they need to instead of having to dive into the D3 code.

by Bill Heaton from We are EmberConf 2014

Frameworks are Designed to Nudge You in the Right Direction

Data visualization can be a complex chore for a team with varying strengths. Ember Component can be used to encapsulate complexity of using a 3rd party library like D3 for pretty data on screen. Application code can be built with more than one recipe to deliver a different experience by only changing the dependency for a router file. I find that once I get the concepts of using components to isolate behavior and reuse it in various contexts that is a very powerful and valuable convention. And Web components are in the not so far off future already. Welcome to the future :) (Not really.) But I do think that using Ember components is a peek into what will likely be a shared way build reusable components on the Web in general.

@ember_princess and @ramcio presenting Make the Seemingly Impossible Easy with #EmberJS at #emberconf pic.twitter.com/LmDut39t8w

— EmberSherpa (@EmberSherpa)

March 25, 2014

Going through @coderberry’s “The Unofficial Ember Testing Guide” (again) while writing my test code. Very helpful! https://t.co/9CDnJDLn0V

— Heyjin Kim (@heyjinkim)

April 2, 2014

Ember Testing JSBins from the slide by @coderberry:

• Super Simple Example
• Using All Helpers
• Custom Test Helpers
• Unit Test Routes
• Example of testing controller with needs
• Unit Testing Components
• Example of Unit Testing a ED Model
  
  
• JohnKPaul Component by @johnkpaul
  
  
  

When visualizing data on the web, there are two things that we need to think of, the DATA and the DOM.

D3 is the go-to visualization library because it’s a flexible and data-driven approach to DOM manipulation; D3 does the complicated math so we can think more about data and visualization.

Ember is a MVC javascript framework for creating ambitious web applications. But, why should we use Ember with D3 for DATA and DOM manipulation? Ember gives you tools to easily manage things like async requests and the MVC architecture helps to manage complexity.

Let’s see the reasons why we use D3 and Ember.

Keep reading »

Testing D3 Donut Charts in Ember Component:
https://twitter.com/heyjinkim/status/453658361209561089

Bootstrap Dropdowns using Ember.js Component:
https://twitter.com/heyjinkim/status/398237979908374528

Autocomplete Widget using Ember.js Component:
https://twitter.com/heyjinkim/status/392376683430289409

FadeIn effect when adding rows to a table using Ember.js ArrayController & CollectionView:
https://twitter.com/heyjinkim/status/390986446049263616
https://twitter.com/heyjinkim/status/391002957518344192

Ember.js Component vs Angular.js Directive:
https://twitter.com/heyjinkim/statuses/387362357124423681

Number Counter with Ember.js Component:
https://twitter.com/heyjinkim/statuses/379966407594631168

Reusable D3 charts with Ember.js Components:
https://twitter.com/heyjinkim/statuses/363367046391676928

D3 Donut Charts with Ember.js Component:
https://twitter.com/heyjinkim/statuses/362342802857791488

Truncate Helper:
https://twitter.com/heyjinkim/status/387045229498335232

I recently read a good article called D3.js in Angular.js Directive from DashingD3 and thought it would be interesting to recreate the example using Ember.js components.

Here’s how I created the example using an Ember.js component:

Reusable D3 charts with Ember.js Components

As you can see in the JSBin, we have two different bar charts with distinct widths and heights. (Direct Link)
To implement more bar charts, simply add the component to the application template again:

{{bar-chart width=960 height=500 data=content}}

Mike Bostock wrote an article, Towards Reusable Charts and the entire time I was reading it I thought about Ember’s components.

In his article Mike says:

“Internally, the chart implementation becomes slightly more complex to support getter-setter methods, but convenience for the user merits additional developer effort!”

I’d like to propose that using Ember.js Components is one of the best ways to encapsulate reusable charts. Ember accomplishes the same thing as Mike’s example, but it feels more natural and less complex doing it in Ember because getter and setter methods are a fundamental part of Ember.

For a quick comparison of bar charts using different frameworks:

• D3
• D3 and Angular
• D3 and Ember

Here’s another example that I created Donut Charts:

I’m baking a lot of donuts with Ember.Component: http://t.co/7pCxxWxndc #emberjs #d3js #donutchart

— Heyjin Kim (@heyjinkim)

July 30, 2013