4.8 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7178d8c242eddfaeb5bd13 | Visualize Data with a Scatterplot Graph | 3 | 301467 | visualize-data-with-a-scatterplot-graph |
--description--
Objective: Build an app that is functionally similar to this: https://scatterplot-graph.freecodecamp.rocks.
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
يمكنك استخدام HTML و JavaScript و CSS و مكتبة التصوير المستندة D3. تطلب الاختبارات إنشاء محاور (axes) باستخدام خاصية المحور في D3، الذي يؤدي تِلْقائيًا إلى وضع علامات على طول المحور. وهذه العلامات لازمة لاجتياز اختبارات D3, لأن تُستخدم مواقعها لتحديد محاذاة العناصر المرسومة بيانيٍ. ستجد معلومات حول إنشاء محاور في https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. يتم الاستفسار عن العناصر المطلوبة DOM (غير متغيرة) في لحظة إجراء كل اختبار. إذا كنت تستخدم framework (مثل Vue على سبيل المثال)، قد تكون نتائج الاختبار غير دقيقة للمحتوى الديناميكي. ونأمل أن نستوعبها في المستقبل، ولكن هذه frameworks غير مدعومة حاليا لمشاريع D3.
قصة المستخدم 1: يمكنني أن أرى عنصر title مع موافقه id="title".
قصة المستخدم 2: يمكنني رؤية محور أفقي (x-axis) يوافق بمتغير يحتوي على id="x-axis".
قصة المستخدم 3: يمكنني رؤية محور رئسي (y-axis) يوافق بمتغير يحتوي على id="y-axis".
قصة المستخدم 4: يمكنني أن أرى نقاط (dots) ولكل منها فئة (class) يسمى dot، التي تمثل البيانات التي يتم تخطيطها.
قصة المستخدم 5: كل نقطة يجب أن تحتوي على الخصائص data-xvalue و data-yvalue التي توافق القيم x و y.
قصة المستخدم 6: يجب أن يضمن كل نقطة من data-xvalue و data-yvalue نطاق البيانات الفعلية وبتنسيق البيانات الصحيحة. في data-xvalue، يقبل تقييم الاختبارات الأرقام الصحيحة (السنوات الكاملة) أو كائنات Date. في data-yvalue (لدقائق)، استخدم كائنات Date.
قصة المستخدم 7: يجب أن تتوافق data-xvalue ونقطتها الموافقة مع النقطة/القيمة الموافقة على محور أفقي (x-axis).
قصة المستخدم 8: يجب أن تتوافق data-yvalue ونقطتها الموافقة مع النقطة/القيمة الموافقة على محور أفقي (y-axis).
قصة المستخدم 9: يمكنني أن أرى تسميات علامة (tick) متعددة على المحور الرأسي (y-axis) مع تنسيق الوقت %M:%S.
قصة المستخدم 10: يمكنني أن أرى تسميات علامة (tick) متعددة على المحور الأفقي (x-axis) الذي يظهر السنة.
قصة المستخدم 11: يمكنني أن أرى أن نطاق (range) تسميات (labels) المحور الأفقي (x-axis) يقع ضمن نطاق بيانات المحور الأفقي (x-axis) فعلاً.
قصة المستخدم 12: يمكنني أن أرى أن نطاق (range) تسميات (labels) المحور الرأسي (y-axis) تقع ضمن نطاق بيانات المحور الرأسي (y-axis) فعلاً.
قصة المستخدم 13: يمكنني رؤية legend تحتوي على نص وصفي يحتوي على id="legend".
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.
User Story #15: My tooltip should have a data-year property that corresponds to the data-xvalue of the active area.
Here is the dataset you will need to complete this project: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json
You can build your project by using this CodePen template and clicking Save to create your own pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Once you're done, submit the URL to your working project with all its tests passing.
--solutions--
// solution required