Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What needs finished: #24

Open
9 of 11 tasks
RJP43 opened this issue Dec 7, 2016 · 39 comments
Open
9 of 11 tasks

What needs finished: #24

RJP43 opened this issue Dec 7, 2016 · 39 comments

Comments

@RJP43
Copy link
Collaborator

RJP43 commented Dec 7, 2016

Hey guys, just trying to help @jonhoranic out (since he has so much on his plate) with mapping out a task list. We have officially moved into TEI; however, we are waiting for some last couple manual edits to that file before it is set to use for your visualizations.

TASK LIST

@RJP43
Copy link
Collaborator Author

RJP43 commented Dec 7, 2016

@JaredKramer40 I still need to look at your HTML pages and get you those comments like I promised. I have been working away since class time with @jonhoranic hammering out the complexities of moving us into the TEI.

@JaredKramer40
Copy link
Collaborator

Okay it's no problem, whenever you get a chance. The SSI links work, it's just styling the navigation bar. I'm not sure how I should go about doing that.

@RJP43
Copy link
Collaborator Author

RJP43 commented Dec 8, 2016

@JaredKramer40 can you make sure you have pushed recently. Seems like the website files here on GitHub don't match what is live on your site.

@JaredKramer40
Copy link
Collaborator

Yeah sorry I pushed everything.

@RJP43
Copy link
Collaborator Author

RJP43 commented Dec 8, 2016

@jonhoranic @JaredKramer40 hey guys @laurenmcguigan and I are working on SVGs in Cassell 210 ... come by if you want!

@RJP43
Copy link
Collaborator Author

RJP43 commented Dec 8, 2016

@JaredKramer40 I see you are pushing files to the repo as we are too.... just want to make you aware so that you are pulling everytime before you add, commit, and push

@jonhoranic
Copy link
Owner

@JaredKramer40 @laurenmcguigan @RJP43
Heyo all, got the XSLT for a pie chart on owner gender up, and I put the output SVG file into a new folder called visualizations. I will try to tidy the repository up when we are finished.

I would like to point out that when I tried to check the output by opening it in chrome, it would not display properly, however I went and tested it with one of the w3schools coding examples and it would display properly. I have no idea why it is doing this, so please look over my work!

By the way I tried to get colors that match the scheme we have, if it clashes feel free to edit it, I left xsl:comment tags to make it easier to find.

@laurenmcguigan
Copy link
Collaborator

@RJP43 @JaredKramer40 @jonhoranic Alright guys! So I finished another visualization. It is the bar graph that has the amount of Deaths in a particular age range, and the amount of men vs women. The output of the svg is called ageGraphOutput if you could take a look at it and let me know what you think. Do you think it would look better if I put the men vs women next to each other instead of on top? And I was thinking about adding a table with javascript to have the actual amount of men and women that died when you click on the bar. Let me know what you think. @RJP43 and @ebeshero I could use some guidance on the javascript part. And @JaredKramer40 I noticed you put up pages for the pie graph and line graph. Could you put one up for the bar graph, and then actually put it on there so I can see what it looks like? Its called ageGraphOutput and its just sitting in the graveYard folder. Make sure you pull all the changes first! Thank you!

@jonhoranic
Copy link
Owner

jonhoranic commented Dec 13, 2016

@laurenmcguigan Looks amazing, really I'm pretty blown away at the level of complexity of the charts you have been able to whip up so far and so quickly while I bum around with the image mapping! I think in it's current form it will work as a stacked graph if you include the JavaScript, but if you decide not to? The simpler side-by-side would require bar labels and a key, but that is just my opinion! You can format this however is easier/time sensitive for you.

One thing that is just a bit of a nitpick, and this goes for both graphs. Is there anyway to make the Y axis title be readable vertically? I have no clue if it is possible, this should illustrate what I mean:

image

Edit: That image was MUCH LARGER then I expected it to be!

@ebeshero
Copy link
Collaborator

ebeshero commented Dec 13, 2016

@jonhoranic @laurenmcguigan Yes--there's a way to make the text run vertically like that--I just read about it here: http://vanseodesign.com/web-design/svg-text-layout-and-alignment/

It takes a little futzing, but you want to add these attributes to your SVG <text> element:

<text x="whatever" y="whatever" style="writing-mode:tb; letter-spacing:5" rotate="-90"/>

You need the @style="writing-mode:tb" to set the writing mode from top to bottom.
You need the second value of style (these are CSS-style values), to give you some letter spacing, and you'll want to futz with that number--it's just one I was playing with. Look at the output and make it bigger or smaller. Without the letter-spacing part, the letters pile up on each other.
the @rotate attribute could be set to one of the following values: 0, 90, 180, 270, like degrees around a circle. You could run it backwards to -90 (which is what I did). If you plug in 90, the text plots upside-down! Mess around with the values until it looks the way you want!

@JaredKramer40
Copy link
Collaborator

@laurenmcguigan the ageGraph is up on its own page now. Good job, it looks great!

@RJP43
Copy link
Collaborator Author

RJP43 commented Dec 13, 2016

@laurenmcguigan Looks like when the line graph is on the site the dots disappear so we will have to find another color for those dots. The age graph looks great we might try to experiment with colors for those bars that are less harsh and more aligned with your site's CSS. Also, we should probably create a legend that indicates what color is male and what color is female. I think that with stacked bars it is important to output the value (amount of people) on the stacked bar pieces because although together you can easily see the total amount of people for each bar and the amount of people for the bottom part of the stacked bar it becomes a little more difficult to calculate on a quick glance the amount of people being accounted for on the second stack without the clear label actually on the bar.

These are all little things though that we can look at when we meet Wednesday morning.

@laurenmcguigan
Copy link
Collaborator

@RJP43 @JaredKramer40 @jonhoranic @ebeshero Thank you all for your feedback!! I really appreciate it! @jonhoranic I will switch the Y-axis label around, @ebeshero thank you for your help on that! And @RJP43 You are definitely right, I need to add the numbers to the graph, I was just wondering if we should also output a table with javascript, but it will probably be easier just to label them. And @JaredKramer40 Thank you for putting those on the site! I looks amazing!!!

I am going to mess around with it a little bit more with colors and such, so make sure you all keep pulling in those changes. They also both need a write up to say what they are about so I will work on that too.

@ebeshero
Copy link
Collaborator

@laurenmcguigan Definitely, I think you should do the table with the JavaScript: it'll help show more information. Great idea!

@laurenmcguigan
Copy link
Collaborator

@JaredKramer40 I changed the colors and some other stuff on my graph. I tried updating it on the site and just messed it up really bad, sorry! Can you put the new one up?

@RJP43
Copy link
Collaborator Author

RJP43 commented Dec 13, 2016

@laurenmcguigan I agree with @ebeshero that the table would provide more info. but that doesn't mean you can't have a legend and labels on the bar pieces as well.

@JaredKramer40
Copy link
Collaborator

@laurenmcguigan Yeah i can do that!

@jonhoranic
Copy link
Owner

@JaredKramer40 @laurenmcguigan Ok I updated the pie chart files and hope they are working now! All that really needs is to be moved into an HTML file and I can write up something later, just let me know what to put. I am also close to getting the image mapping finished, then I can start assigning ID's to the selections and go from there. Let me know if there is anything you need from me.

@jonhoranic
Copy link
Owner

@JaredKramer40 I also just updated the web file with my bio, just to let you know! I will be working on a methodology write up shortly as well and I will ping again when that is finished.

@jonhoranic
Copy link
Owner

@RJP43 @JaredKramer40 @laurenmcguigan @ebeshero Hey, just got the dang image map formatted, it is curently just a shell right now and it needs to be assigned href info but I wanted to know how we plan on doing this for now. We can have them all navigate to a master list on a separate page, which I think may be the easiest way to manage this quickly.

Or if we have any other ideas shout them out, other then that @JaredKramer40 you can just copy the info from that text file and drop it into an html page and (fingers crossed) it should work if I understood this correctly!

I am gonna be typing up some of out methodology paragraphs, @JaredKramer40 @laurenmcguigan please send me any info you wish from your end so I can include all our steps!

I know this is a bit of a info-dump but thank you! We are almost there guys!

@ebeshero
Copy link
Collaborator

@jonhoranic I'm not quite clear on the image-map plan, but I'm curious whether you can have the image share space on the same page with its targets. The @href values can just be pointing with a '#' in front to @id values planted anywhere on the same page...

@jonhoranic
Copy link
Owner

@JaredKramer40 Just took care of the methodology push, hopefully that can be integrated into the site without much CSS hassle!

@JaredKramer40
Copy link
Collaborator

@jonhoranic Awesome! It's up on the site now. Just got move it around a little.

@jonhoranic
Copy link
Owner

jonhoranic commented Dec 16, 2016

@JaredKramer40 @RJP43 @laurenmcguigan @ebeshero Ok so I am going to push the newly done map.html file with the paths marked up BUT NOT LINKED YET TO THE INFO YET!!! I will work on that and push that later! What I need you to do @JaredKramer40 is to make that iframe element fit properly and just display it for the time being. So far so good, once we know that it fits on the page the linking is simple, it is just going to take me some time.

Edit: Pushed everything just now, make sure to pull the changes!

@JaredKramer40
Copy link
Collaborator

@jonhoranic so it's displaying the occupants page now. Where should I put it on the page? and how big should I make it?

@JaredKramer40
Copy link
Collaborator

@jonhoranic I centered the map and iframe. Let me know what you think.

@jonhoranic
Copy link
Owner

@JaredKramer40 Looks good to me so far, can we extend the width of that iframe a tad to account for the longest entries? That and if we could add some padding between them it would be helpful. I noticed a slight issue with some things and I am making some edits that should open those images in a new browser tab. I think I am going to push what I have done so far for testing.

@JaredKramer40
Copy link
Collaborator

@jonhoranic I can do that! Yeah okay i'll make sure to pull it in.

@jonhoranic
Copy link
Owner

@JaredKramer40 @laurenmcguigan Just had to make multiple stages of corrections and pushed TWICE so please be careful when editing the mapping files and making pushes/pulls

@jonhoranic
Copy link
Owner

@JaredKramer40 @laurenmcguigan @RJP43 @ebeshero Ok, I pushed (SO PULL EVERYTHING) the clickable map with fleshed out paths, but I ran into issues and could not fully match every single one of the graves. I have the majority of it filled out and we just need to do testing to make sure it works for turn in, which I think matters most.

To make sure everything is in proper order it will require a day of full on-site documentation efforts, which the cold will not really allow at the moment. I am more concerned about having all of our web development and written explanations up and well fit on the site for the time being.

@JaredKramer40 After we get this up, is there anything you need or want me to do to help you? It also looks like I screwed up the SSI on the mapping, I meant to remove it from the "occupant.html" that on is on me.

@laurenmcguigan Anything else you need for your graphs or write ups? Let me know if there is anything you want me to do.

@jonhoranic
Copy link
Owner

@JaredKramer40 Fixed the SSI problem, that should help. Again, anything I can do let me know.

@jonhoranic
Copy link
Owner

jonhoranic commented Dec 17, 2016

@JaredKramer40 I see another problem! Gah I am sorry for these hiccups.

Here is the section of code that needs fixed on the "map.html" file:

        <!--All of these are plotted RIGHT TO LEFT, and start at the BOTTOM ROW
    and move UPWARDS. The mausoleums are listed at the end of this document-->
        <map name="Map" id="Map"> ````


The id should match the "usemap=" attribute, so could you change the id there to say "MapI"?

@JaredKramer40
Copy link
Collaborator

@jonhoranic Yeah I can do that!

@jonhoranic
Copy link
Owner

@JaredKramer40 Is the image map working for you? For some reason I cant seem to get it to work?

@JaredKramer40
Copy link
Collaborator

@jonhoranic no it's not. I can't figure it out either.

@jonhoranic
Copy link
Owner

@JaredKramer40 @ebeshero @RJP43 @laurenmcguigan With the image map not working, and with no solution found I am just going to push the remaining explanation for the pie chart, and @JaredKramer40 it should be easy to format. Other then that we will attempt to tweak this map the best we can. It is just another hiccup, but either way we have done a crazy amount of work and markup for this project overall and that is no small feat! If we have only ONE thing that does not work that shows that we took the time for to get rid of all our other problems to be left with just one!

Thank you @JaredKramer40 and @laurenmcguigan for your work and time, congratulations on a job well done team! If I do not catch you after this, happy holidays to all of you, keep in touch!

My last push for the site is up now @JaredKramer40, specifically for the pie chart.

@JaredKramer40
Copy link
Collaborator

Awesome! Thank you @jonhoranic and @laurenmcguigan. Happy holidays to you guys as well. Everything is formatted and up on the site. It looks great!

@ebeshero
Copy link
Collaborator

ebeshero commented Dec 17, 2016

@jonhoranic @JaredKramer40 @laurenmcguigan (cc: @RJP43 ) Congrats on all your hard work, Graveyard Team! I'm tinkering with your image map and trying to figure out what isn't working...I thought I had it figured out, but I'm stuck too. Here's what I tried (mind you, this is pre-grading--and because I'm stuck right along with you, this discussion has nothing to do with the project grade--I just want to see this work!) So, here's what I tried just now, locally:

On map.html:

  • added an @target to each of your <area> elements to point to "MapI"
  • added occupants.html to the @href on the <area> elements, like so:
 <area alt="row1stone1" title="Wallace" href="occupants.html#L3P4" target="MapI" shape="rect" coords="1179,634,1205,650" />

Checked in view page source, clicked on the href, and it brought up the appropriate table cell on a separately loaded page. The links seem right, as long as they point to the occupants.html page.

The problem seems to be the image map itself: the information doesn't seem to work on the image, and my hypothesis is that perhaps, @jonhoranic , you image-mapped a different image than the one currently standing on the map.html page. Can you check your image file name, and make sure it's the same one that's referenced in the <img> element on the map.html page?

I think this is the problem because when I comment out the iframe and try mousing over your map, I don't "see" the image-map responding at all--not with those little blue rectangles we saw when we experimented in our meeting Thursday. Can you check this and let me know?

I'm pushing my alterations to the map.html file to GitHub right now so you can try them where you are.

@jonhoranic
Copy link
Owner

@ebeshero I used the same image that is up now, the first round of testing I did I assumed that was the case too. I double checked the files and it all matches, I still have no idea why it will not work. There may still be some sort of "reaction" (to get those blueish boxes we saw from our test run) that is eluding us. Perhaps it is a CSS conflict or something? Otherwise we have no clue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants