Courses‎ > ‎Software Development‎ > ‎Dyrland-Weaver‎ > ‎

Work

All smaller assignments (those posted here) should be uploaded as submodules to the workshop repository in the appropriate assignment directory.

Make sure to put your submodule in the folder of your period and include your name and the name of your partner(s) (if applicable) in the repo name.

Work 14: I'd kinda' like to be the president. So I could show you how your money's spent

posted Mar 23, 2018, 9:48 AM by JonAlf Dyrland-Weaver   [ updated Mar 23, 2018, 9:52 AM ]


It's federal budget season and we thought you might like to know something about where the money goes. 
  • With your table buddy, use d3 to create a webpage that displays information about the federal budget form 2 different years.
    • Specifically, create a bar chart that shows budget data.
    • Use a transition effect when changing from one year to another.
  • This website has pretty good data on federal budgets going back to the 1900s: http://federal-budget.insidegov.com
  • Example d3 code has been posted on the notes and code page: https://github.com/stuy-softdev/notes-and-code/tree/master/smpl/90_d3
  • This will be due Monday in the AM
Submit this in the workshop under 14_d3-bars

Work 13: I'm the Scat(er plot) man!

posted Mar 15, 2018, 10:06 AM by JonAlf Dyrland-Weaver   [ updated Mar 19, 2018, 10:59 AM ]

ski-ba-bop-ba-dop-bop

With your table buddy:
  • Find some data that you can easily put into some javascript code.
  • Use d3 to create a scatter plot with your data.
    • In order to make a scatter plot, you'll need 2 kinds of data that can be related to each other (for example, temperature and precipitation organized by city).
ADDED MONDAY 3/19
  • In your groups, look at two different submissions (the two below yours in GitHub).
    • Provide feedback via a GitHub issue with ways the plot could be improved.
  • Look at the feedback for your plot and improve upon it.
submit this under 13_d3-scatter

Work 12: Medallions of Data

posted Mar 13, 2018, 10:10 AM by JonAlf Dyrland-Weaver

Recently, the Winter Olympics concluded. You and your table buddy will use that data to make a webpage showing medal data.
  • Pick 2 countries, each must have at least 1 medal of each type (Gold, Silver, Bronze).
  • Generate an svg element with three circles.
  • Tie the size to each circle to the number of medals won.
    • You can hardcode this data into your javascript.
  • Make it clear how to switch between the two countries.
Submit this as 12_d3-medals

Work 11: Who doesn't love a bouncy castle?

posted Mar 9, 2018, 10:52 AM by JonAlf Dyrland-Weaver

With your table buddy write the following html/js program:
  • HTML needs an svg element and a clear button.
  • When a user clicks on the svg element, a circle should appear.
  • All circles should immediately move around the screen in the same way as in previous assignments (dvd logo style).
  • The clear button should clear all circles and stop the animation
Submit this under 11_svg_bounces

Work 10: I Object!

posted Mar 7, 2018, 10:17 AM by JonAlf Dyrland-Weaver   [ updated Mar 8, 2018, 10:17 AM ]

(This will be due Friday)
With your table buddy: Take your code from work 09 and objectify it.
  • Behavior remains the same. Driving code gets the job done differently.
  • Each dot is an object, with at least these attributes and methods:
    • x-coordinate
    • y-coordinate
    • radius
    • color
    • svg element
    • display()
    • remove()
  • Goal: Each circle an instantiated object, every action accomplished via method call.
10_js-obj

Work 09: Is anyone listening?

posted Mar 6, 2018, 9:41 AM by JonAlf Dyrland-Weaver

Create an HTML/JS program with the following features:
  • An SVG container
  • 1 button: clear
  • Enable the following event listeners for the svg area:
    • (Do NOT put all of this in a single event listener.)
    • Clicking on a blank section of the svg area should create a circle at that position.
    • Clicking on a circle once should change its color. (No new circles should be added to the svg container.)
    • Clicking on a circle a second time should remove the circle and add a new one to the svg container at a random location.
Save in workshop under 09_svg-capture,

Work 08: It's time for vanimaniacs

posted Mar 1, 2018, 9:08 AM by JonAlf Dyrland-Weaver

Recreate the animations from work 02 using svg.

Submit this ins the 08-svg-anim folder in workshop2.

Work 07: Making vector connections.

posted Feb 28, 2018, 10:13 AM by JonAlf Dyrland-Weaver


Recreate your connect the dots html/javacsript program using SVG instead of the canvas.
  • Every time the user clicks inside the SVG area, a circle should be drawn.
  • After the first circle, every subsequent click should also result in a line from from the previous circle to the next.
  • Include a clear button
    • clearRect() will not work, that is a canvas method. You need to remove all the circles somehow...
Put this under 07_svg in workshop2

Work 06: There's data in your flask.

posted Feb 26, 2018, 9:32 AM by JonAlf Dyrland-Weaver

Whip up a Flask app to give a front-end to your db querying machinery.
  • Keep it simple.
  • When your flask app launches, it should drop your db on your local Simpson and rebuild it.
  • Provide at least one form element to and adequate explanation to facilitate querying.
  • Tailor to suit your data.
Save in workshop under 06_mongo, as lastF-lastF

Work 05: Documenting your data

posted Feb 15, 2018, 10:18 AM by JonAlf Dyrland-Weaver

  • With your buddy from the last work session, find a dataset of interest. (https://github.com/jdorfman/awesome-json-datasets)
    • Save your .json file in your work repo.
    • Write a new Python script to...
      • Create a new Mongo database on your local Simpson. Use your team name as its name.
      • Import your JSON dataset into your new database.
      • Reproduce query functionality from last work, adapted analogously to fit your data.
    • Include a block comment at the top of your script explaining your dataset. Include
      • name of dataset and description of its contents
      • download hyperlink
      • brief summary of your import mechanism
  • Save in workshop under 04_mongo

1-10 of 14