freeCodeCamp/guide/arabic/miscellaneous/us-state-map-visualization-using-d3js/index.md

---
title: Us State Map Visualization Using D3js
localeTitle: لنا خريطة الدولة التصور باستخدام D3js
---
![لقطة شاشة 2016-05-19 في 6 29 43 pm](//discourse-user-assets.s3.amazonaws.com/original/2X/a/a4a31935c10185c660c713ba7651a30e0a11f1e8.png)

## شرح المشروع:

**لدينا بيانات نموذجية عن الولايات المتحدة:** عدد الحوادث الخطيرة المبلغ عنها لكل ولاية في الولايات المتحدة.

_لدينا هذه البيانات في ثلاث فئات:_ أقل رقم مسجل للشهر ، متوسط ​​الحوادث المبلغ عنها في السنة ، وأعلاها عدد في الشهر ، كما هو موضح في بيانات العينة أدناه.

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

## بيانات العينة:

`AZ: 13 41 57`

`CA: 41 60 81`

`NY: 6 35 54` وهلم جرا.

## تلميحات وموارد:

### تعليمات خطوه بخطوه:

*   أولاً ، سنحتاج إلى إنشاء خريطة للولايات المتحدة.
    
    1.  يمكنك إما إنشاء خريطة من الصفر باستخدام مصادر مثل - [Stately.](https://intridea.github.io/stately/)
        
    2.  احصل على خريطة تم إنشاؤها بالفعل من [freehtml5maps](http://freehtml5maps.com) أو استخدم [Javascript](http://bl.ocks.org/NPashaP/raw/a74faf20b492ad377312/3513ad985b2fa93ea35f2fc864cb30540c298171/uStates.js) هذا
        
*   أضف خريطتك إلى javascript الرئيسي المستخدم للتصور
    

على سبيل المثال ، `(script src="uStates.js")(/script) (!-- creates uStates. --)`

*   أنشئ علامة Div لتعليق تلميحات الأدوات وإنشاء ملف SVG ليحفظك على الخريطة.

فمثلا،

`javascript (div id="tooltip")(/div) (svg width="960" height="600" id="statesvg")(/svg)`

*   إنشاء وظيفة Tooltip لإنشاء سلسلة محتوى HTML في div تلميح الأدوات.

ستقوم وظيفة تلميح الأدوات هذه بعرض جدول وسيتم عرض هذا الجدول عندما نقوم بتمرير الماوس فوق الحالة يجب أن يكون هذا الجدول شيئًا كهذا (كما هو موضح في الشكل الأول): أريزونا منخفض 13 متوسط ​​41 عال 57

*   ارسم الحالات على id (#statesvg في مثالنا) مع وظيفة البيانات و tooltip.

على سبيل المثال ، `uStates.draw("#statesvg", sampleData, tooltipFunc);`

**سيكون الناتج النهائي شيئًا كالتالي: (حلق الماوس فوق كاليفورنيا)**

![لقطة شاشة 2016-05-19 في 6 37 57 م](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2c17548386b8591d84ac8f2541fecd8d68e7365c.png)

## المراجع:

1.  [**D3.js**](https://d3js.org) الأمثلة والوثائق.
2.  [**NPashaP جيثب**](https://github.com/NPashaP)
3.  [**فخم**](https://intridea.github.io/stately/)
4.  [**FreeHTML5Maps**](http://freehtml5maps.com)