d3 y Domain and Range

Question

I need to find out where to draw my y axis dependent of a date

My data looks like the following in .csv format:

startYYYYMM, endYYYYMM, ProjectName
201301, 201303, Proj1
201302, 201412, Proj2
201304, 201311, Proj3

I've done the chart as laying bar chart

Where to start my bars on the x axis is dependent on the start and is no problem. It's the y that is the problem. I wonder If there is any built in "optimization" in d3 that I can use. I release that I can loop through my data to decide "the grouping" of my data.

And a pic of how I would like it to look like: https://www.dropbox.com/s/5xs0jfxb33ipn60/temp.jpg

/Thank's

Answer 1

If I understand correctly, the difference between what you want and a standard Gantt chart is that the Gantt chart puts every project on its own line, but you want to compact the display so that long-finished projects don't continue to take up a row of blank space.

To get that "optimized function based on date" that figures out where on the Y-domain you can fit a project to keep the display compact, you're going to need to keep track of which projects are active at a given time, and loop through them to find out where you have room on your display for a new project.

Here's an algorithm you could implement. The results won't always be perfect (sometimes a small rectangle will end up taking up room in a space where a larger rectangle could have been positioned) but it should be much more compact than a standard Gantt chart.

1. Sort your projects by start date and work through them in that order, assigning y-positions to each.

2. As you work through your project list, keep a secondary array of "active" projects -- ones that have been started but not finished at the time you are looking. These will always be projects that you have already positioned on the graph, since you're positioning projects in order of start time.

3. For each project in your main array:

   • go through the active-project array (if it's not empty) and remove any projects that finished before the project you are plotting started (if you want padding between rectangles, require a certain minimum time to have passed in between);

   • sort the active-project array by the y-position you have already assigned to each project-rectangle;

   • scan through the active-project array, checking the y-position and height of each rectangle, to see if you have room to place the rectangle for your current project;

   • if you can't fit it in-between any of the currently active projects, set it's position to be above the last active project, and check whether the new position+height of this rectangle exceeds your previous maximum height;

   • either way, store the calculated y position (which will be in the same units as the variable you are using for rectangle height) in the project's data-object.

4. Now that you've set this project's position, add it to the active-project array and move on to the next project in your main array.

5. Once you have determined a relative y-position for each rectangle, set your y-scale domain according to the maximum height you used and draw the axis and rectangles.

You can look at this answer for some inspiration, although that example is more complicated than what you need.