Soy nuevo en JavaScript/D3 y estoy tratando de codificar una visualización relativamente simple basada en algunos datos de juguetes que tengo, pero no puedo resolverlo. Estos son los datos del juguete:

 toy_data = { 'abstract' : ['a'], 'introduction' : ['b', 'c'], 'methods' : ['d', 'e', 'f'], 'findings' : ['g', 'h', 'i', 'j'], 'conclusion' : ['k', 'l', 'm', 'n', 'o'] }

Quiero escribir una función que tome datos con este formato (o de una manera ligeramente diferente, si es necesario) y genere una visualización en D3 que se vea más o menos como la siguiente (generé este diagrama en Altair usando datos similares):

La diferencia sería que las etiquetas del eje x corresponderían a los términos especificados en los datos de mi juguete, y solo tendría tantos círculos como elementos hay en cada par clave-valor asociado (por ejemplo, 1 círculo para el resumen, 2 para la introducción, 3 para métodos, etc.). Eventualmente, también agregaré datos adicionales para controlar el tamaño de los círculos como en la imagen de arriba, pero por el momento estoy satisfecho con solo una función que puede tomar cualquier dato de esta forma y al menos generar un prototipo con círculos de el mismo tamaño.

Siento que esto debería ser bastante factible en D3, tal vez definiendo un diagrama de dispersión y luego agregando líneas horizontales de conexión, o combinando un diagrama de líneas y un diagrama de dispersión, pero no puedo entender cómo hacerlo. Si alguien puede explicar y dar un ejemplo de cómo lograr este comportamiento, sería de gran ayuda, ya que creo que puedo aprovecharlo para lograr lo que quiero.