Cómo poner los gráficos dinámicos en el sitio web

Starlyn Tejada tiene razón: se trata de SVG. Hacer este tipo de cosas a mano es bastante tedioso (y generalmente nunca dinámico), por lo que recomiendo usar una biblioteca de JavaScript para al menos generar un SVG. Si estás en contra de las bibliotecas JS por cualquier razón, entonces vas a tener dificultades. Pero si no eres …

Hay una manera increíble de hacer gráficos dinámicos: la biblioteca d3.js. Es pequeño e intuitivo. ¿Qué más se puede pedir? He usado d3 por un tiempo y me encantan algunas de las cosas que puedes hacer con él. Si no está convencido de su poder bruto, haga clic en la página de ejemplos del autor. Hay más de mil.

Aquí hay uno que me gusta particularmente. Ah, y aquí hay uno basado en la física.

Puede hacer gráficos como el de su ejemplo con d3 usando “gráficos de fuerza dirigida”.

Editar : d3 definitivamente también puede manejar la interacción con el mouse, mira esto.

¡Hola!

Ese bebé es SVG, html y CSS.

Todo lo que puedes hacer es mostrarte esto:

Gráficos vectoriales escalables (SVG) 1.1 (segunda edición)

También son formas de hacer algo así con JS y CSS.

A veces voy a CodePen para ver qué cosas increíbles crean las personas y para preguntarme cómo tienen tiempo para hacerlo y divertirse y pagar el alquiler …

Una cosa es una animación que puede interactuar, otra es un gráfico generado por las variables de un XML. Eso es lo que creo que está en PatentsView, cuando inspeccioné el código fuente.

Después de decidir cómo hacerlo, simplemente agregue un div en el html y colóquelo con CSS.

De todos modos, espero que esto te ayude un poco.