IRC log of #schooltool for Friday, 2012-08-10

*** replaceafill has quit IRC00:09
*** aelkner has quit IRC00:31
*** povbot has joined #schooltool00:32
*** aelkner has joined #schooltool02:04
*** aelkner has quit IRC04:02
*** yvl has joined #schooltool09:52
*** povbot has joined #schooltool10:16
*** ignas has joined #schooltool14:00
*** th1a has joined #schooltool15:44
*** th1a_ has joined #schooltool16:49
*** menesis has joined #schooltool16:52
*** th1a_ has quit IRC16:55
*** replaceafill has joined #schooltool18:07
th1aHi replaceafill.18:08
replaceafillhey th1a18:08
th1aI think we should hammer on these reports a bit.18:09
replaceafillcan you give me 20 mins18:10
replaceafillto get breakfast :)18:10
replaceafillor 1518:10
replaceafillkk, back in 1518:10
* th1a goes to shower.18:22
* replaceafill back18:29
* th1a is back.18:44
th1aLet's start with the chart background.18:46
th1aSo... like most people today I use Tufte as my basic reference point for this kind of thing.18:47
th1aThe basic principle is simple.  We want as few extraneous lines and symbols as possible.18:47
th1aWhat Tufte calls chart junk.18:48
th1aAnd we don't want any visual effects that don't directly contribute to understanding the data.18:48
th1aSo for example right now we have a subtle indented look to the chart area.18:48
th1aWe don't need the outline.18:49
replaceafillwhich one are you looking at? by student or by skill?18:49
replaceafill(to load the same one)18:49
th1a(whether or not cool transition animations contribute to understanding is something we'll ask later)18:49
th1aI'll look at by student.18:50
replaceafillok, removing the chart outline18:50
th1aIs that drawn by d3?18:53
replaceafillall the chart is now drawn in d3 :)18:54
replaceafillweird, ff shows the tick on the right but not the one on the left18:55
replaceafilland chrome does the opposite :/18:55
th1aCan we do dotted lines in svg?18:57
* replaceafill goes to see18:57
replaceafillwhat do you want dashed?18:58
th1aWe have dotted lines between the rows.18:58
replaceafillthat's html18:59
replaceafillour flourish styles18:59
th1aI know.  I was just wondering if that would work for the ticks.18:59
replaceafillwe could make the ticks shorter19:00
replaceafilllike leaving a gap between them19:00
replaceafillbut i think we'd need to make the chart taller19:00
replaceafilllet me change the tick sizes so you see it19:00
th1aOr maybe a line across the bottom and shorter ticks.19:01
th1aThis is tricky because we have such a subtle gray background.19:01
th1aIt is too close to the white to let it accomplish much.19:01
th1aThat's probably barking up the wrong tree.19:02
th1aTry line at bottom, short ticks.19:02
replaceafillthey look different across browsers (at least in my laptop)19:06
replaceafillhello different svg support :/19:06
replaceafilllooks ok in chrome, not so good in ff19:06
th1aI'm still seeing a dotted vertical line.19:06
replaceafillah, let me make the ticks smaller then19:07
th1aJust make them solid.19:07
th1a(and smaller)19:07
replaceafillah ok19:07
replaceafillok, let me explain you how it's built19:08
replaceafillwe have two x axis19:08
replaceafillone at the top19:08
replaceafillone at the bottom19:08
replaceafilli can get rid of any of them19:08
th1aCan you change the height of the tics?19:09
replaceafillto get the "dashed" ticks, i made the smaller19:10
replaceafillyou see the one at the top and the one at the bottom19:10
replaceafillthey just don't collapse19:10
replaceafillthe height looks right now in ff19:12
replaceafilland chrome19:12
replaceafilland then come the virginia users with IE9 :D19:13
th1aThe tics are still the full height of the bar, at least in Chrome.19:13
th1aI need to buy Windows.  Really.19:14
replaceafillok, hold on, let me see if this is what you want19:14
replaceafillgot rid of the top x axis (and its ticks)19:15
* replaceafill thinks th1a know what's he's doing ;)19:16
replaceafilli like this change19:16
th1aI'm also looking at:
th1aWhich is a more practical guide.19:17
th1aCan we get ticks at both ends?19:20
th1aThat might be a long term project...19:21
replaceafillyou mean, left and right?19:21
replaceafillof the chart?19:21
replaceafillthey are19:21
th1aLike you said, chrome only shows it at the left end.19:21
replaceafillbut the browsers don't display them19:21
replaceafilland ff does the opposite19:22
th1aThe tick lines are gray, right?19:22
th1aSo basically, no.  ;-)19:22
replaceafillticks are #99919:22
th1aIs that the same as the header?19:22
th1aTry that shade if not.19:22
replaceafillthe table header?19:23
replaceafillbtw, the axis and the ticks can have different colors19:24
replaceafillif for some reason we want that ;)19:24
th1aI like that.19:24
th1aNow, we need to deal with this 80% bullshit.19:25
replaceafillbigger tick at 80%?19:25
th1aI say we should let you set a target line for the report in the sidebar.19:25
th1aSay, in 10% increments.19:26
th1aWe can default to 80% :-)19:26
replaceafillis it ok if we show -80% and 80%?19:26
replaceafillthat would be easier to set up, i think19:26
th1aI don't think so.19:26
replaceafilli mean19:27
replaceafilli the ticks19:27
th1aI think we need an extra line and then some kind of highlight for the row to indicate the person is above.19:27
replaceafillnot the selector in the sidebar19:27
replaceafillah ok19:27
th1aI wouldn't want a line at -80% if that's what you're asking.19:27
replaceafillhey, we had that!19:27
replaceafillthe highlight of the row19:27
replaceafillin the old version19:27
th1aAh, well, it makes sense.19:28
th1aI'm just not sure what the 80% line should look like.19:28
replaceafilllet me add the background first19:29
replaceafill(like we had)19:29
replaceafillth1a, reload19:36
th1aYeah, that shade's not going to work now though.19:37
th1aI need that color generating page...19:38
th1areplaceafill:  Do you remember what that site was?19:45
replaceafillth1a, hhmm sorry, no19:45
th1aDo we have a pale blue?19:48
th1aThis needs to be REALLY pale.19:48
replaceafillthe calendar?19:50
replaceafillit's not pale though19:50
replaceafillwe have blue in the gradebook too19:50
replaceafilland in the color codes for optional skills :)19:50
th1aWe need the lightening algorithm.19:50
* replaceafill is reading the article19:56
replaceafilland trying the examples in gimp :D19:56
replaceafilli bet this is what d3 does, i just wish i understand it ;)19:58
* replaceafill 's head is spinning with equations...20:01
* replaceafill is now reading d3's rgb20:13
replaceafill"The red, green and blue channels are interpolated linearly"20:37
th1aIs that simpler than the other?20:38
replaceafilli think so20:38
th1aI should have linked to
replaceafillthat's his first version, right?20:39
replaceafillth1a, could you recommend two range colors to try the d3 interpolation20:45
replaceafillone for passing scores20:46
replaceafilland one for not passing ones20:46
replaceafillthe ones shown right now were kind of random :)20:46
replaceafillthe interpolate behaves like this:20:46
replaceafilli was thinking of using the same approach20:47
replaceafillcolor = d3.interpolateRgb("#aad", "#556");20:47
replaceafillthen:20:47"fill", function(d, i) { return color(i / (n - 1)); })20:47
th1aActually, I guess the highlight green from the tab -- that is, the darker green in the top bar.20:49
th1aAnd the darker gray used in the "gray bar" under the green bar.20:49
replaceafillah kk20:50
replaceafilldarker green: #026B6E20:51
replaceafilldarker gray: #48545420:51
replaceafilllight ones?20:51
th1aAren't those interpolated?20:54
replaceafilloh, they can20:54
replaceafilli just selected, two different scales20:55
replaceafillfor making lighter colors20:55
replaceafilli'll use those in a single scale for you to see20:55
replaceafill(i remember i didnt like it)20:55
replaceafillit's not easy to distinguish between the scores imho20:58
replaceafilllet me try the actual value vs the total20:58
replaceafill(that one ^ is using indexes)20:58
th1aWell... where are the scales?20:59
th1aThe intermediate colors.20:59
th1aI guess this doesn't work anyhow in case you have pass/fail.20:59
th1aSo yeah, what you had before seemed fine.21:00
th1aWhat that digression was all about is just being able to take a color and say "give me the really light version of this."21:00
th1aLike... the calendar blue.21:00
replaceafillok, reverted21:02
th1aSo... yeah, back to making the highlight a very light blue...21:04
*** ignas has quit IRC21:04
replaceafillhow about that?21:09
replaceafillgradebook input color21:09
th1aCan we just generate a gradient of blues that we standardize?21:10
th1aA palette?21:11
*** menesis has quit IRC21:12
replaceafillwe could21:12
replaceafilli can create a simple html table with some d3 interpolations21:12
replaceafilllike give it a range of two colors21:12
replaceafilland then how many we want21:12
replaceafillfrom that scale21:12
replaceafillok, onto that21:13
th1aJust the calendar blue to the background gray.21:13
th1awith... 12 steps?21:13
replaceafilllet me set that up21:13
replaceafillone week ago i knew **** about rgb interpolation ;)21:13
th1aIt is a useful skill.  ;-)21:14
replaceafillmaybe i should put the color label outside21:44
replaceafillth1a, reload21:45
replaceafillthe interpolator ;)21:46
* replaceafill sees th1a generating lots of palettes21:46
th1aTry #D6E0EA for the blue highlight.21:52
th1aI think that'll do.21:54
replaceafilli like it :)21:55
th1aDo you?21:55
replaceafillnot too strong21:55
replaceafillsoft enough21:55
th1aYeah, it is hard to make it light enough.21:55
th1aSo we could make the line in the graph #9DB8D2.21:55
replaceafilllooks good on my laptop and external lcd (older)21:55
replaceafillyou mean the ticks?21:56
replaceafillor change the green?21:56
*** menesis has joined #schooltool21:57
th1aWe need a 80% line.21:59
replaceafilllet me fix the color calculation of the gray and the green first21:59
replaceafillnow that i know how this works :D21:59
replaceafillyay, finally22:03
replaceafillnow *it's* using the right calculation22:04
replaceafilli need to adjust the colors ofc22:04
th1aYeah, that's better.22:07
replaceafilllet me know if you come up with a better range :)22:07
replaceafilllooks similar to the example we used as reference :D22:08
th1aThe expert scores are not the right colors.22:08
th1aALso, the highlighting should be based on the selected passing score.22:08
replaceafillthe "passing scores" use this scale:22:09
replaceafill        var passing_colors = d3.interpolateRgb('#026B6E', '#8fdfdf');              |    stroke: #000;22:09
replaceafill        var passing_colors = d3.interpolateRgb('#026B6E', '#8fdfdf');22:10
th1aI mean, the blue highlighting.22:10
th1aDoes it look right to you when Expert is set as passing?22:11
replaceafillah, you're right22:11
replaceafillit changes to black!22:11
replaceafillfixed the colors22:15
replaceafillwhen expert is selected22:15
replaceafillah ok, fixing the highlight22:16
replaceafillth1a, reload22:19
replaceafillwe don't have enough scores to test the other students :D22:20
th1aI'll trust it.  ;-)22:20
th1aNow... a blue line.22:22
replaceafillfor 80%?22:22
th1aUntil you make it customizable.22:28
replaceafillth1a, like that?22:40
replaceafillor maybe i misunderstood...?22:42
replaceafill(as i usually do) ;)22:42
th1aI don't know what will work.22:42
th1aMy sense is we should highlight the whole area over 80%22:43
replaceafilllike changing the white background of the chart?22:43
th1aMaybe like #EDF2F722:43
replaceafilli'll work on that after lunch, ok?22:44
replaceafilli'll be back in ~3022:44
* replaceafill back23:19
replaceafillok, changing the background of the chart after 80%23:20
*** th1a_ has joined #schooltool23:31
replaceafillth1a, zyt?23:37
replaceafillth1a_, zyt?23:37
replaceafillth1a_, reload23:38
th1a_Throw me the link.23:38
th1a_uh... what's eunita's full id again?23:39
th1a_Thanks.  ;-)23:39
th1a_What am I seeing?23:40
replaceafillthe background after 80%23:40
th1a_Take the line out.23:41
th1a_May need to bump that up a step.23:41
replaceafillline gone23:42
replaceafilloh wait23:43
replaceafillok, reload23:44
th1aone more ;-)  #DBE5EF23:44
replaceafillvery similar to the highligh23:45
th1aMake that the row highlight color, and make #E4ECF3 the +80% color.23:45
th1a_How's that?23:48
replaceafillthey still look very similar to me23:48
th1a_That's fine.23:50
th1a_Unless the blue is too similar to the green.23:51
th1a_Hm... probably is.23:51
replaceafillhhmm not in my monitors23:51
th1a_Well, not the DARK green, but you might not have any of that.23:52
th1a_I need to be able to see a palette of all our colors somewhere...23:54
replaceafillwe should definitely have that doc23:54
replaceafillmaybe after the whole cando work we could write it down23:54
th1a_I think I never really got that out of Vinny.23:56
replaceafilland i think we have some colors we came up with23:56
th1a_We still have the calendar colors.23:57
th1a_Which are really gnome colors.23:57
replaceafillwe could put a tooltip on the +80% rect23:58
replaceafillin case somebody wonders and hovers it :)23:58

Generated by 2.15.1 by Marius Gedminas - find it at!