Add bar charts #48
Add bar charts #48
Conversation
|
||
//data for bar charts | ||
var dataBC = './data/2016-New-Coder-Survey-Data-Summary.csv'; | ||
|
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
- For iPhone
TODO: - Fix bug with answer == 0 - Range variables - Edit long answers
- no "Resources" - no "Events"
Fix bug with answers == 0 Small fix Small fix
- to show decimals for small labels
- HomeMortgageOwe
- Resources - CodeEvent
- more ranges (UX) - easy to read (UX) - looks cleaner (UI)
@SamAI-Software Overall, this looks great! The only thing I'd like to change is to make the graph bars the lighter green (#7ED321) and on hover to make them 1) the dark green they are currently and 2) have white text on the bar that gives the raw number of respondents. I think that'll make the hover interaction more informative. There are a few very minor styling things like spacing and margin that I'll fix after this is merged (I think it's easier than adding those details to this PR. Otherwise, looks good! |
@sarony got you with colors, will do asap.
Yes, that was planned in the beginning and .csv file has this data and I've found cool library for tips, but then I've faced a few problems, because the bars are horizontal. I will try to add this feature later on. 👍 |
@SamAI-Software for consistency's sake, I think it would be best to stick with the H4 format for the bar graphs. How does that sound? |
@sarony sounds not so good to me :) Because I do like H5 and most ppl also voted for H5. Also I've seen at stackoverflow that they use different styles of labels at the end of bars and it doesn't look bad. Of course, if we put H4 and H5 on one line, then it will look weird. But anyway we will need to rearrange all bar charts to tell users a story. And when H4 & H5 are on the different lines, they look pretty good, aren't they? Also H5 are responsive on scale (it's important for web developers and ppl who open the website with landscape mode and then switched to portrait mode), but H4 are responsive only on refresh of the page, because the left and right space for the titles/texts are fixed with px. However, the H5 have a problem with hover, it doesn't work when hover on titles/labels. I didn't find a solution yet. I've tried to add hover for classes Anyway, I do like H5 and I'd like to keep it, but I'm emotionally attached to it, because I've spend a lot of time to make different formats, which is not good for decision-making. And btw, I made it very easy to change formats, so you don't need my help for that, if you will suddenly decide to change it later on.
Just change H5 to H4 and adjust left and right margin.
|
@sarony, I've changed the colors, preview is here (don't forget to refresh) 01_CN_CN_white02_CN_black_white03_CN_black_black04_FCC_FCC_white |
@SamAI-Software I think it looks great in the preview, nice job! As far as the H5 vs H4, I don't have a strong opinion, just that we be consistent in our design whenever possible. For example, if we have a yes/no bar graph, I think we should pick one or the other, and not use both. I picked H4 is because it was more accommodating for the graphs that have very small numbers, where you can't fit the percentage in the bar, so we could use it everywhere. If we use both H4 and H5, I'd like there to be some logic on how we choose one or the other, as right now it looks like it's a random decision. Does that make sense? Also for the responsiveness of the H4, I think you're right, that's really important to have. Is that something we can work on? I'm wondering what it would take to get that to work? You seem to know your stuff, so let me know if that's a big task! :) |
@sarony, it's not random. I used this logic.
Anyway, if we decide to stick with CN colors, then it will make sense to get rid of H5, because |
Hi @SamAI-Software, I think the most important thing is that these are consistent across all of the bar charts. You could potentially move the % to the left side of each bar - then it could always be inside the chart. We want to make the most of your scarce time. If you can focus on making all of these charts look consistent (even if they are less aesthetically pleasing) we can ship this and maybe revisit it and improve the look later. As the saying goes, "Done is better than perfect" :) @sarony would you agree that we should err on the side of consistency and shipping as quickly as possible? |
@QuincyLarson @SamAI-Software yes, I agree. @SamAI-Software when I was talking about the logic, I didn't mean the code logic, I meant the visual logic that the user would see. For example, in this screenshot we have two bar graphs with yes/no options, and we use two different styles. While there might be coding logic that makes sense for using H4 and H5, from the user's perspective, there isn't a semantic reason why those two charts would be styled differently. Apologies for not being clearer in my earlier comment, but hopefully this explanation and the accompanying image is more helpful. |
@sarony as I said, all bar charts should be reordered for better UX, so I didn't pay attention how they look like together right now.
Haha, I had a very playful mood a few hours ago, sorry, you didn't get it. My fault. Anyway, you are bosses @sarony @QuincyLarson, so I'll change H5 to H4 now.
True, true 👍 |
Done (refresh) Extra small screens still look weak (320px) The simple solution is to make long titles shorter. I already did some "cutting", but I'm afraid to touch some topics, because I'm not a native speaker. Educationhigh school or equivalent Familymarried or partnership Employmentstay-at-home parent, homemaker arts, media, sports Btw @sarony the navbar takes way too much space in landscape mode, it's hard to scroll, keep it in mind. |
@SamAI-Software and everyone: I think that the effect that Sam is getting from the extra small screen is not that bad for long text... sometimes the bars are not needed... The rest, I would say @SamAI-Software is doing a great job! |
- for better responsiveness on 320px screens
Preview is here (don't forget to refresh) If you see any bugs -> screenshot with the px size of a screen plz
|
-with jshint
Sorry for discussing this here: There were few of us who also tried other type of presentations. One is kris (the map) and the other one is mine. I understand that kris contacted you already. What chance do I have for mine to be also included as an additional viz in the project? |
* Styles and sets up Results and Tags section * Lays out footer * Makes nav sticky on scroll * Makes footer responsive * Animates nav scrolling * WIP- working on "raw data overlay" and link to repo TODO: - placeholders for charts - replace with real copy - logos/links * Creates 'get raw data' popup overlay * Styles popup * Fixes jump on popup overlay * Adds correct tags to data sections * WIP - fixes popup overlay on mobile for raw data TODO: - layout charts for the tag clouds - add "share" link in header * Lays out the charts * Lays out all chart sections * Fixes styling on footer * Adds some placeholder charts from TypeForm * Add bar charts (#48) * Add bar charts * Change font-size & some answers & questions to fit small screens * Add ID's to all topics in HTML * Add more bar charts * Fix problems with small screens - For iPhone * Add all variables to Data-Summary TODO: - Fix bug with answer == 0 - Range variables - Edit long answers * Add almost all basic bar charts - no "Resources" - no "Events" * Format/margin all bar charts * Fix few bugs Fix bug with answers == 0 Small fix Small fix * Add format "H4d" - to show decimals for small labels * Style some bar charts with H4d * Range all variables with many answers * Add missing topic - HomeMortgageOwe * Add missing bar charts - Resources - CodeEvent * Resort some money bar charts for better UX * Refactoring and cleaning * Restyle all money bar charts (UX&UI) - more ranges (UX) - easy to read (UX) - looks cleaner (UI) * Add #respondents to each bar chart * Small fix Add blank row to .csv to resolve bug with padding&margin for 15 bars * Change bar&label colors for H4, H4d * Change all H5 bar charts to H4 * Shorten long answers - for better responsiveness on 320px screens * Clean code -with jshint
Website preview is here.
Bar charts are responsive (on page refresh), animated (on page refresh) and easy to embed.
Commit Message
'./data/2016-New-Coder-Survey-Data-Summary.csv'
for faster rendering of bar charts'./javascript/barcharts.js'
to draw bar chartsindex.html
with id's to insert bar charts./stylesheets/style.css
./javascript/main.js
to call for bar chartsHELP WANTED