Gráficos, Mapas, Layouts

Esto es un compilado de recursos que vamos encontrando por el camino con el fin de armar un formulario que nos permita definir un área de parking (o amarras de bacos) y luego asignar contenido a cada espacio ocupado. El producto final debería ser una consulta que muestre una imagen (o mapa) vectorizado que muestre todos los espacios libres y también los ocupados con su correspondiente información.

La mejor implementación parece que viene por el lado de HTML5 SVG / CANVAS.

Luego se podría utilizar D3.js que utiliza HTML, SVG y CSS.

HTML SVG - Tutorial de SVG

The HTML SVG is an acronym which stands for Scalable Vector Graphics.

HTML SVG is a modularized language which is used to describe graphics in XML. It describe two-dimensional vector and mixed vector/raster graphics in XML.

Otros links:

• Cómo elegir Canvas o SVG para tus sitios Web
• Mapas interactivos en HTML usando imágenes SVG
• HTML5 Drag and Drop (DnD) - Otro más
• Ejemplo DnD amarras

HTML CANVAS - Tutorial de CANVAS

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

Maps

MapBox - Maps and location for developers. Precise location data and powerful developer tools to change the way we navigate the world.

Charts

Best 19+ JavaScript Chart Libraries to Use in 2022

15 JavaScript Libraries for Creating Beautiful Charts

Chart.js - JavaScript charting for designers & developers.

Cross-browser HTML5 Canvas Charting JavaScript library

Layouts

UI Layout – The Ultimate Page Layout Manager

Golden Layout

Data-Driven Documents (D3) - Muy utilizada (ver cartogramas)

• Awesome D3 Libraries
  Recomendados:
• Vega-Lite - A high-level grammar of interactive graphics
• Vega-Lite-Api - A JavaScript API for Vega-Lite.
• leaflet-d3 - Collection of plugins for using D3 with Leaflet [map, geo]
• D3 Tutorials
• D3 Plugins discovery

Polymer - The open-source JavaScript library by Google – Polymer is used to build web apps using components.

Lo mejor hasta ahora para armar mapas e insertar contenido:

Leaflet - Open-source JavaScript library for mobile-friendly interactive maps

Leaflet Plugins

Lo mejor para armar formas sobre un background:

Data-Driven Documents (D3) - Muy utilizada (ver cartogramas)