Composite Graphs Project, from local repository

My project was based on my interest in functions and the way we can create many things and create code that can create other code, to be honest my first idea was to create a JSON file by uniting different data bases. It proved to be challenging but in the long process in which I didn't give up, other options came to light. the creation of the JSON file was not a success, but I created an array of objects which is very similar to the parsing of JSON files in which the JSON file is an array filled with objects, so I decided to use this array as my data and it worked as having the JSON file parsed and ready to work.

Just when I was able to create my own data base I started to work with the Data to create the graphs and test them with a simple array of people. slowly I added more variables and information to my array of objects. the concept and visual design came just at last when I was sure my main objective (the hard coding) was working properly.

** it is great to be able to to create my own objects with arrays which a can change any time, even adding new arrays, which will become values for every object, as a new programmer this gives lots of ideas, like creating data bases with user inputs.

the concept is to show in a single page the different ways to show the data in graphs for comparison. A fast and reliable tool to access basic information on salaries and employees.

the page was developed as a tool to show employees details for this particular store, which means to be updated frequently.

the structure of the page is based on a single page where tabs and modals are bringing the extra content. the tabs were used in order to present the information fast and in order to organise the way the user is introduced to the information.

the concept and company came last to the development of the arrays, the first group was created with a group of women and later on the Disney store idea came as context to the graphs, the group of women was replaced by a mixed group of employees to which I added later on the job tittle.

#Technologies Used

HTML5, CSS, Bootstrap, Jquery, DC, D3 and Crossfilter, JavaScript, github, git bash, pycharm.

• my main objective was from the beginning to create my own automated data base which could present random data.

• My first idea was the creation of a function which could create a Json file from a group of arrays. the creation of a external file with the right formatting, which managed to be impossible with my knowledge.

• the second idea came after analysing the structure of a parsed Json file in which the file takes the form of an array of objects to which I was sure it was possible to do.

• the challenge came first creating the array of objects in which loops and methods had to work perfectly to create my array of objects.

• the second challenge was to use this array of objects on the DC and D3 modules in which I decided to omit the parsing of a json file and work directly with the new objects array.

• the main Js file is https://github.com/CEsarABC/Wproject/blob/master/cleanGraphs.js

• once all graphics scripts were working properly the visual design of the page started by using adobe illustrator to create a simple but organised Mockup, bootstrap elements and media queries were used to maintain the look of the page in different formats.

• the media queries were set base on the DC and D3 modules. set to a minimum resolution of 992px in order to keep the content and graphs stable. tested in tablets and phones.

• I created multiple test files for Java testing and HTML testing git was used in Pycharm software as version control for all my changes.

• the project was divided into html, css, js, modules, folders and files in order to organise the project.

*the JS file with the graphs is https://github.com/CEsarABC/Wproject/blob/master/cleanGraphs.js

*all modules used in the document are stored locally in the folder jsModules

• the integration of github came later in the development and the master repository was created on my study folder which contains the project folder. the use of github pages became difficult as I couldn't set the page to a particular folder.

• using git hub was challenging as by mistake I created my repository in my study folder and not in the project folder, this was corrected at last with help of my tutor.

• main repository https://github.com/CEsarABC/Wproject

• git hub pages was implemented successfully.

• https://cesarabc.github.io/Wproject/index.html project visualization.

thanks to the code institute for giving me the opportunity to learn.

thanks to my tutor Victor Miclovich for the support and the guide

the code it's been writen taking examples from different internet tutorials and using mostly as guide the code academy exercises for my development.

blocks of code were taking from my code academy exercises on Data Visualization, adapted to my development. the main reason for this was that when trying to write the code, the graphs were not working when tested, so I decided to copy the working blocks of code and adapt them for my work. the problem is not to have a framework to code the D3 and DC graphs in order to be corrected, the way the coding in DC and D3 works is different to the programing languages I've been working on.