Please give your comment/feedback on my codepen project, as per title : a population pyramid builder/generator here.
Created using react JS and d3 JS
I think some of the reason you haven’t received any feedback on this yet is because you have to enter a lot of data manually before you can even see anything. You might consider giving us some test data that has already been entered to look at (at least for testing purposes).
A few suggestions:
- If you start with the browser as narrow as it can go and slowly widen out, the graph initially gets wider as the browser window gets bigger because the width on the container div is set to 100%. But then once you reach the first break point at 576px the width on the container div is set to 540px and it doesn’t grow wider until you reach the next break point. Is there a reason for doing this?
- I think it would be nice if the size of the graph grew as the text size is increased. Right now it only grows as the width of the browser is increased. What if someone needs the numbers to be bigger but can’t make their browser wide enough? I know we don’t like horizontal scroll bars, but in this case I think it would be OK to make an exception and allow the graph to grow wider than the view port as the user manually increases the text size.
- After you add data it takes you to a page that gives you a summary of the data you entered but you have to click a button to display the graph, and when you do this you lose the summary data. I think it would be better if you displayed the summary data and graph at the same time.
- For the module dialog that pops up for entering data, you’ll want to trap the keyboard focus so the user can’t tab out of it. And none of the labels on the male/female inputs are working properly because the for attribute on all of them points to ‘formBasicEmail’. Also, all of these inputs have the same id (formBasicInput). They each need to have a unique id and then the for attribute on the label points to that id.
- On the graph, you need to use text to indicate which side is male and which side is female. I know it seems like using blue/pink is enough, but for people who are color blind this might not work. And I imagine there are people out there who wouldn’t immediately know that blue is male and pink is female. As a general rule, you should never rely on color alone to convey meaning.
2 Likes
Thank you for your feedback, sorry for the late reply. Yes, you are right about a lot of things. What i currently doing is just simply append a 500 * 180 pixels svg parent to the page, put some properties to make it responsive, and just draw the pyramid onto it 
I haven’t got the time to give small adjustment about the font-size, etc.
I just fix the most simple i can do right now, which is not using ‘formBasicEmail’ id at every inputs. I am taking notes on all of your suggestion regarding the app behaviour, the male-female legends, etc.
Hopefully i can find some time to fix/update this. Once again, thank you.