Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

97
Vistas
Interactive US state map using JavaScript showing the revenue

Is there any javascript object that I can use to display a US map where the colour of each state will depend upon the amount of revenue generated from that state? It is just like a chart that I need to add but the color of each state will be different and also if they hover it will show the amount from that state or let it be already there on the state outline map.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You can simply use an SVG, a markup language that consist of path description, that renders into a scalable image in the browser.

There are tons of available US svg files online, you'll just have to pick what suits you best (for example this one). Looking at the code of the map I provided you'll see all the state paths, each with their own id, for instance :

  <path
     inkscape:connector-curvature="0"
     id="ND"
     data-name="North Dakota"
     data-id="ND"
     d="m 556.50879,73.847349 -29.31306,0.582379 -20.48032,-0.09706 -17.56842,-0.388253 -20.57738,-0.776505 -1.0677,-0.09706 -0.0971,3.882525 -1.26182,23.683405 -1.55301,30.47782 -0.19413,3.88252 3.78546,0.19413 42.80484,1.16476 39.50469,-0.29119 16.40367,-0.48532 3.30014,-0.19412 -0.38825,-1.45595 -0.48531,-4.4649 -2.23246,-5.24141 -0.58238,-8.73568 -1.94126,-9.90044 -4.07665,-24.848163 -1.94126,-6.891482 -2.03833,0 z"
     style="stroke-width:0.97063118000000004;fill:#f9f9f9" />

There its up to you to come with your own rendering logic, either dynamically adding a fill attribute to each path with the color you'd like, or styling each one using css (by targeting the id of the path)

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda