Click here to Skip to main content
15,879,326 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
See more:
I work for a State Legislature and I would like to create a page that is similar to the following page.[^]

My “Men” side would be the bills introduced by the State Senate, and my “Women” side would be the State House. My “play” button would traverse the legislative sessions.

Mine will start at the bottom with the first bill introduced by the chambers. The line would indicate the progress the bill has made. So if it is introduced, but no further action was taken on it, it would be super short. If went all the way, and became a law, it will be a very long line.

Hovering over the line could show who introduced it, what party they belong to. The check boxes at the bottom could recolor the lines according to the party that introduced the bill (red or blue for republican or democrat). I have dozens of other cool ideas that would fit, but not a CLUE how to make it happen. The more I research things the more I feel like I’m going the wrong way.

I am overwhelmed. This page seems to have used SVG with canvas? I got a book about both and a book about HTML5 and also jquery and am reading my way through all but I’m having trouble figuring out how to plug all this cool stuff into my Visual Studio .NET environment and make anything cohesive happen.

Due to budget restraints I’m a lone programmer here. I do it all alone and I don’t even have anyone to talk to about my dreams for the site. Would anyone be willing to give me a short bullet pointed task list of the things THEY would do to accomplish this project?

Would you use SVG with Canvas? So do I write a program that loops through the bills and creates an SVG path for each bill into some kind of file and then include that page in header? I’ve written the stored procedures to capture all the information I need and code that is creating an SVGish file.

I’m good with the code to tell the programs what they need to know. I just don’t know how to show it to the web. Thanks for any help you could give.

[original title]
I want to turn an sample page into something useful - a linear graph for my state legislature
Updated 27-Dec-10 5:33am
Slacker007 27-Dec-10 11:35am    
Shortened question title and improved readability.
#realJSOP 27-Dec-10 13:03pm    
Please list your honest self-assessment of your skill level, the dev tools/code libraries you have on hand, the likelihood that management would buy you additional tools, and whether or not you have admin access to your box. Lastly, are you mandated to use HTML5, or can you experiment with different technologies, such as Flash or Silverlight (my guess is no).
Jenny Quinn 28-Dec-10 11:45am    
Thanks for your reply. I have about 12 years of web development experience but have been required to avoid browser based scripting languages until just recently. I've written all of the code and database access for several important and heavily accessed sites including the Michigan Legislative Website, an online placement system (thought to be the nation's first - back in 1997) and an online university for Michigan State University. I'm probably not as 'skilled' as many of your readers, but I am not too shabby.
I do use Flash for some tutorials which I present on our site and to do this I use a tool called Camtasia by TechSmith. I am looking into jquery and have downloaded the library and am reading "JQUERY / Novice to Ninja". I am not mandated to use HTML5 but I must be careful because we have a HUGE audience on this website and I am mandated to deliver the critical information to as broad a set of browsers as possible. Thanks again for your interest in this project!
Jenny Quinn 28-Dec-10 11:49am    
also, it is highly unlikely that management would buy me additional tools.

1 solution

From your question I guess you are familiar with VB.Net, while SVG, Flash and HTML5 is something you are just learning.

I hope you will find SilverLight development somewhat more familiar, and I think you will be able to build upon what you know using that platform. While learning by doing is great, it tends to be somewhat more time consuming ...

The "men" side could be created using something like this:
<UserControl x:Class="MenSide.MainPage"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel HorizontalAlignment="Right">
            <Rectangle Fill="Black" Width="100" Height="20" HorizontalAlignment="Right">

            <Rectangle Fill="Black" Width="80" Height="20" HorizontalAlignment="Right">

            <Rectangle Fill="Black" Width="110" Height="20" HorizontalAlignment="Right">


You will have to create the rectangles dynamically. Hope it's enough to get you started.

Espen Harlinn
Share this answer
Jenny Quinn 28-Dec-10 13:07pm    
This is interesting. I could use this (Silverlight) in my existing solution, and have access to my data layer in a way that I am very familiar with. Silverlight is new to me so I will need to learn more about it. I think that the animation feature may lend itself to my "play" button, though I need to do much thinking about how to make that work. This is a wonderful start. Thank you very much. Also, Bruce Lawson made a suggestion that I look into a tool powered by jquery called 'Visualize'. I am just reading about jquery and find it interesting so I'll be looking into both of these approaches. Any thoughts on the pro's and cons of each are welcome!
Espen Harlinn 30-Dec-10 5:12am    
Hi - there are many technologies that will provide you with the features you need, it's just a question of how much you are willing to learn.
Away3d - a flash based 3d engine could help you to create a fantastic visualization. Flare is a flash based data visualization engine.

Since you are familiar with visual basic, SilverLight will allow you to use what you know.

Best of luck
Espen Harlinn

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900