Discussion on: Inside a dev's mind: How do you plan a UI feature?

[Rob OLeary]

Interesting to follow your thought process, well written! I wrote a heatmap in D3.js a while back, and did some light research on the interfaces for charting libraries. The data science guys break data into separate dimensions. I didn't dive into the internals much, but for a similar scenario, a time-oriented heatmap, plotly favoured each dimension to be supplied as below. I guess if you wanted to use plotly, you would keep your post data in a separate 2d array and use the indices from the Z array to grab it.

var data = [
  {
    z: [[1, null, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
    x: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    y: ['Morning', 'Afternoon', 'Evening'],
    type: 'heatmap',
    hoverongaps: false
  }
];

[Johannes Kettmann]

Thanks for your feedback Rob! That's interesting. So they basically look at it as a 3D coordinate system? I'll check that out. Thanks for the link

[Rob OLeary]

The conceptual model is different. I think this is where the mindset differs between a developer and data scientist. Im a developer interested to learn more Data Science, so don't quote me on this, but this is what I got from it! The chart coordinate system is 2D: width and height, but the 3 data dimensions are represented in the chart by: X (horizontal position), Y (vertical position), Z (colour). If data is symmetric, having separate data structures is not an issue, you can reference the same data point by indices. So, you find some statistics and data science guys going down this route, it's a data-first approach. We think in more algorithmic terms I guess.

In HTML, to be semantic HTML it should be in a <table> btw! If you give it a <caption> and summarise the table, you also give assistive technology a chance to navigate the data. So I would avoid <div>s if you can!

[Johannes Kettmann]

Of course, now it makes sense. If you look at the number of posts being a function of the weekday and hour like "numPosts = f(weekday, hour)" then you have a 3D coordinate system. Thanks for pointing that out.

[Kelvin Liang]

I tend to use 3D array to store posts data, and render them in HTML Table format. (it make more sense to me rather than use flex or grid).

 const result = new Array(7).fill().map(() => new Array(24).fill().map(() => new Array()));

It is easier to retrieve the posts by data[row][col], get the number of posts by data[row][col].length, in 2D coordinate system (I am not sure how to do the color yet).