These are chat archives for FreeCodeCamp/DataScience

4th
Dec 2017
Alice Jiang
@becausealice2
Dec 04 2017 00:03
I know
evaristoc
@evaristoc
Dec 04 2017 12:04

People

Retaking my courses in d3.js for a project that I have in mind.

I was recommending last time the use of the reusable pattern. I was preparing a summary of the pattern for personal reference and decided to share it.

Please keep in mind that this pattern might be an overkill if you want to prepare a quick demo or it is a only-once project. However I found it useful for going through several concepts in programming and JS.

//As in the Ian's course, the simplest way to put it was
// SUBSPACE
if (!d3.finalchart) {
    d3.finalchart = {};
};

// MODULE (THE REUSABLE PATTERN)
d3.finalchart.mychart = function(){
    //private variables
    var _data;
    var _cont;

    //closure: this is similar when using classes but also appropriate for JS async cycles 
    function chart(_container){
        //console.log("container", _container)
        //console.log("data", data)
        //OBS all the things are not going to be repeated (initializations, constructor section) go here!

        _cont = _container; //this is done only once

        rendering_function();
    }


    function rendering_function(){
        /*an update function here using the private variables*/
        //Chart Initialization
        //Enter
        //Update
        //Exit
    }


    //exposing properties and methods

    chart.rendering_function = rendering_function;

    chart.data = function(_d){
        if (!arguments.length) return _data; //REALLY? one return _data and the other chart? Ahhh! chart return itself with the new value attached to _data!! Uff... 
        _data = _d;
        return chart;
    }    

    return chart
}

var d;

//1. DISPLAY ELEMENT : SELECTION OF THE PLACE WHERE THE RENDER WILL OCCUR
var display = d3.select("definedhtmlelement")

//2. CONTAINER ASSIGNED TO DISPLAY ELEMENT
var container = display.append("svgorhtmlelement").classed("classname",true)

//3. INSTANTIATION
var instance = d3.finalchart.mychart()
instance.data(d)

//4. ASSIGNMENT OF CONTAINER TO INSTANCE
instance(container) //or container.call(instance)
There are few things I am not including in the pseudo-code above, like:
  • Dispatching
  • Functions for the updating of chart properties on the fly
Also, you will find this pattern in several places but depending on the taste of the programmer you will find some parts of the code either inside or outside the module as well as some different complexities.
Matthew Barlowe
@mcbarlowe
Dec 04 2017 13:12
My d3 project is driving me crazy
Josh Goldberg
@GoldbergData
Dec 04 2017 13:14
Is this the D3 project for FFC? @evaristoc @mcbarlowe
Matthew Barlowe
@mcbarlowe
Dec 04 2017 13:15
Mine isn’t no it’s just for an online class I’m taking I just don’t like d3 and I don’t know much JavaScript or front end stuff which just makes it even harder
Josh Goldberg
@GoldbergData
Dec 04 2017 13:16
What course are you taking? @mcbarlowe And what don’t you like about D3?
Matthew Barlowe
@mcbarlowe
Dec 04 2017 13:20
It’s just different lol basically the code structure is just different to me
It’s asynchronous to start
right now i'm trying to add a button to a choropleth map so that it switches data and i thought i'd just use the same function with a different scale and that's not working and I'm not finding any help online
Matthew Barlowe
@mcbarlowe
Dec 04 2017 13:26
@GoldbergData that’s basically why I don’t like it because I’m having a hard time with it lol
Josh Goldberg
@GoldbergData
Dec 04 2017 13:33
Lol. Understood
evaristoc
@evaristoc
Dec 04 2017 15:13

@GoldbergData @mcbarlowe

I agree with @mcbarlowe about the JS nightmare. But I think it has to do with the way is taught.

IMO, the language has been misused because its flexibility. You can just see the overwhelming number of packages: everyone can write one and there is no peer review about the quality of the package as in python or R. Some people might argue that this allows more innovation but I would prefer to have some order.

I think this anarchy on how people use JS has resulted in a misuse of the language and making concepts less clear. You find a lot of terrible examples and awful programming practices, to be honest, and a non-sense list of "new programming patterns" and definitions but when you see them closely it is someone trying to substitute an already well established concept or pattern.

Absolute rubbish. Then you have not a clear pattern to follow that is based on good practice. In opposition to that, think that in Python or Ruby you have the python- or the ruby way of programming, for example. The feeling is that there is not a clear cut of how to teach the language.

One way to go over that nightmare is to choose. There are lots of "schools" and ways of programming JS. I would recommend to select one at least and stick to it while learning, always being aware that there are other ways to programming the same thing.

@mcbarlowe share your problem here, in the visualization chatroom, or in the forum to see if someone can help. Your case is a common problem. If a button, it is likely you have to enclose the behaviour of the button inside of an existing method of the API you are using in order to control it.
evaristoc
@evaristoc
Dec 04 2017 15:23

@GoldbergData I am exploring making an html with interactive charts about my findings regarding the emojis, just for fun. If I manage to publish the article, I would like the html to be a complement to the content.

I might ask for help about the charts. I am not as good in d3.js as I would like. I already commented to @becausealice2.

Then I have a few ideas for other articles based on data. My plan is to write articles with accompanying html with more interactive data to complement the content.

Let's see.

First I hope the articles are good enough to pass the edition step.
Matthew Barlowe
@mcbarlowe
Dec 04 2017 15:54
ok i'll post my code when i get home
Josh Goldberg
@GoldbergData
Dec 04 2017 17:45
I won’t be much help on the d3 front. But I can help with visualization principles. @evaristoc
@evaristoc also thanks for sharing your thoughts on JS. Will be helpful when I start to learn
CamperBot
@camperbot
Dec 04 2017 17:47
goldbergdata sends brownie points to @evaristoc :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @evaristoc |http://www.freecodecamp.org/evaristoc
Alice Jiang
@becausealice2
Dec 04 2017 20:21
@evaristoc what do you mean you want to make an HTML?
Also, I am working on the write up of my D3 presentation that I promised. I finally have no pressing obligations! It's taking longer than I expected because I'm trying to put in time researching to make sure I don't say anything wrong, but it is being done!
Alice Jiang
@becausealice2
Dec 04 2017 21:23
Would it be worth my time to break it up into a few smaller pieces, do you think?
I'm still working on the technical part of it, no fluff, and it's getting a bit lengthy...