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

title	localeTitle
Us State Map Visualization Using D3js	Visualización de mapa de estado de Estados Unidos usando D3js

Explicación del proyecto:

Tenemos los datos de muestra de los Estados de EE. UU . : Número de accidentes graves informados para cada estado de EE. UU.

Tenemos estos datos en tres categorías: el número más bajo reportado por un mes, el promedio de accidentes reportados en un año y el número más alto reportado en un mes, como se muestra en los datos de muestra a continuación.

Queremos dibujar un mapa de EE. UU. Y visualizar estos datos de modo que, cuando pasamos el mouse sobre un estado, debamos mostrar estos datos para ese estado en particular.

Data de muestra:

AZ: 13 41 57

CA: 41 60 81

NY: 6 35 54 y así sucesivamente.

Consejos y recursos:

Instrucciones paso a paso:

• Primero, necesitaremos crear un mapa de los Estados Unidos.

  1. Puede crear un mapa desde cero utilizando fuentes como - Stately.

  2. Obtén un mapa ya creado de freehtml5maps o usa este Javascript

• Añade tu mapa al javascript principal utilizado para la visualización.

Por ejemplo, (script src="uStates.js")(/script) (!-- creates uStates. --)

• Cree una etiqueta Div para contener información sobre herramientas y cree SVG para mantener su mapa.

Por ejemplo,

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

• Crear una función de información sobre herramientas para crear una cadena de contenido html en la información sobre herramientas div.

Esta función de información sobre herramientas devolverá una tabla y esta tabla se mostrará cada vez que pasemos el mouse sobre el estado. La tabla debería ser algo como esto (como se muestra en la primera figura): Arizona Low 13 Average 41 High 57

• Dibuje estados en id (#statesvg en nuestro ejemplo) con datos y función de información sobre herramientas.

Por ejemplo, uStates.draw("#statesvg", sampleData, tooltipFunc);

La salida final será algo como esto: (Pasó el mouse sobre California)

Referencias:

1. D3.js Ejemplos y Documentaciones.
2. NPashaP GitHub
3. Majestuoso
4. FreeHTML5Maps