http://nadavk2002.github.io/a1-ghd3/
Above is the website to my page, if properly published on my part, you will see the Israeli flag that I put my own twist on an Israeli flag. I made the flag's border with lines of circles of the same color as the two rectangle stripes the flag would normally have, and then overlayed two triangles to make a filled-in 6-pointed Star of David. The fun part behind this visualization is the animated center of the star, a hexagon oriented to fit in the middle of the star as normal and it spins 360 degrees with a sped-up start and a slowed-down finish.
A majority of my learning came from the codecademy Learn JavaScript, HTML, and CSS intro lessons, as well as the D3 documentation and chat gpt for refining and starts.
Here are two screenshots to also display my above description: Still image of visualization: https://github.com/nadavk2002/a1-ghd3/blob/gh-pages/Still%20image%20of%20animated%20israeli%20flag%20website.png
Dynamic image of visualization: https://github.com/nadavk2002/a1-ghd3/blob/gh-pages/Dynamic%20image%20of%20animated%20israeli%20flag%20website.png
Technical achievement: I am what the usual WPI student would say is a sufferer of "imposter syndrome" where my confidence in coding is next to none and I really took many hours (8) to complete this seemingly easy assignment, my technical achievement would be that I was able not only to meet the basic requirements of the assignment but also to provide arrays of shapes in the circle borders as well as animate the hexagon in the center of the star and learn how to adjust specific parameters to meet my satisfaction. I implemented a few functions to either create the border or draw the triangles meant for the circles and star, as well as the necessary code for the animation
Design achievement: I think that this visualization of an Israeli flag is pleasant to the observing eye since it closely resembles the actual Israeli flag, while the colors are simple, the uniformity of the image and placement on the page are things I had to learn and am proud of how then turned out, as I wanted to visualize something unique. Who knows, maybe this is the first animated Israeli flag for the history of this data viz class!) Assignment 1 - Hello World: GitHub and d3
This is a starting project to make sure you can write and host a webpage that generates graphics using d3.
The primary goal is to be able to generate graphics primitives (circles, rectangles, lines, polygons) at different locations on the screen with different colors.
The secondary goal is to introduce you to coding on GitHub, including creating a gh-pages branch to host your visualizations.
You may write everything from scratch, or start with demo programs from books or the web. If you do start with code that you found, you must identify the source of the code in your README and, most importantly, make non-trivial changes to the code to make it your own so you really learn what you're doing.
For example, you could download one of the d3.js examples, read it through so you understand what it's doing, and then change the appearance of the graphical output to use different color schemes, different primitive shapes, different layouts of the primitives, and so on.
If you need a JavaScript/HTML/CSS refresher, see JavaScript Codeacademy or find one of your choosing on the web.
If you need a Git/GitHub refreseher, some possible resources include Getting Started with GitHub, the GitHub Guides (especially the ones on Hello World, and Understanding the GitHub Flow, and Forking Projects), and CodeSchool's Try Git Course.
- Your project should contain at least four kinds of graphics primitives (circles, rectangles, lines, polygons) in different colors.
- Your document should identify the source of the code if you start with code that you found.
- Your code should be forked from the GitHub repo and linked using GitHub pages. See the "GitHub Details" section below for detailed instructions on how to do this.
- Fork the GitHub Repository for Assignment 1. You now have a copy associated with your username.
- Make changes to index.html to fulfill the project requirements.
- Make sure your "main" branch matches your "gh-pages" branch. See the GitHub Guides referenced above if you need help.
- Edit the README.md with a link to your gh-pages site "http://YourUsernameGoesHere.github.io/01-ghd3/index.html".
- To submit, make a Pull Request on the original repository.
- Note: name your pull request using the following scheme:
a1-your Gh username-your first name-your lastname
For this project you should use d3.js. You can learn from examples on the d3.js site or start from scratch.
See the Using d3js documentation for how to run your own local server.
Creative solutions are welcome! In the past I've seen recreations of paintings, interactives, and more.
Go beyond the minimum requirements of this project. Experiment with other aspects of the d3 API and d3 Tutorials. Try making the elements interactive, for example, or animate them.
Grades are on a 120 point scale. 96 points will be graded for functionality: the program does what the assignment requests with an informative README.
We will use Google Chrome to view submissions. Be sure to test your code there.
Below are some, but not necessarily all, of the key points we will consider during grading:
- Circles and Rectangles
- Lines
- Polygons
- Different colors
- README Quality
- A description of what you have created. 1-2 screenshots are recommended for the README.
- A working link to the hosted files (usually the gh-pages 'live' url)
- Section for Technical and Design Achievements
Technical Achievement Desription -- 12
Design Achievement Description -- 12
Remember, it is up to you to define what constitutes a technical and design achievements. Be ambitious as these are designed to allow you to shape your learning. These are the only way to move from B to A territory.