Creative ideas for display large amount of text on web page

Question

I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.

What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.

Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.

Note: I am limited to JS, xml, html and C

Thanks!

Answer 1

• By mouse scroll resize the text.
• Add drag'n'drop for moving text block.

Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.

It is possible to implement such thing with jQuery/JavaScript

Answer 2

Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.

Answer 3

you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.

I did this with documentation i was working on and it worked out great.

Answer 4

Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.

Answer 5

I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I

The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html

Answer 6

If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast

Here's a screenshot. (Image too large to inline it here)

Answer 7

Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.

    ID Range

[X]    1-1000 xxxxxxxxxxxxxxxxxxxxx

[X] 1001-2000 xxxxxxxxx

[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less