imkarin / icov-interactive-concernschema Goto Github PK

Example

d3.xml(data).then((document) => {
   ...

    node = node.data(nodes).enter().append("circle")
      .attr("r", 20)
      .attr("fill", nodeColor)
      .on("mouseover", function(d) {
        div.transition()
            .duration(100)
            .style("opacity", .9);
        div.html( "<h1>Div Title</h1>"... )
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 50) + "px");
      })

Why is this an issue?

There are several anonymous functions written in .then(), after the d3.xml promise. This is bad practice for several reasons:

• Using inline, anonymous functions make your code hard to read and understand for others.

• These function declarations now depend on the d3.xml promise. In other words: if the XML-data somehow fails to be loaded, these functions won't be declared either. If you have other code depending on these functions, this code won't work anymore.

• It's better to turn anonymous functions into named functions, so they can be re-used later without having to copy code. DRY coding is happy coding! 😉

What's a better option?

Use named functions that you can reuse. Declare these functions in the destined section of the code, and call them by their name when you need them anywhere else in your code.

d3.xml(data).then((document) => {
   ...

    node = node.data(nodes).enter().append("circle")
      .attr("r", 20)
      .attr("fill", nodeColor)
      .on("mouseover", showDetailsPopup)
}

// Functions declarations
function showDetailsPopup() {
    div.transition()
        .duration(100)
        .style("opacity", .9);
    div.html( "<h1>Div Title</h1>"... )
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 50) + "px");
}

• Find examples of timelines on D3js.
• See what kind of data (structure) is needed for these libraries.
• Create fake time/event data.
• Create branch for timeline.
• Try out timeline library with newly made fake data.

We decided on timeline view.

• Make Filter and Header fixed
• Node Labels on click shows uneccesary data

In click() function:

• Create new div on nodeclick
• Fill div with details of clicked node
• Make divs minimizable / expandable with more details

• Check what other attributes exist in the XML file (link info, cards?)
• Extract attributes from XML, insert them into JS objects.

Next up: use these new details in the detail popup, or when hovering over links.

Azam:

• show icons instead of colors

Karin:

• make icons bigger on click
• show icons in detail popups
• icons bigger on hover

• Login page
• "Aanvragen" page

Example of commit where this issue occurs

Unnessecary white spaces and wrong indentation makes your code harder to read for contributors and others. Check your general code structure before pushing, and fetch/pull often in order to avoid merge conflicts! 😉

• X-button in pop-up
• radiobuttons bigger
• legenda not scrollable (content smaller)
• add tabs at the top

• Make legenda component
• Fill legenda with icons/text

Move the ComponentDidMount() code in the Datasection to a separate file. See if there are possibilities to break this code up into smaller pieces and make those modular too.

• Click on node -> add "bigger" class to node + label
• Not-clicked nodes -> add "faded_out" class to nodes + label

.bigger class

• radius bigger
• opacity 1

.faded_out class

• opacity .3