We look at the d3 select, append and text methods to create html elements and modify their text. This is the first video in the data visualization with d3 series. Link to challenge : https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-document-elements-with-d3 Concepts: d3.select() Selects the first element that matches the specified selector string. If no elements match the selector, returns an empty selection. If multiple elements match the selector, only the first matching element (in document order) will be selected. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_html selection.append(type) If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_append selection.text([value]) If a value is specified, sets the text content to the specified value on all selected elements, replacing any existing child elements. If the value is a constant, then all elements are given the same text content; otherwise, if the value is a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The function’s return value is then used to set each element’s text content. A null value will clear the content. If a value is not specified, returns the text content for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_text -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience. Thanks for Watching! ... https://www.youtube.com/watch?v=q6GWkbUWFBg

This is a guided walkthrough for the 'Visualize Data with a Scatterplot Graph' challenge on freeCodeCamp. We import some data about doping in bicycle racing, and use d3.js to produce a scatterplot diagram with it. Written Notes and Source Code : https://www.notion.so/ganeshh123/Visualize-Data-with-a-Scatterplot-Graph-f3b277dc35294accb4d42a0358b92009 Timestamps: 0:00 - Project Setup 05:10 - Creating Variables and Functions 08:33 - Fetching JSON Data 12:23 - User Story #1: I can see a title element that has a corresponding id="title" 13:54 - User Story #2: I can see an x-axis that has a corresponding id="x-axis" 18:12 - User Story #3: I can see a y-axis that has a corresponding id="y-axis" 22:47 - User Story #4: I can see dots, that each have a class of dot, which represent the data being plotted 25:00 - User Story #5: Each dot should have the properties data-xvalue and data-yvalue containing their corresponding x and y values 26:38 - User Story #6: The data-xvalue and data-yvalue of each dot should be within the range of the actual data and in the correct data format. For data-xvalue, integers (full years) or Date objects are acceptable for test evaluation. For data-yvalue (minutes), use Date objects 29:10 - User Story #7: The data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis 33:46 - User Story #8: The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis 39:50 - User Story #9: I can see multiple tick labels on the y-axis with %M:%S time format 40:26 - User Story #10: I can see multiple tick labels on the x-axis that show the year 41:07 - User Story #11: I can see that the range of the x-axis labels are within the range of the actual x-axis data 42:40 - User Story #12: I can see that the range of the y-axis labels are within the range of the actual y-axis data 43:37 - Changing the dot colors 46:17 - User Story #13: I can see a legend containing descriptive text that has id="legend" 48:14 - User Story #14: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area 54:50 - User Story #15: My tooltip should have a data-year property that corresponds to the data-xvalue of the active area 54:50 - User Story #15: My tooltip should have a data-year property that corresponds to the data-xvalue of the active area 56:00 - Final Touches and Styling -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standar ... https://www.youtube.com/watch?v=OvtT4X2L9Fo

We have a navigator object which the browser provides. This has methods to obtain geo location data, including a user's GPS coordinates, with permission of course! Link to challenge : https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates Concepts: navigator The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. https://developer.mozilla.org/en-US/docs/Web/API/Navigator getCurrentPosition() The Geolocation.getCurrentPosition() method is used to get the current position of the device. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition GeolocationPosition The GeolocationPosition interface represents the position of the concerned device at a given time. The position, represented by a GeolocationCoordinates object, comprehends the 2D position of the device, on a spheroid representing the Earth, but also its altitude and its speed. https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPosition innerHTML The Element property innerHTML gets or sets the HTML or XML markup contained within the element. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML -————————————————————————————————————- JSON (JavaScript Object Notation) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types. Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page. freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience. Thanks for Watching! ... https://www.youtube.com/watch?v=CZy5-rTTpQA

If we are building an API, we can serve JSON instead of HTML files, which is the general convention for API data transfer. We can call the json() method to convert a JavaScript object into a JSON response and send it. Link to challenge : https://www.freecodecamp.org/learn/apis-and-microservices/basic-node-and-express/serve-json-on-a-specific-route Written Guide : https://www.notion.so/ganeshh123/Serve-JSON-on-a-Specific-Route-9fedc570ce204cd6af12bc8bb0f82961 Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1SdIZ3uhbXnKAq2UcICSnWS All Writen Guides for this course : https://www.notion.so/ganeshh123/dab5e189407244c793c2f32d066eee9f All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26 Concepts: response.json() Sends a JSON response. This method sends a response (with the correct content-type) that is the parameter converted to a JSON string using JSON.stringify(). The parameter can be any JSON type, including object, array, string, Boolean, number, or null, and you can also use it to convert other values to JSON. https://expressjs.com/en/api.html#res.json app.get() Routes HTTP GET requests to the specified path with the specified callback functions. https://expressjs.com/en/5x/api.html#app.get.method -————————————————————————————————————- Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Express.js, or simply Express, is a web application framework for Node.js. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience. Thanks for Watching! ... https://www.youtube.com/watch?v=FfJQZJlll40