A drag-and-drop front end for data

February 14, 2013 5:10 PM

One of my colleagues in a school thinks I'm a wizard. Thus she thinks I can make this interface. I told her it sounds terrifyingly complicated and that no off-the-shelf product does what she wants. Am I wrong?

Here's what she wants: You're moving a pool of students into, say, four classrooms. Each student is represented by a pink or blue (girl or boy) rectangle with the students name. Each class is represented by a different area.

As you drag students into the different classes, it keeps track of boys/girls per class, total count per class, plus other lovely school data like how many students per class in special ed, free-or-reduced lunch, ESL, and so on.

Since we'd be doing this for a lot of students and a lot of classrooms, we'd have to be able to start with a spreadsheet and have a spreadsheet as a result. So no, we can't hard-code the students into the interface. We start with a spreadsheet (or database) and say: Show us the interface for 4th graders. And at the end of the manipulations, the data on how we grouped them is recorded in the database.

The closest I can imagine is the electoral map Chuck Todd played with all election season. He moves states, the numbers change. No idea if back-end data changes, though, or if he could save scenarios.

I don't know if any such tool is widely available, or if there's a scriptable graphic interface that can sync with Excel or some other data store. I know Flash may be a candidate, but I don't know about the data in/out. I'm an amateur tinkerer with programming, no better. So scripting languages probably yes, Python or Objective C from scratch probably no.

All guidance welcome.

posted by argybarg to computers & internet (12 answers total)

How many students and classrooms? How many on screen at once?
posted by jeffamaphone at 5:14 PM on February 14

Six grade levels (K-5). 3-4 classrooms and 75-100 students per grade level. For each grade level we need to see the classrooms and all the students on screen at once.
posted by argybarg at 5:17 PM on February 14

Is there a reason to put kids in one class or the other? That is, is there a particular reason to be dragging them around (would an automatic allocation that meets constraints be better?)

I don't know of anything that exists that would do it, but a good programmer could make it easy enough - but not necessarily cheaply enough. It's the kind of thing I used to make for people cheap or free in high school and early college, but, you get what you pay for.
posted by RustyBrooks at 5:17 PM on February 14

One approach is to make a web app with d3.js.

Keep the student records as objects in a parent JSON object. Each object has a student's attributes.

Keep regions ("classrooms") defined by some set of coordinates (like four points that make up a rectangle) in an SVG element.

As you drop students into a region (i.e., a student's polygon element overlaps the rectangle), fire an event that puts the student into the region's object or array instance. Then calculate a summary of students contained within that region. Likewise, as you drag a student out of a region, remove it from the region's summary object.

The d3 library gives you options for drawing into an SVG element, handling mouse and other events, and doing data processing.

You can replicate basic set operations with d3's array functions or use another third-party library like JS.Set.

If you have control over the server, you can write a web service that exports per-region or all-region data in a set to a comma-separated value (CSV) file, which can be opened in Excel or other spreadsheet apps.
posted by Blazecock Pileon at 5:18 PM on February 14 [4 favorites]

This is for programming students into classes, no? There are lots of products available for this. If we're talking about a public school in a district of decent size, they likely already have access to one.

My question is, why does is have to be drag-and-drop? That seems to be the hangup here.

So why not just put all the data in a handy spreadsheet, then use one column (or a separate worksheet in the same workbook, with just names pulled from the data set), and then plop classes onto students using unique class identifiers such as k1, k2, k3...51, 52, 53 (though the school likely has its own class identification system, which may just be classroom numbers).

Then just do some number crunching on the spreadsheet as you toy with different classroom assignments for the students. I would think a couple of pivot tables per grade would work quite well.

Or am I missing some critical piece (other than my ignoring drag-and-drop)?
posted by etc. at 5:40 PM on February 14

It's the visual part and, yes, the drag-and-drop part. Right now teachers move pink-and-blue index cards from poster to poster, each poster representing a class; then they keep tallies by hand of all the different variables. Being able to move the "cards" around (we have interactive projectors) and have the data tallied on the fly would be very helpful.
posted by argybarg at 5:49 PM on February 14

If you don't mind trying to write some code, you could do this pretty easily with a combination of JavaScript, JSON (to store the data from the spreadsheets--just export from Excel to CSV; use a free tool like CSV to JSON to convert), jQuery, and little drag/drop libraries such as Gridster and Drag.js, or one of the drag/drop libraries at Micro.js.
posted by skye.dancer at 5:52 PM on February 14 [1 favorite]

it's doable, but you'd need a talented programmer to do it. Some of the libraries mentioned above would help. If I had to do it I'd use a web interface (jQuery/jQuery UI), but that's the tools I know. There might be other ways.
posted by pyro979 at 6:01 PM on February 14

70-100 that's a bit of dragging and dropping - you would want to be able to drag a collection. CTRL+Click or SHIFT + Click to select multiples and drag. Web development would be trickier than (say) a windows forms application which is designed for drag and drop.

I would create a forms app that opened the spreadsheet and parsed the names into a dragable list.
posted by mattoxic at 6:10 PM on February 14

The drag and drop idea is skeuomorphic to the card system they use now, but it's a significant amount of work even for a pro and lacks the realtime collaboration feature they have now (unless you put even more work into it).

So I'm with etc. on this. A developer given these requirements should show the user how easy it is to make this pretty nice and pretty close to their aims in a single spreadsheet. They'll get automated tallies, automated warnings about gender imbalances or special needs imbalances, realtime collaboration, automated recording of all decisions, and color-coded groupings of students by classroom in like 20 minutes of set up.

Suppose you're using Google Docs. If one worksheet has the student data (including classroom, which starts blank), then you just have some =SUM(=FILTER()) macros on another worksheet in the same document to do the running totals for each sum of interest, like number of students in classroom 1, percentage of girls in classroom 1, etc.

Then you apply conditional formatting to do things like have the classroom column get a different color for each classroom ID, as it's filled in, or have each summation cell get colored green, yellow, or red based on how full it is. With colors to aid in visualization of the classroom membership, which is literally 2 seconds to set up, they need only take the extra manual step of occasionally re-sorting the data worksheet to see the students grouped by classroom, and the result is very nearly the same as if they'd dragged the student rows to a classroom area on the page.

And since it's Google Docs, multiple people can collaboratively edit the document at the same time, and it's automatically saved.
posted by Monsieur Caution at 6:56 PM on February 14 [8 favorites]

This is the classic business analyst problem of people trying to replicate a familiar user interface to carry out a familiar workflow. You have to take it to the next level and abstract the workflow away from the interface, and use that process to explore more efficient ways to realize the workflow.

I agree JSON and jQuery would be a way to do that UI, but it's a custom job for experienced programmers with a combination ofUI, UX, and data skills.
posted by matildaben at 10:51 PM on February 14 [1 favorite]

The hard parts are all the little bits and bobs that aren't addressed here.

How does the user input student data? What happens when they are done, print a screen shot and pass it around or do we need to save it?

I've worked on all kinds of projects like this and ideally you want:

Some sort of bulk import, Excel, Access, CSV, any format you already have.

Some way to edit data imported, add and delete records.
There are always going to be cases where the initial import has bad data, is missing a record. You will also need to be able to delete records in case a student leaves, or the initial import has dupes.

Some way to save your work. For a desktop app you can just save to disk, saving a lot of trouble. For a web app, you could save to the server diskspace, but more likely you are looking at a database backend.

Some way to export class lists. The end result of all this planning is to generate lists of students for each class right?

Some way to find a student in all those boxes, you may want to move people without having to hunt each box visually.

Working with technology I already know, I'd schedule 40hrs for a first pass.

I would most likely develop a multi tiered app, web services and a database backend to handle storage and actual data manipulation but a desktop app for the drag and drop stuff, because that is 1000 times easier for me in a desktop app. I might throw in a web based viewer off the bat, for teachers to look at a class list or look up a student.


This might be a nice SAAS.
posted by Ad hominem at 10:49 AM on February 15