{"id":26562858,"url":"https://github.com/centrogeo/d3-reusable-components","last_synced_at":"2026-04-29T22:03:52.641Z","repository":{"id":81514214,"uuid":"127817496","full_name":"CentroGeo/d3-reusable-components","owner":"CentroGeo","description":"Colección de elementos reutilizables desarrollados sobre d3.js","archived":false,"fork":false,"pushed_at":"2018-04-12T23:49:23.000Z","size":141,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-22T15:41:09.901Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CentroGeo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-02T22:02:36.000Z","updated_at":"2019-01-25T20:44:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"54329d17-902e-4ce0-a4c0-4430d2f19b87","html_url":"https://github.com/CentroGeo/d3-reusable-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CentroGeo/d3-reusable-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fd3-reusable-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fd3-reusable-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fd3-reusable-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fd3-reusable-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CentroGeo","download_url":"https://codeload.github.com/CentroGeo/d3-reusable-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fd3-reusable-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32445563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T20:22:27.477Z","status":"ssl_error","status_checked_at":"2026-04-29T20:22:26.507Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-22T15:29:03.869Z","updated_at":"2026-04-29T22:03:52.637Z","avatar_url":"https://github.com/CentroGeo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elementos reutilizables de d3.js\nColección de elementos reutilizables desarrollados sobre d3.js\n\nTodos los elementos tienen una interfase común. El objeto `chart` inicializa el componente y se puede configurar encandenando\nlos `setters` de sus propiedades. El método `data()`, cuando se llama por primera vez, une los datos a los elementos del\nDOM que van a dibujar la gráfica, cuando se vuelve a llamar `data()` con nuevos datos, el componente se encarga de actualizarse.\n\nCada componente requiere los datos como conjuntos de filas leidos de un csv con `d3.csv`:\n\n````javascript\nvar datos = [\n  {\"Year\": \"1997\", \"Make\": \"Ford\", \"Model\": \"E350\", \"Length\": \"2.34\"},\n  {\"Year\": \"2000\", \"Make\": \"Mercury\", \"Model\": \"Cougar\", \"Length\": \"2.38\"}\n]\n````\n\ninternamente, cada componente organiza los datos de acuerdo a su propia representación. \n\n## Uso\n\nDe acuerdo al patrón con el que están desarrollados los componentes, la forma general de utilizarlos depende poco de la\ngráfica en específico. Pra crear una gráfica, siempre el primer paso es crear la instancia y darle valor a sus propiedades\n(aquí se ilustra con una gráfica de barras pero el patrón general es el mismo):\n\n````javascript\nvar bar = stackedBarChart()\n    .width(400)\n    .height(400)\n    .stackVariables([\"grado_ferrocarril\", \"grado_carretera\"])\n    .displayName(\"nom_ciudad\")\n    .id(\"id\");\n````\nCada uno de los métodos (_getters_ y _setters_) regresa el objeto original, entonces es posible encadenar los métodos para dar valor a las propiedades.\n\nPara unir los datos a la gráfica, se llama el método `data(datos)`:\n\n````javascript\nbar.data(datos)\n````\nFinalmente, para desplegar la gráfica, se usa el método `call` de una selección de d3 con la instancia como argumento:\n\n````javascript\nd3.select(\"#chart\")\n  .call(bar);\n````\nActualizar una gráfica consiste simplemente en llamar al método `data(nuevosDatos)` con un nuevo conjunto de datos:\n\n````javascript\nbar.data(newData);\n````\nInternamente la implementación se encarga de actualizar el dibujo, manejar los nuevos elementos, eliminar los que\nya no están presentes (la unión se hace implícitamente a trvés de la propiedad `id`).\n\n## Propiedades generales\n\nTodas las gráficas exponen las siguientes interfases de configuración:\n\n- `width`: ancho en pixeles del svg\n- `height`: altura en pixeles del svg\n- `margin`: `{top: 40, right: 75, bottom: 60, left: 75}` objeto con los tamaños en pixeles de los márgenes\n- `transitionTime`: duración en milisegundos de las transiciones al actualizar los datos\n- `data`: Array de filas de datos\n- `displayName`: Nombre del campo que se usará como etiquetas del eje x\n\n## Gráfica de _Stacked Bars_\n\nRepresenta series de datos como _stacks_ verticales sobre una gráfica de barras. Ofrece la posibilidad de agregar variables para graficarlas como líneas con una escala diferente.\n\n### Configuración\n\n`stackVariables`: Array con los nombres de las variables a usarse en el stack\n\n`id`: Nombre del campo que se usará como identificador de cada serie de datos\n\n`displayName`: Nombre del campo que se usará como etiquetas del eje x\n\n`lineVariables`: Array con los nombres de los campos que serán desplegados como líneas en la gráfica\n\n`stackColors`: función que regresa los colores para cada elemento del stack, por ejemplo: ` d3.scaleOrdinal(d3.schemeCategory10)`\n\n`lineColors`: función que regresa los colores para cada linea, por ejemplo: ` d3.scaleOrdinal(d3.schemeCategory10)`\n\n`pointColors`: función que regresa los colores para los puntos de las líneas (uno por serie), por ejemplo: ` d3.scaleOrdinal(d3.schemeCategory10)`\n\n`legendContainer`: id del elemento en donde se va a desplegar la leyenda\n\n`barAxisLabel`: Etiqueta para el eje de la escala de las barras\n\n`lineAxisLabel`: Etiqueta para eleje de las líneas\n\n\n\nEn barras.html está el ejemplo de uso \ny opciones de configuración.\n\n\n## Gráfica de Radar\n\nscript: stackedBars.js\n\nRepresenta series de datos como _paths_ en una malla circular. En radar está el ejemplo de uso \ny opciones de configuración.\n\n### Configuración\n\n`maxValue`: Valor máximo para los ejes radiales.\n\n`levels`: Número de circulos concéntricos\n\n`format`: string de `d3.format`con el formato para desplegar las etiquetas de los ejes.\n\n`color`: función que regresa los colores para cada linea, por ejemplo: ` d3.scaleOrdinal(d3.schemeCategory10)`.\n\n`legend`: `{ title: '', translateX: 100, translateY: 0 }` objeto de configuración para la leyenda. Controla el título y la posición.\n\n`highlight`: controla la serie que debe resaltarse (línea más gruesa). Se puede llamar en cualquier momento.\n\n\n## Grafica de barras agrupadas \n\nscript: barLineChart.js\n\nDespliega series de datos como barras agrupadas, permite agregar líneas para series de datos.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fd3-reusable-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcentrogeo%2Fd3-reusable-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fd3-reusable-components/lists"}