curveHorizontal, curveVertical?

Abierto
  • ¿Algo no está bien?
#113 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
d3, javascript
Área
data-visualization

Línea de trabajo

The issue describes a need for horizontal or vertical curve options in d3.line to represent discrete time-series data while improving rendering performance. Start by reading the d3-shape curve documentation and the implementation and tests for d3.curveStep. Done means a suitable curve option preserves the intended visual impression and performs well with large datasets on desktop and mobile.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

In working with discrete-time and discrete-level data, I find that the risers in the data can end up being visually deceptive, especially where there is a single-level change involved. Use of a collection of "dots" appears to be much slower to render than the path used by d3.line, to the point of making scrolling and zooming even on a desktop browser rough, and nearly impossible on a phone.

From a presentation standpoint, the dot is "fine" -- it is just the performance problems, especially as mobile monitoring of the time series is a primary use case.

With d3.curveStep:
image

With drawing a dot:
image

At least for me, the visual impression of how many samples are at the median vs. high/low over a segment of time is very different between the two representations.

(Using d3.line has similar challenges with the near-vertical connectors as d3.curveStep has with the risers.)

On a desktop, the dataset-size limit is around 1000-1500 dots before the re-draw times introduce so much lag as to make scroll/zoom frustrating. (There are three other d3.line data sets as well on the graph, but it is the dots that dramatically slow the re-draw time)

Lenguaje dominante
JavaScript
Estrellas
2.5k
Forks
307
Merge medio
4 h 16 min
PR fusionados (30 d)
1

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de d3/d3-shape

Todos los issues de d3/d3-shape

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.