كيفية عمل مخطط JavaScript الأول الخاص بك باستخدام JSCharting

عندما تبدأ كمطور جافا سكريبت مبتدئ ، أعتقد أنه من المهم متابعة مشاريع مثيرة للاهتمام. بهذه الطريقة يمكنك التأكد من أنك تستمتع أثناء التعلم ، وستجد على الأرجح مجالًا من التخصص تستمتع به.

كما يقولون ، "إذا كنت تحب ما تفعله ، فلن تعمل يومًا في حياتك" .

في هذه المقالة ، سوف أقدم لكم تصور البيانات الأمامية ، وهو شغفي الشخصي. ربما سيصبح شغفك أيضًا!

أكثر اللحظات إرضاءً بالنسبة لي كمطور هي عندما يمكنني رؤية أو تجربة نتائج ما صنعته. إنه لأمر مُرضٍ للغاية إنشاء مخطط يكشف عن رؤى مثيرة للاهتمام حول بياناته ، أو تجربة تفاعلية تساعد في استكشاف تفاصيل مجموعة بيانات فريدة. كلما كانت النتيجة أكثر أهمية ، شعرت بمكافأة أكبر.

ومع ذلك ، فقد أدركت أن مقدار العمل الذي تضعه في مشروع ما لا يرتبط بالضرورة بشعور الإنجاز - في بعض الأحيان يكون الأمر رائعًا حتى عندما يكون سهلاً نسبيًا.

بمرور الوقت ، ستجد الأدوات التي من شأنها أن تجعلك أكثر كفاءة ، وأحيانًا ستنقل الجبال بجهد ضئيل. هناك العديد من مكتبات وأدوات الرسم البياني المتاحة في مجال تصور البيانات. باستخدام الأدوات المناسبة ، ستقوم بإنشاء مخططات جديدة بجهد ضئيل ، بغض النظر عن نوع الرسم البياني الذي تحتاجه. أنا شخصياً أعتقد أن datavis يعود بمكافأة كبيرة على استثمارك للوقت والجهد.

في هذا البرنامج التعليمي سوف تستخدم عددًا من الأدوات للحصول على البيانات عبر الإنترنت ومعالجتها ورسم مخطط جميل يمكن عرضه في أي متصفح حديث. يمكنك النقر فوق الروابط أدناه لتنزيل رمز مثال لكل خطوة على حدة ، أو عرضها جميعًا على GitHub ، أو تنزيل جميع الخطوات مرة واحدة هنا: all-steps.zip.

النتائج

في نهاية هذا البرنامج التعليمي ، ستنشئ هذا الرسم البياني التفاعلي المستند إلى البيانات. سوف تتعلم كيفية الحصول على البيانات عبر الإنترنت ، ومعالجتها ، وإنشاء مخطط باستخدام تلك البيانات. ستتمكن أيضًا من إنشاء مخططاتك الخاصة من البداية.

مخطط خطي تفاعلي جافا سكريبت

بعد معالجة البيانات وتخطيطها ، ستتعلم أيضًا كيفية إجراء تعديلات على المخطط بما في ذلك تعديل وسيلة الإيضاح الافتراضية ، وتمكين الشعيرات المتقاطعة لمحور x مع تلميحات الأدوات ، وتطبيق التعليقات التوضيحية النصية لإضافة سياق ومعلومات أخرى إلى المخطط.

الأدوات

للبدء ، استخدم متصفح الإنترنت مثل المتصفح الذي ربما تستخدمه لقراءة هذه المقالة. أوصي بـ Chrome لأنه يوفر تجربة رائعة وأدوات مدمجة للمطورين.

بعد ذلك سوف تحتاج إلى محرر نصوص. شيء بسيط مثل المفكرة سيعمل. لكني أقترح استخدام محرر كود أكثر تقدمًا مثل VS Code ، لأن هذه بيئة ستقضي معها الكثير من الوقت. سوف يمنحك تجربة تشفير أكثر ملاءمة وممتعة ، ويجعل كتابة HTML5 و CSS وجافا سكريبت أسهل على العين. الأهم من ذلك ، إذا نسيت اقتباسًا أو فاصلة في مكان ما ، فيمكن لمحرر الشفرة مساعدتك في العثور على الخطأ.

يمكن أن تساعدك هذه المقالة في اختيار أفضل محرر كود JavaScript لتطوير الويب.

ستستخدم مكتبة مخطط JSCharting لرسم وإضافة وظائف تفاعلية تلقائيًا لهذا المخطط. لن تكون هناك حاجة إلى مكتبات JavaScript أخرى مثل jQuery أو الأنظمة الأساسية للواجهة الأمامية بما في ذلك React و Angular (شائعة الاستخدام لمشاريع مواقع الويب).

لماذا JSCharting؟

JSCharting هي مكتبة رسوم بيانية جافا سكريبت يمكنها رسم العديد من الأنواع المختلفة من المخططات باستخدام SVG. إنه سهل الاستخدام والبدء به ، لذا فهو مناسب تمامًا لهذا البرنامج التعليمي. واجهة برمجة التطبيقات API (واجهة برمجة التطبيقات ، والمعروفة أيضًا باسم الخيارات والإعدادات اللازمة لإنشاء المخططات) تجعل الأشياء الصعبة أكثر بساطة وهي خيار جيد عند تجربة تصورات البيانات.

يمكنك استخدام JSCharting مجانًا للاستخدام الشخصي والتجاري مع العلامة التجارية المضمنة.

يمكنك إنشاء مخططات سريعة الاستجابة باستخدام JSCharting من خلال بضع خطوات بسيطة:

  • حدد علامة في ملف HTML بمعرف فريد.
  • قم بتوفير هذا المعرف والبيانات وأي خيارات أخرى عند الاتصال JSC.Chart()في ملف JavaScript.

هذا هو. سيرسم JSC مخططًا احترافيًا يملأ علامة div هذه بمرئيات عنصر SVG. سيكون الرسم البياني متجاوبًا وتفاعليًا دون أي جهد إضافي.

البيانات

ستستخدم ملف بيانات مقدمًا من NCHS (المركز الوطني للإحصاءات الصحية) يسرد متوسط ​​العمر المتوقع التاريخي للذكور والإناث في الولايات المتحدة.

يمكنك العثور عليها هنا: //data.cdc.gov/resource/w9j2-ggv5.csv.

يحتوي ملف CSV هذا على بيانات تصنف متوسط ​​العمر المتوقع حسب السنة والعرق والجنس. ستستخدم بعض هذه البيانات لرسم خط اتجاه بسيط للذكور / الإناث على مدار المائة عام الماضية.

CSV (قيم مفصولة بفواصل) هو تنسيق رائع لنقل البيانات عبر الإنترنت. إنه مضغوط ، يمكن قراءته من قبل الإنسان ويمكنك فتحه بشكل ممتاز ، وهو أمر رائع أيضًا.

لذلك بدون مزيد من اللغط ، فلنبدأ.

الخطوة 1 - أضف مخططًا فارغًا

يحتوي الملف المضغوط الأول على نقطة بداية فارغة يمكنك تعبئتها أثناء تقدمنا. إذا ضاعت أو ارتبكت ، أو كنت ترغب في التخطي للأمام ، فإن الملف المضغوط في نهاية أو في كل قسم سوف يجعلك تصل إلى السرعة.  

إذا كنت ترغب في تنزيل جميع الملفات مرة واحدة ، فراجع all-steps.zipبدلا من ذلك .

الخطوة 1 - a.zip

يحتوي هذا الملف المضغوط على الملفات التالية.

  • index.html
  • js/index.js

في .htmlالملف فارغ باستثناء بعض التعليمات البرمجية القياسية التي تجعل من ملف صالح و .jsملف فارغ تماما.

تتمثل الخطوة الأولى في إضافة بعض البرامج النصية إلى ملف صفحة الويب بتنسيق HTML. يقترح الأشخاص عادةً إضافة العلامات داخل العلامات. ومع ذلك ، بالنسبة إلى البرامج النصية التي تؤثر على محتوى HTML ، فمن الأفضل غالبًا إضافتها بعد علامة الإغلاق .

تقوم هذه التقنية بتحميل كل HTML في DOM قبل تنفيذ أي JavaScript. يحتاج المخطط إلى تحميل HTML قبل أن يتمكن من الرسم فيه. DOM (نموذج كائن المستند) هو تمثيل لرمز HTML الخاص بك في ذاكرة المتصفح. بمجرد تحميل HTML في DOM ، يمكن للمتصفح عرضه ويمكن لـ JavaScript التفاعل معه.

ابدأ بإضافة مكتبة JSCharting إلى ملف HTML. افتح index.htmlالملف في المحرر الذي تختاره. ثم قم بإضافة علامة البرنامج النصي لتضمين JSCharting بعد علامة الإغلاق . يجب أن يبدو الرمز الناتج في أسفل الملف كما يلي:

يشير عنوان URL الخاص بالمكتبة إلى CDN (شبكة توصيل المحتوى). يستضيف رمز المخطط ويجعل من الملائم إضافة المكتبة بسرعة إلى أي صفحة HTML لنماذج المخططات الأولية والتجريب. يمكنك أيضًا تنزيل المكتبة واستخدامها محليًا أو استخدام حزمة npm في مشروعك ، لكن CDN لا يتطلب أي خطوات إضافية.

بعد ذلك ، باستخدام نفس الأسلوب ، أضف علامة نصية أخرى تشير إلى ملف JavaScript الفارغ. أضف هذا البرنامج النصي بعد jscharting.jsالنص بحيث يبدو كما يلي:

عظيم. نحن جاهزون تقريبًا لرسم مخطط فارغ. آخر شيء عليك القيام به هو إضافة عنصر نائب داخل ملف HTML لتحديد المكان الذي نريد رسم هذا المخطط فيه.

أضف كود HTML هذا داخل العلامات.

يجب أن يكون للمعرّف div معرّفًا حتى تتمكن من إخبار الرسم البياني عن div الذي تريد الرسم فيه chartDiv.

قد تلاحظ سمة النمط للعلامة. وهي تجعل div 50٪ من عرض النافذة وطول 300 بكسل. يقوم نمط الهامش margin:0 auto;بتوسيط div على الصفحة. سيملأ المخطط حجم div مهما كان حجمه ، لذا فإن تغيير حجم div يعد طريقة جيدة للتحكم في حجم الرسم البياني.

أنت جاهز تمامًا باستخدام ملف HTML. افتح index.jsالملف وأضف مخططًا فارغًا إلى هذه الصفحة عن طريق كتابة الكود التالي الذي يتضمن معرف div chartDiv:

JSC.Chart('chartDiv', {});

افتح index.htmlالملف في متصفح (اسحب الملف وأفلته في متصفح الويب مثل Chrome).

ليس هناك الكثير لتراه بعد ، ولكن قد تلاحظ وجود شعار JSC صغير على هذه الصفحة. يشير ذلك إلى أن المخطط سلكي ورسم.

يُظهر شعار JSCharting أن المخطط يعمل

step1- ب.zip

الخطوة 2 - العب مع الرسم البياني قليلاً

حسنًا ، كاختبار ، دعنا نضيف قيمتين للمخطط لتصور لنرى كيف يعمل.

بالعودة إلى index.jsالملف ، استبدل المحتوى بالكود التالي الذي يضيف المزيد من الخيارات إلى الرسم البياني.

JSC.Chart('chartDiv', { type: 'horizontal column', series: [ { points: [ {x: 'Apples', y: 50}, {x: 'Oranges', y: 42} ] } ] });

الآن قم بتحديث (F5) نافذة المتصفح حيث index.htmlتم تحميل الصفحة.

مخطط عمودي أفقي بسلسلة واحدة ونقطتين

لطيف! لقد قمت للتو بإنشاء مخططك الأول باستخدام JavaScript.

لقد قمت بإنشاء مخطط شريطي عن طريق تعيين خيار نوع المخطط على 'horizontal column'. إذا كنت تفضل عمودًا رأسيًا ، فاضبط القيمة على 'column'. لقد أضفت أيضًا سلسلة بنقطتين إلى مخطط التفاح والبرتقال.

All chart data is made up of series and points. A series is simply a group of data points. Charts can contain one or more data series. Data points consist of values that map to the x and y axes. Points can also include many other descriptive variables and values.

The example above contains only one series. Now let's look at the options for a chart with two series. Replace the content of the JavaScript file with this code.

JSC.Chart('chartDiv', { type: 'horizontal column', series: [ { name:'Andy', points: [ {x: 'Apples', y: 50}, {x: 'Oranges', y: 32} ] },{ name:'Anna', points: [ {x: 'Apples', y: 30}, {x: 'Oranges', y: 22} ] } ] });

Refreshing the browser window will show this chart.

مخطط عمودي أفقي مع سلسلتين

The chart options look similar. Still a bar chart, but this time there is an extra object in the series array.  We also added name properties for each series so the chart can identify them in the legend.

If you are interested in making different charts like radar charts, area charts, pie charts, gantt charts, or even calendar heatmap charts, take a look at the JSCharting examples gallery and the source code (chart options) used to create those charts. You can quickly learn how to use other chart features by copying the available examples.

step2.zip

Step 3 - Prepare the data

The CSV data format is exactly that – Comma Separated Values. The file contains rows (lines) and each row represents a record or entry. Normally the first row of values contains the names of each comma separated value (column). Subsequent rows contain the values themselves.

name,age chris,26 mike,34

CSV is human readable, but there are variations of this format. Sometimes if values contain commas (e.g. mailing addresses) the format doesn't work as-is so each value is also wrapped in quotes. That way the commas inside quotes are ignored and the format can still work by using only the commas outside of quotes to separate the values.

"name","age","parents" "Chris","26","Gregory, Mary" "Mike","34","David, Sarah"

Values can also be separated using a different character like tabs in place of commas.

But let's not get bogged down in minutia. JSCharting provides a number of tools that help with this process and we will use one of them to skip worrying about the CSV file format and convert it to JSON (JavaScript Object Notation). The result will be an array of objects. Each object represents a row with named properties. The first row in the CSV file is used to define the names of those properties.

This is the url of the data we are interested in: //data.cdc.gov/resource/w9j2-ggv5.csv.

You can click to download and open it in excel.

However, you will download and access this CSV data in real-time using JavaScript code. The code below may be slightly confusing at first, but it's short and you can reuse it to get any CSV, text, or JSON files over the internet programmatically. It is similar to the older AJAX technology but much simpler to use.

Once again, replace the content of the index.js file with the following:

fetch('//data.cdc.gov/resource/w9j2-ggv5.csv') .then(function (response) { return response.text(); }) .then(function (text) { csvToSeries(text); }) .catch(function (error) { //Something went wrong console.log(error); }); function csvToSeries(text) { console.log(text); }

Why so complicated? It is because when you request a file, it does not immediately become available. There is a delay and you have to wait for the file to arrive. So first you request the file from another website using fetch().

fetch('//data.cdc.gov/resource/w9j2-ggv5.csv')

Then the code inside the then(...) argument function gets called with the response when it arrives. This function converts the response into text and returns it, which passes the result to the following then() argument function.

.then(function (response) { return response.text(); })

The next then(...) argument function calls the csvToSeries() function, and passes the text as an argument.

.then(function (text) { csvToSeries(text); })

In the catch() function, you can specify what to do if anything goes wrong. For example maybe the internet is down, or the URL is not correct.

.catch(function (error) { //Something went wrong console.log(error); });

In this case, the error is sent to the console.

In the csvToSeries() function we pass this text to the console for inspection.

function csvToSeries(text) { console.log(text); }

? Note: The native fetch() function is not supported in Internet Explorer 11. If you want to support this browser as well, you can use the JSC.fetch() function which comes with JSCharting. It provides the same functionality, but adds additional support for IE11.

Drag the index.html file into a browser window (or refresh the page if already open) and press F12. This will open the DevTools window of the chrome browser. By default, the bottom half of the DevTools window will show the console output. This is where the text is sent when you run code like:

console.log(text);

You can also paste or write code into this console window to execute it. Try pasting the entire code snippet above into the console window (next to the > character) and press enter. You will notice you get the same result in the console window output. This can be useful for testing a line of code and experimenting.

step3-a.zip

At this point you have retrieved the text of the CSV file over the internet and sent it to the console to prove that it works. Now we can start to work with it.

Let's take a look at this data file to get an idea of what's inside: //data.cdc.gov/resource/w9j2-ggv5.csv

I used excel to sort the rows by the year column to analyze the rows of data for a single year.

Each year contains 9 rows with data based on race and sex. We are only interested in the highlighted male and female values of all races for each year. You will create two series based on the highlighted rows. A series for female and one for male values.

Now that you have an idea of what needs to happen, let's get started.

First, let's use the JSC.csv2Json() function to convert the text into JSON format and pass it to the console to see what it does.

Update the csvToSeries() function with the following code:

function csvToSeries(text) { let dataAsJson = JSC.csv2Json(text); console.log(dataAsJson) }

Refresh the browser to see the updated console output.

The console shows an array of 1062 records. And this is one of these records:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

? Note: The console can display arrays, and objects for inspection and you can expand and collapse sections in the console to explore details.

The property name average_life_expectancy is a little long, but you will need to use it. To avoid typing it more than once, define a constant variable to store this name. When you need to use this property, you can just write the variable name lifeExp. It will look like this row[lifeExp] instead of row.average_life_expectancy.

Add this line at the top of the csvToSeries() function.

function csvToSeries(text) { const lifeExp = 'average_life_expectancy'; ...

You can process this data using simple vanilla JavaScript. The end result we want is two series with data points that include a year and life expectancy for each point.

Update the csvToSeries() with the following code:

function csvToSeries(text) { const lifeExp = 'average_life_expectancy'; let dataAsJson = JSC.csv2Json(text); let male = [], female = []; dataAsJson.forEach(function (row) { //add either to male, female, or discard. console.log(row); }); }

It defines arrays for male and female data points. Then it calls the array dataAsJson.forEach() function passing a callback function(row){...} function as the argument. The forEach() function will execute the callback function for each item in the dataAsJson array. For now we will just call console.log(row) on each row that the callback function encounters.

Refresh the browser and inspect the console output.

Let's add some logic to filter the data we want and log the result in the console window. Replace the csvToSeries() function with this code.

function csvToSeries(text) { const lifeExp = 'average_life_expectancy'; let dataAsJson = JSC.csv2Json(text); let male = [], female = []; dataAsJson.forEach(function (row) { //add either to male, female, or discard. if (row.race === 'All Races') { if (row.sex === 'Male') { male.push({x: row.year, y: row[lifeExp]}); } else if (row.sex === 'Female') { female.push({x: row.year, y: row[lifeExp]}); } } }); console.log([male, female]); }

Inside the callback function you decide whether the row is of interest and use it or if not then discard it.

if (row.race === 'All Races') { if (row.sex === 'Male') { //add data to male array male.push({x: row.year, y: row[lifeExp]}); } else if (row.sex === 'Female') { //add data to female array female.push({x: row.year, y: row[lifeExp]}); } }

The logic checks to see if the row.race value equals 'All Races'. If so, then it checks to see if the row.sex property equals either 'Male' or 'Female'. If the row equals either, it adds the data to either the male or female arrays as a {x, y} point object. Notice the use of the lifeExp variable defined above which helps shorten this code.

At the end, you used console.log([male, female]) to pass the male and female variables to the console for inspection and to make sure your code worked as expected.

After refreshing the browser, the console shows the result which is two arrays, each with 118 data points spanning the years 1900 to 2017.

Lastly, instead of passing the result to the console, wrap these data points within an array of two series that the chart can use directly and return them.

Add this code at the end of the csvToSeries() function:

return [ {name: 'Male', points: male}, {name: 'Female', points: female} ];

If the returned value was sent to the console, it would produce this result.

As you can see, the logic for filtering rows is fairly simple and you can adjust it to get other details from this data set.

To learn more about handling CSV files using JSCharting utilities, see this tutorial. When you are ready for more advanced data handling, the JSC.nest() utility can be used to create series and points from JSON data with with very little code.

step3-b.zip

Step 4 - Putting it all together

The data handling section was the most difficult step, but that alone will enable you to manipulate and extract data of interest from any CSV file. This is where it all comes together and where you will feel a sense of accomplishment.

Start by adding a renderChart() function to the end of the index.js file. You will pass the series data to this function as an argument.

function renderChart(series){ JSC.Chart('chartDiv', { series: series }); }

In the then() argument function that calls csvToSeries(), pass the series result to the renderChart() function to see what it draws in the browser.

.then(function (text) { let series = csvToSeries(text); renderChart(series); })

step4-a.zip

Now, refresh the browser. You should see this chart that uses the CSV data you processed in the previous section. Sweet! ?

مخطط خطي يعرض بيانات CSV المفلترة

Whoa, what happened in 1918? Life expectancy dropped significantly there. According to Wikipedia there was a flu pandemic involving H1N1 virus that wiped out a portion of the world population. This unfortunate event shows how visualizing data provides insights you would not normally get from just looking at the numbers.

You created a chart using the default line series type and it looks good, but you can make a few adjustments and tweaks to further improve it.

First, add a title at the top to explain what the viewer is looking at and an annotation at the bottom of the chart to credit the data source. Update the JSC.Chart() constructor function to pass the following options:

function renderChart(series){ JSC.Chart('chartDiv', { title_label_text: 'Life Expectancy in the United States', annotations: [{ label_text: 'Source: National Center for Health Statistics', position: 'bottom left' }], series: series }); } 

When you refresh the browser you can see the updated chart.

مخطط خطي مع عنوان وتعليق توضيحي للإحالة

You added an annotation with label text, and a position setting. We can use another annotation for the title as well, but it was easier to use the title label in this example.

It is easy to control the annotation position using values such as 'top right' or 'inside bottom right'. The 'inside' value means the annotation is placed inside the chart area where data is drawn. This box positions chart example demonstrates all the position setting options.

The legend shows the sum of point values for each series, but the sum is not important for this data set. You can reduce the legend columns to only show the icon and series name by using this setting:

legend_template: '%icon,%name'

But you don't really need to use a legend at all. It will be cleaner to simply label the lines themselves. You can disable the legend, and tell the chart to write the series name on the last point of each line series with these chart options:

legend_visible: false, defaultSeries_lastPoint_label_text: '%seriesName', 
مخطط خطي يستخدم تسميات النقاط بدلاً من وسيلة الإيضاح

The '%seriesname' token is one of many point related tokens that can be used in any point label text to show point details and calculations.

Finally, let’s enable the x axis crosshair combined tooltip to show the male and female life expectancy for any given year. On mobile devices, you can tap the chart to see the crosshair tooltip. When using a PC, tooltips display when hovering over the chart with your mouse pointer.

xAxis_crosshair_enabled: true,

You may be wondering, what's with all those underscores in property names? This is not the actual property name. It's a shorthand way to write:

xAxis: {crosshair: {enabled: true}},

You may find it more convenient to specify a setting with underscores and JSCharting will understand what you mean.

The default tooltip text is clear, but let's customize it slightly to make it our own.

Since the crosshair tooltip shows information about each point it crosses, the tooltip text is defined within the point options. The defaultPoint property defines point options that all points will inherit automatically.

defaultPoint_tooltip: '%seriesName %yValue years',

For more information about this feature, check out the crosshair and combined tooltip tutorial.

When you apply all these options, your code will look similar to the following snippet. Replace the entire renderChart() function with this code.

function renderChart(series){ JSC.Chart('chartDiv', { title_label_text: 'Life Expectancy in the United States', annotations: [{ label_text: 'Source: National Center for Health Statistics', position: 'bottom left' }], legend_visible: false, defaultSeries_lastPoint_label_text: '%seriesName', defaultPoint_tooltip: '%seriesName %yValue years', xAxis_crosshair_enabled: true, series: series }); } 

Refresh the browser window once more.

مخطط خطي مع الشعيرات المتقاطعة وتلميحات الأدوات المدمجة المخصصة

You did it!

First you fetched CSV data using native JavaScript. You then converted it into JSON format and filtered the data into two series. With those series you created a beautiful interactive line chart using JSCharting and configured it to look professional.

يمكنك تخصيص المخططات وتعديلها بشكل أكبر لتلبية احتياجاتك الخاصة. قم بزيارة قسم البرامج التعليمية لـ JSCharting لمعرفة المزيد حول موضوع معين ، أو ابحث عن مخططات مشابهة لما تريد القيام به في معرض الأمثلة وانسخها لمواصلة رحلة تصور البيانات الخاصة بك.

إذا واجهت مشاكل في العمل مع JSCharting ، فلا تتردد في الاتصال بفريق الدعم. سيكونون سعداء بإرشادك أو المساعدة في حل أي مشاكل قد تواجهها.

step4- ب.zip

تحدي المكافأة

لم نستخدم جميع البيانات المتاحة في ملف CSV هذا. دعونا نجربها من أجل المتعة والممارسة.

قم بإنشاء هذا المخطط باستخدام ما تعلمته.

التحدي: قم بتكرار هذا المخطط بنفسك

يحتوي هذا الملف المضغوط على الإجابة:

step5- مكافأة.zip

هل يمكنك التفكير في مخططات أخرى يمكنك إجراؤها باستخدام هذه البيانات؟ استمر في التجربة واستمتع بكل دقيقة منها!