D3.js : SELECTION

I am totally newbie in D3, so don’t expect me to share an advance tutorial for D3 XD I am still learning and this post would just be my another self-notes, wherever or whenever i need it :’)

This would be my first post about D3, and i just wanna share about what i think it’s important if you wanna start learning D3. Well, actually when i first try it, just look at the library, check the examples, download the code and try to run it inside my project. And it works fine. But, when i wanna go deeper about D3, like, you know, start to customize the view, i need to learn more about it and what i got first, i think about it’s Selection; I think it’s an important thing since to modify element, syling or adding event/action, i need to learn how i make selection to the element i want first.

Well, i’m not start by ‘how to make the chart/element’ bcz, as you know, i just download some chart already on github or bl.ocks.org/d3indepth XD sorry. But if you interested, you can visit this helpfull article right here : https://www.dashingd3js.com/

Okay, so we’ll start. I am already make the graph, like forced-directed graph, consist of nodes and links (the line to connect the nodes). And, i start to customize it. D3 selections allow DOM elements to be selected in order to do something with them, be it changing style, modifying their attributes, performing data-joins or inserting/removing elements. (http://d3indepth.com/selections/) – btw you should visit the site, it really helpful. In D3 we use SVG element.

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a family of specifications for creating two-dimensional vector graphics. Vector graphics are not created out of pixels. Vector graphics are created with paths having a start and end point, as well as points, curves and angles in between. Since Vector Graphics are not created out of pixels, they can be scaled up to larger or smaller sizes without losing image quality.

SVG images and their behaviors are defined in XML text files. The XML text can be included in an HTML document. This text means that images can be created and edited in a text editor. Also, since the DOM includes XML as part of the DOM specification, we can use the DOM Tree to access and update the structure, content and style of SVG Images.

SVG comes with a basic set of shape elements:

  • Rectangle
  • Circle
  • Ellipse
  • Straight Line
  • Polyline
  • Polygon

Okay, i already make a force-directed-graph that looks like this :

D3 – forced network

Okay, it’s only circles (nodes) and links btw. But if you learn D3, you will need to check the element inspector ( i prefer use chrome). Why? Because it will help us to make selection. As you see on D3, we just write code like this :

var svg = d3.select("svg"),
width = +svg.attr("width"), height = +svg.attr("height");  

var node = g.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes_data)
.enter()
.append("circle")
.attr("r", radius)
.attr("fill", circleColour);

and the result is as you can see above ( on the picture), but then we check inspector, and we got like this :

circle d3

Elements

You can see the <g> tag , it is the SVG Group Element is a container that contains all child SVG elements defined inside of it and that share the same attribute. In the example, it have 2 groups. One contains lines and the others contain circles. And there’s many circle elements that created with D3, we use .append("circle")and its populate the element as we can see in the element inspector.

D3 has two functions to make selections d3.select and d3.selectAll.

d3.select selects the first matching element whilst d3.selectAll selects all matching elements. Each function takes a single argument which specifies the selector string. Examples, we want to select all the circles, we can use d3.selectAll(“circle”); And when we use d3.select(“circle”); it will select the first matching element, only one, the first one. In my example, it is the line that i blocked. We can also select item by it class like d3.selectAll(“.classname”);

We can also updating the elements with functions, like this :

d3.selectAll('circle')
  .attr('cx', function(d, i) {
    return i * 100;
  });

The function typically accepts two arguments d and i. The first argument d is the joined data and i is the index of the element within the selection. If we want to update elements in a selection according to their position within the selection, we can use the iargument. For example to position some rect elements horizontally we can use: (http://d3indepth.com/selections/)

When i added events,  i add a function and i want to change radius of the element i clicked (for example) i can use “this“, so it will look like :

d3.select(this); and i can also modify element, like d3.select(this).attr('radius', 10);

d3 styling change radius

d3 styling change radius

We can also make selection like this:

// Add .selected class to 3rd circle
d3.select('circle:nth-child(3)')
	.classed('selected', true);

// Set checked property of checkbox
d3.select('input.robot-checkbox')
	.property('checked', true);

So it will just modify the element clicked, and change radius to 10.  You can also adding text, title, or changing the color, add borders etc, but i will write more about modifying element and styling on my next post ! See youu very sooon 🙂

Advertisements

Dependency Injection and Reflection

Yesterday i got some discussion with my Uncle, about mobile application (again) and got some issue about the app i want to build. Then the discussion drives us  into “Dependency Injection and Reflection“. My uncle said, i have to minimalize my code, he said i have to ensure that i  split the code in individual component that can be run without have any dependency with the other component.  Separate it.

Try dependency injection and reflection.” That’s the code my uncle said, and then it means”cari dan pelajari sendiri” As usual.  Oke, feni, you’re strong enaugh.

So let’s start gooling and found some good artcile. I don’t mind what programming language to describe dependency injection, i also use different language to my different apps.

“Jangan mengotak-kotakkan dirimu hanya dalam satu bahasa pemrograman, yang penting paham logicnya. Insya Allah yang lain juga bisa. Fenifa 2017”

In software engineering, Dependency Injection is a design principle in which code creating a new object supplies the other objects that the new object depends upon for operation. This is a special case of inversion of control. Often a dependency injection framework (or “container”) is used to manage and automate the construction and lifetimes of interdependent objects.

A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. The service is made part of the client’s state. Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern.

Dependency injection separates the creation of a client’s dependencies from the client’s behavior, which allows program designs to be looselycoupled and to follow the dependency inversion and single responsibility principles. It directly contrasts with the service locator pattern, which allows clients to know about the system they use to find dependencies.

An injection, the basic unit of dependency injection, is not a new or a custom mechanism. It works in the same way that “parameter passing” works. Referring to “parameter passing” as an injection carries the added implication that it’s being done to isolate the client from details.

An injection is also about what is in control of the passing (never the client) and is independent of how the passing is accomplished, whether by passing a reference or a value.

Dependency injection involves four roles:

  • the service object(s) to be used
  • the client object that is depending on the services it uses
  • the interfaces that define how the client may use the services
  • the injector, which is responsible for constructing the services and injecting them into the clien

(source)

Dependency injection simply means receiving collaborators as constructor parameters instead of fetching them ourselves. (source)

Reflection is the ability to introspect and reverse engineer functions, classes, methods and interfaces during runtime. This makes it possible to find specific information about your code, such as a classes internal properties, methods & even doc blocks for those methods.

One of my favourite uses for the Reflection API is to have all of my class dependencies automatically injected when possible. If you’re new to dependency injection, then don’t worry, it’s quite simple. This makes my code cleaner to look at, and far more maintainable as the codebase grows. We’ve recently updated our company starter theme/framework to do just this. I figure it’s something I can show you how to do to. The full code & example can be found at the bottom of this post (TL/DR). (source)

#BukuSakti Programming

Uhmm, yang kali ini jangan ditanya, sabtu2 gini, ya udah pasti karna banyak kurang kerjaan :3 Tapi lagi nggak usil nih.. Jadi pengen sharing aja, yaa, kerjaan saya udah kelar buat yang hari ini 😀

Dan, jadi teringat sama yang selalu kasih semangat 😀 Thankful banget buat mereka-mereka, orang-orang yang saya kagumi. Hahha, ya saya in ikan masih labil, sifat jeleknya sih that “I let my fear to limit my choices”. Hilangkan! Hilangkan! I have to have no fear!

Eh, tapi selalu ada yang menyemangati saya 😀 Emm, orang2 yang saya sayangi *ceile* tapi lebih tepatnya yang saya kagumi 😀 Rasanya, dapet semagat dan kekuatan baru aja. Kalo mereka yang saya kagumi itu aja percaya sama saya, masa saya ga percaya sama diri saya sendiri? Mereka saja menyemangati saya, lalu mengapa saya tidak berhenti meragukan diri sendiri? Jadi saya selalu berusaha bertahan, belajar, dan mengembangkan kemampuan. Dan karena akhir-akhir ini saya suka menulis, jadi saya tulis saja semua yang perlu saya bagikan :3

6863_20121027_162835_Eminem-Quotes-eminem-20796679-1024-768[1]

Eh, betewe, saya punya kumpulan kalimat-kalimat penyemangat dari orang-orang yang saya kagumi itu, Semuanya saya rangkum dalam otak saya, dalam tulisan saya, yang saya namakan Buku Sakti, padahal bukan buku sih :3 Tapi kan isinya petuah2 penting dari para sesepuhku terdahulu *ehh*

“wes toh, yen kowe ngono aku yakin kowe isoh, tenang aku yen sing garap kowe ki, genah iso” ~ ini pertama yang saya dapat dan selalu saya dengar karna sering sekali d ucapkan, terutama itu pas saya ngerjain kmm dan TA. Kok gampang banget ya bilang gitu ? padahal saya aja gak tau saya ini bisa apa engga waktu itu,.. namun Alhamdulillah, saya bisa! Thx mbak Putri Perty , mumumu :*

“kamu itu hanya kurang jam terbang nduk. nanti juga bisa :)) selemot apapun , yen wus kulino lak was wus” ~ ini dari bang Ochi, penyemangat saya sampai saat ini.  saya masih harus menambah jam terbang, sampai terbiasa, biar nanti jadi kulina 😀 #ehh

“Kadang dunia script, emanga bikin rumet ketika harus berhadapan dengan sesuatu yang sama sekali belum paham alur n maksud dari script tersebut. Tapi ketika kita bisa memecahkanya, satu ilmu bertambah, satu kebanggaan bertambah, satu tawa muncul  “hahah..kau (script) sudah aku taklukkan”.” ~ nah, kalo yang ini dari senior programmer saya di kantor, namanya mas nanang. Emm, kalo itu saya nemu aja dari webnya, ceritanya iseng2, pengen tau programmer2 senior, nyari2 dan nemu beberapa webnya senior saya, dan salah satunya yang ini, saya baca2 dan.. yaa, ketemu kalimat itu dalam postingan yang judulnya : “Duniaku Dunia Script!!” Wah, dari judul aja udah sangar yaa! 😀 ~ haries.web.id *eits, tapi ada bacaan galau juga disana, curhatannya dia sih, tapi lucu dan bikin ngakak, wkwkw.. *peace*

“jangan nyerah..jarang loh ada programmer cewek hehehe.. tunjukin ke cowok, klo cewek juga bisa jadi programer hihihihihihihi..” ~ nahh,, in idiaa, yang iniiii….in idari satu2nya senior programmer saya yang cewekk.. uwaaaaa…. Mbak Ruth namanya, ya itu dia yang ngajarin saya baaaaannyaaakkk banget masalah programming dan yang selalu berbaik hati membantu saya kalo saya lagi ada masalah 😀 Pokoknya banyak deh, dan itu dia, mari kita tunjukkan bahwa cewek juga bisa jadi programmer mbaaak 😀 Semangaaatt!! Ngga boleh kalah, ngga boleh menyerah pokoknyaa!!

quotes

Hhhe,, ya itu dia kalimat-kalimat penyemangat buatku, terlihat sederhana sebenernya, tapi bagi saya begitu berarti, yang ga penting buat kita, belum tentu ga penting buat orang lain kan ? *efek film ~ catatan harian si boy ~ Oiyaa,, ada satu lagi, kalo ini quote, dan quote ini saya dapet dari mbak Kiki, yang udah banyak saya certitakan di Personal Blog saya,   kakak tingkat saya sewaktu kuliah, temen satu kost yang selalu nyemangatin saya buat berangkat Pengajian, sekarang di Surabaya, tapi kemaren sempet ketemu lagiii,, seneng banget, pas itu dia pas maen ke Jogja 😀

Saat orang lain tidur, kita bangun..
Saat orang lain bangun, kita berjalan..
Saat orang lain berjalan, kita berlari..
Saat orang lain berlari, kita sudah sampai tujuan 🙂