| *** replaceafill has quit IRC | 00:09 | |
| *** aelkner has quit IRC | 00:31 | |
| *** povbot has joined #schooltool | 00:32 | |
| *** aelkner has joined #schooltool | 02:04 | |
| *** aelkner has quit IRC | 04:02 | |
| *** yvl has joined #schooltool | 09:52 | |
| *** povbot has joined #schooltool | 10:16 | |
| *** ignas has joined #schooltool | 14:00 | |
| *** th1a has joined #schooltool | 15:44 | |
| *** th1a_ has joined #schooltool | 16:49 | |
| *** menesis has joined #schooltool | 16:52 | |
| *** th1a_ has quit IRC | 16:55 | |
| *** replaceafill has joined #schooltool | 18:07 | |
| th1a | Hi replaceafill. | 18:08 |
|---|---|---|
| replaceafill | hey th1a | 18:08 |
| th1a | I think we should hammer on these reports a bit. | 18:09 |
| replaceafill | sure | 18:10 |
| replaceafill | can you give me 20 mins | 18:10 |
| replaceafill | to get breakfast :) | 18:10 |
| replaceafill | or 15 | 18:10 |
| th1a | y | 18:10 |
| replaceafill | kk, back in 15 | 18:10 |
| * th1a goes to shower. | 18:22 | |
| * replaceafill back | 18:29 | |
| * th1a is back. | 18:44 | |
| th1a | OK... | 18:46 |
| th1a | Let's start with the chart background. | 18:46 |
| replaceafill | ok | 18:46 |
| th1a | So... like most people today I use Tufte as my basic reference point for this kind of thing. | 18:47 |
| th1a | http://www.edwardtufte.com/tufte/books_vdqi | 18:47 |
| th1a | The basic principle is simple. We want as few extraneous lines and symbols as possible. | 18:47 |
| th1a | What Tufte calls chart junk. | 18:48 |
| th1a | And we don't want any visual effects that don't directly contribute to understanding the data. | 18:48 |
| replaceafill | :O | 18:48 |
| th1a | So for example right now we have a subtle indented look to the chart area. | 18:48 |
| th1a | We don't need the outline. | 18:49 |
| replaceafill | which 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 |
| th1a | I'll look at by student. | 18:50 |
| replaceafill | kk | 18:50 |
| replaceafill | ok, removing the chart outline | 18:50 |
| th1a | Is that drawn by d3? | 18:53 |
| replaceafill | done | 18:54 |
| replaceafill | yes | 18:54 |
| replaceafill | all the chart is now drawn in d3 :) | 18:54 |
| th1a | kk | 18:55 |
| replaceafill | weird, ff shows the tick on the right but not the one on the left | 18:55 |
| replaceafill | and chrome does the opposite :/ | 18:55 |
| th1a | Huh. | 18:56 |
| th1a | Hm... | 18:57 |
| th1a | Can we do dotted lines in svg? | 18:57 |
| * replaceafill goes to see | 18:57 | |
| replaceafill | stroke-dasharray | 18:58 |
| replaceafill | what do you want dashed? | 18:58 |
| th1a | We have dotted lines between the rows. | 18:58 |
| replaceafill | that's html | 18:59 |
| replaceafill | our flourish styles | 18:59 |
| th1a | I know. I was just wondering if that would work for the ticks. | 18:59 |
| replaceafill | ah | 18:59 |
| replaceafill | hhmm | 18:59 |
| replaceafill | we could make the ticks shorter | 19:00 |
| replaceafill | like leaving a gap between them | 19:00 |
| replaceafill | but i think we'd need to make the chart taller | 19:00 |
| replaceafill | let me change the tick sizes so you see it | 19:00 |
| th1a | Or maybe a line across the bottom and shorter ticks. | 19:01 |
| th1a | This is tricky because we have such a subtle gray background. | 19:01 |
| th1a | It is too close to the white to let it accomplish much. | 19:01 |
| replaceafill | reload | 19:01 |
| th1a | That's probably barking up the wrong tree. | 19:02 |
| th1a | Try line at bottom, short ticks. | 19:02 |
| replaceafill | reload | 19:06 |
| replaceafill | they look different across browsers (at least in my laptop) | 19:06 |
| replaceafill | hello different svg support :/ | 19:06 |
| th1a | O | 19:06 |
| th1a | O | 19:06 |
| replaceafill | looks ok in chrome, not so good in ff | 19:06 |
| th1a | I'm still seeing a dotted vertical line. | 19:06 |
| replaceafill | ah, let me make the ticks smaller then | 19:07 |
| th1a | Just make them solid. | 19:07 |
| th1a | (and smaller) | 19:07 |
| replaceafill | ah ok | 19:07 |
| replaceafill | ok, let me explain you how it's built | 19:08 |
| replaceafill | we have two x axis | 19:08 |
| replaceafill | one at the top | 19:08 |
| replaceafill | one at the bottom | 19:08 |
| replaceafill | i can get rid of any of them | 19:08 |
| replaceafill | reload | 19:09 |
| th1a | Can you change the height of the tics? | 19:09 |
| replaceafill | yes | 19:09 |
| replaceafill | to get the "dashed" ticks, i made the smaller | 19:10 |
| replaceafill | you see the one at the top and the one at the bottom | 19:10 |
| replaceafill | they just don't collapse | 19:10 |
| replaceafill | reload | 19:12 |
| replaceafill | the height looks right now in ff | 19:12 |
| replaceafill | and chrome | 19:12 |
| replaceafill | and then come the virginia users with IE9 :D | 19:13 |
| th1a | The tics are still the full height of the bar, at least in Chrome. | 19:13 |
| th1a | I need to buy Windows. Really. | 19:14 |
| replaceafill | ok, hold on, let me see if this is what you want | 19:14 |
| replaceafill | reload | 19:14 |
| replaceafill | got rid of the top x axis (and its ticks) | 19:15 |
| th1a | Yeah. | 19:15 |
| * replaceafill thinks th1a know what's he's doing ;) | 19:16 | |
| replaceafill | i like this change | 19:16 |
| th1a | I'm also looking at: http://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167 | 19:17 |
| th1a | Which is a more practical guide. | 19:17 |
| th1a | Can we get ticks at both ends? | 19:20 |
| th1a | That might be a long term project... | 19:21 |
| replaceafill | you mean, left and right? | 19:21 |
| replaceafill | of the chart? | 19:21 |
| th1a | Yeah. | 19:21 |
| replaceafill | they are | 19:21 |
| th1a | Like you said, chrome only shows it at the left end. | 19:21 |
| replaceafill | but the browsers don't display them | 19:21 |
| replaceafill | right | 19:21 |
| replaceafill | and ff does the opposite | 19:22 |
| th1a | The tick lines are gray, right? | 19:22 |
| th1a | So basically, no. ;-) | 19:22 |
| replaceafill | ticks are #999 | 19:22 |
| th1a | Is that the same as the header? | 19:22 |
| th1a | Try that shade if not. | 19:22 |
| replaceafill | the table header? | 19:23 |
| replaceafill | ok | 19:23 |
| replaceafill | #6C7B7C | 19:23 |
| replaceafill | reload | 19:23 |
| replaceafill | btw, the axis and the ticks can have different colors | 19:24 |
| replaceafill | if for some reason we want that ;) | 19:24 |
| th1a | I like that. | 19:24 |
| th1a | Now, we need to deal with this 80% bullshit. | 19:25 |
| replaceafill | bigger tick at 80%? | 19:25 |
| th1a | I say we should let you set a target line for the report in the sidebar. | 19:25 |
| th1a | Say, in 10% increments. | 19:26 |
| replaceafill | ah | 19:26 |
| th1a | We can default to 80% :-) | 19:26 |
| replaceafill | is it ok if we show -80% and 80%? | 19:26 |
| replaceafill | that would be easier to set up, i think | 19:26 |
| th1a | I don't think so. | 19:26 |
| replaceafill | ok | 19:26 |
| replaceafill | i mean | 19:27 |
| replaceafill | i the ticks | 19:27 |
| th1a | I think we need an extra line and then some kind of highlight for the row to indicate the person is above. | 19:27 |
| replaceafill | not the selector in the sidebar | 19:27 |
| replaceafill | ah ok | 19:27 |
| th1a | I wouldn't want a line at -80% if that's what you're asking. | 19:27 |
| replaceafill | hey, we had that! | 19:27 |
| replaceafill | the highlight of the row | 19:27 |
| replaceafill | in the old version | 19:27 |
| th1a | Ah, well, it makes sense. | 19:28 |
| th1a | I'm just not sure what the 80% line should look like. | 19:28 |
| replaceafill | let me add the background first | 19:29 |
| replaceafill | (like we had) | 19:29 |
| replaceafill | th1a, reload | 19:36 |
| th1a | Yeah, that shade's not going to work now though. | 19:37 |
| th1a | I need that color generating page... | 19:38 |
| th1a | replaceafill: Do you remember what that site was? | 19:45 |
| replaceafill | th1a, hhmm sorry, no | 19:45 |
| th1a | http://www.codemelon.com/art_web_color2.php# | 19:47 |
| th1a | Do we have a pale blue? | 19:48 |
| th1a | This needs to be REALLY pale. | 19:48 |
| replaceafill | the calendar? | 19:50 |
| replaceafill | it's not pale though | 19:50 |
| replaceafill | we have blue in the gradebook too | 19:50 |
| replaceafill | and in the color codes for optional skills :) | 19:50 |
| th1a | We need the lightening algorithm. | 19:50 |
| * replaceafill is reading the article | 19:56 | |
| replaceafill | and trying the examples in gimp :D | 19:56 |
| replaceafill | i bet this is what d3 does, i just wish i understand it ;) | 19:58 |
| th1a | Yeah. | 19:59 |
| * replaceafill 's head is spinning with equations... | 20:01 | |
| * replaceafill is now reading d3's rgb | 20:13 | |
| replaceafill | :O | 20:37 |
| replaceafill | "The red, green and blue channels are interpolated linearly" | 20:37 |
| th1a | Is that simpler than the other? | 20:38 |
| replaceafill | i think so | 20:38 |
| th1a | I should have linked to http://www.codemelon.com/art_web_color1.php | 20:38 |
| th1a | :-| | 20:38 |
| replaceafill | that's his first version, right? | 20:39 |
| th1a | y | 20:43 |
| replaceafill | th1a, could you recommend two range colors to try the d3 interpolation | 20:45 |
| replaceafill | one for passing scores | 20:46 |
| replaceafill | and one for not passing ones | 20:46 |
| replaceafill | the ones shown right now were kind of random :) | 20:46 |
| replaceafill | the interpolate behaves like this: | 20:46 |
| replaceafill | http://mbostock.github.com/d3/ex/stack.html | 20:46 |
| replaceafill | i was thinking of using the same approach | 20:47 |
| replaceafill | color = d3.interpolateRgb("#aad", "#556"); | 20:47 |
| replaceafill | then: | 20:47 |
| replaceafill | .style("fill", function(d, i) { return color(i / (n - 1)); }) | 20:47 |
| th1a | Actually, I guess the highlight green from the tab -- that is, the darker green in the top bar. | 20:49 |
| th1a | And the darker gray used in the "gray bar" under the green bar. | 20:49 |
| replaceafill | ah kk | 20:50 |
| replaceafill | darker green: #026B6E | 20:51 |
| replaceafill | darker gray: #485454 | 20:51 |
| replaceafill | light ones? | 20:51 |
| th1a | Aren't those interpolated? | 20:54 |
| replaceafill | oh, they can | 20:54 |
| replaceafill | i just selected, two different scales | 20:55 |
| replaceafill | for making lighter colors | 20:55 |
| replaceafill | i'll use those in a single scale for you to see | 20:55 |
| replaceafill | (i remember i didnt like it) | 20:55 |
| replaceafill | reload | 20:57 |
| replaceafill | it's not easy to distinguish between the scores imho | 20:58 |
| replaceafill | let me try the actual value vs the total | 20:58 |
| replaceafill | (that one ^ is using indexes) | 20:58 |
| th1a | Well... where are the scales? | 20:59 |
| replaceafill | hhm? | 20:59 |
| th1a | The intermediate colors. | 20:59 |
| th1a | I guess this doesn't work anyhow in case you have pass/fail. | 20:59 |
| th1a | So yeah, what you had before seemed fine. | 21:00 |
| replaceafill | kk | 21:00 |
| th1a | What 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 |
| th1a | Like... the calendar blue. | 21:00 |
| replaceafill | ok, reverted | 21:02 |
| th1a | So... yeah, back to making the highlight a very light blue... | 21:04 |
| replaceafill | kk | 21:04 |
| *** ignas has quit IRC | 21:04 | |
| replaceafill | how about that? | 21:09 |
| replaceafill | gradebook input color | 21:09 |
| th1a | Lighter. | 21:10 |
| th1a | Can we just generate a gradient of blues that we standardize? | 21:10 |
| th1a | A palette? | 21:11 |
| *** menesis has quit IRC | 21:12 | |
| replaceafill | we could | 21:12 |
| replaceafill | i can create a simple html table with some d3 interpolations | 21:12 |
| th1a | Yeah... | 21:12 |
| replaceafill | like give it a range of two colors | 21:12 |
| replaceafill | and then how many we want | 21:12 |
| replaceafill | from that scale | 21:12 |
| replaceafill | ok, onto that | 21:13 |
| th1a | Just the calendar blue to the background gray. | 21:13 |
| th1a | with... 12 steps? | 21:13 |
| replaceafill | kk | 21:13 |
| replaceafill | cool | 21:13 |
| replaceafill | let me set that up | 21:13 |
| replaceafill | one week ago i knew **** about rgb interpolation ;) | 21:13 |
| th1a | It is a useful skill. ;-) | 21:14 |
| replaceafill | th1a, http://69.164.203.135/d3interpolator/ | 21:43 |
| replaceafill | :D | 21:43 |
| replaceafill | maybe i should put the color label outside | 21:44 |
| replaceafill | th1a, reload | 21:45 |
| replaceafill | the interpolator ;) | 21:46 |
| * replaceafill sees th1a generating lots of palettes | 21:46 | |
| th1a | Ah... | 21:50 |
| th1a | OK! | 21:51 |
| th1a | Try #D6E0EA for the blue highlight. | 21:52 |
| replaceafill | reload | 21:53 |
| th1a | I think that'll do. | 21:54 |
| th1a | ? | 21:54 |
| replaceafill | kk | 21:55 |
| replaceafill | i like it :) | 21:55 |
| th1a | Do you? | 21:55 |
| replaceafill | not too strong | 21:55 |
| th1a | OK. | 21:55 |
| replaceafill | soft enough | 21:55 |
| th1a | Yeah, it is hard to make it light enough. | 21:55 |
| th1a | So we could make the line in the graph #9DB8D2. | 21:55 |
| replaceafill | looks good on my laptop and external lcd (older) | 21:55 |
| replaceafill | you mean the ticks? | 21:56 |
| replaceafill | or change the green? | 21:56 |
| *** menesis has joined #schooltool | 21:57 | |
| th1a | We need a 80% line. | 21:59 |
| replaceafill | ah | 21:59 |
| replaceafill | kk | 21:59 |
| replaceafill | let me fix the color calculation of the gray and the green first | 21:59 |
| replaceafill | now that i know how this works :D | 21:59 |
| th1a | kk | 21:59 |
| replaceafill | yay, finally | 22:03 |
| replaceafill | reload | 22:03 |
| replaceafill | now *it's* using the right calculation | 22:04 |
| replaceafill | i need to adjust the colors ofc | 22:04 |
| th1a | Yeah, that's better. | 22:07 |
| replaceafill | reload | 22:07 |
| replaceafill | let me know if you come up with a better range :) | 22:07 |
| replaceafill | looks similar to the example we used as reference :D | 22:08 |
| replaceafill | ok | 22:08 |
| th1a | The expert scores are not the right colors. | 22:08 |
| th1a | ALso, the highlighting should be based on the selected passing score. | 22:08 |
| replaceafill | the "passing scores" use this scale: | 22:09 |
| replaceafill | var passing_colors = d3.interpolateRgb('#026B6E', '#8fdfdf'); | stroke: #000; | 22:09 |
| replaceafill | oops | 22:09 |
| replaceafill | sorry | 22:09 |
| replaceafill | var passing_colors = d3.interpolateRgb('#026B6E', '#8fdfdf'); | 22:10 |
| th1a | I mean, the blue highlighting. | 22:10 |
| replaceafill | H | 22:10 |
| replaceafill | ah | 22:10 |
| th1a | Does it look right to you when Expert is set as passing? | 22:11 |
| replaceafill | ah, you're right | 22:11 |
| replaceafill | it changes to black! | 22:11 |
| replaceafill | fixed the colors | 22:15 |
| replaceafill | when expert is selected | 22:15 |
| replaceafill | ah ok, fixing the highlight | 22:16 |
| replaceafill | th1a, reload | 22:19 |
| replaceafill | we don't have enough scores to test the other students :D | 22:20 |
| th1a | I'll trust it. ;-) | 22:20 |
| replaceafill | :D | 22:20 |
| th1a | Now... a blue line. | 22:22 |
| replaceafill | ok | 22:22 |
| replaceafill | for 80%? | 22:22 |
| th1a | Until you make it customizable. | 22:28 |
| replaceafill | kk | 22:28 |
| replaceafill | th1a, like that? | 22:40 |
| th1a | Hm... | 22:42 |
| replaceafill | or maybe i misunderstood...? | 22:42 |
| th1a | No... | 22:42 |
| replaceafill | (as i usually do) ;) | 22:42 |
| th1a | I don't know what will work. | 22:42 |
| th1a | My sense is we should highlight the whole area over 80% | 22:43 |
| replaceafill | like changing the white background of the chart? | 22:43 |
| th1a | Maybe like #EDF2F7 | 22:43 |
| th1a | yes. | 22:43 |
| replaceafill | kk | 22:44 |
| replaceafill | i'll work on that after lunch, ok? | 22:44 |
| replaceafill | i'll be back in ~30 | 22:44 |
| * replaceafill back | 23:19 | |
| replaceafill | ok, changing the background of the chart after 80% | 23:20 |
| *** th1a_ has joined #schooltool | 23:31 | |
| replaceafill | th1a, zyt? | 23:37 |
| replaceafill | th1a_, zyt? | 23:37 |
| th1a_ | Hey. | 23:37 |
| replaceafill | th1a_, reload | 23:38 |
| th1a_ | Throw me the link. | 23:38 |
| replaceafill | http://69.164.203.135:6660/schoolyears/2012-2013/SY/sections/13106-45-1-1/skills/6617-2011-0/gradebook/section_report_by_student.html | 23:38 |
| th1a_ | uh... what's eunita's full id again? | 23:39 |
| replaceafill | eunita.winkey@apsva.us | 23:39 |
| th1a_ | Thanks. ;-) | 23:39 |
| th1a_ | What am I seeing? | 23:40 |
| replaceafill | the background after 80% | 23:40 |
| replaceafill | EDF2F7 | 23:40 |
| th1a_ | Take the line out. | 23:41 |
| th1a_ | May need to bump that up a step. | 23:41 |
| replaceafill | line gone | 23:42 |
| replaceafill | oops | 23:42 |
| replaceafill | reload | 23:42 |
| th1a | #E4ECF3 | 23:42 |
| replaceafill | reload | 23:43 |
| replaceafill | oh wait | 23:43 |
| replaceafill | ok, reload | 23:44 |
| th1a | one more ;-) #DBE5EF | 23:44 |
| replaceafill | reload | 23:44 |
| replaceafill | very similar to the highligh | 23:45 |
| replaceafill | t | 23:45 |
| th1a | Make that the row highlight color, and make #E4ECF3 the +80% color. | 23:45 |
| replaceafill | reload | 23:47 |
| th1a_ | How's that? | 23:48 |
| replaceafill | they still look very similar to me | 23:48 |
| th1a_ | That's fine. | 23:50 |
| replaceafill | kk | 23:50 |
| th1a_ | Unless the blue is too similar to the green. | 23:51 |
| th1a_ | Hm... probably is. | 23:51 |
| replaceafill | hhmm not in my monitors | 23: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 |
| replaceafill | we should definitely have that doc | 23:54 |
| replaceafill | maybe after the whole cando work we could write it down | 23:54 |
| replaceafill | :D | 23:54 |
| th1a_ | I think I never really got that out of Vinny. | 23:56 |
| replaceafill | and i think we have some colors we came up with | 23:56 |
| th1a_ | We still have the calendar colors. | 23:57 |
| th1a_ | Which are really gnome colors. | 23:57 |
| replaceafill | we could put a tooltip on the +80% rect | 23:58 |
| replaceafill | in case somebody wonders and hovers it :) | 23:58 |
Generated by irclog2html.py 2.15.1 by Marius Gedminas - find it at mg.pov.lt!