"o2-chart-lib" D3.js(バージョン４)を利用したAngular5用チャートライブラリ ref: https://qiita.com/SOhtsu/items/dacac4f23679c8a89c91

"ng6-o2-chart" D3.js(バージョン４)を利用したAngular6用チャートライブラリ ref: https://qiita.com/SOhtsu/items/58d826a0e74577411336

This example presents a comprehensive Angular 6 chart library built with D3.js version 4, showcasing multiple visualization types including line, pie, bar, scatter, histogram, stacked bar, world map, globe, tree, pack layout, choropleth, and force-directed graphs. The library leverages D3’s animation capabilities, which are enabled by default and may cause performance slowdowns on less powerful machines, as seen in the accompanying notes. The code references concrete D3 APIs such as `d3.forceSimulation` for the force-directed layouts and `d3.geoPath` for geographic projections. A consumer repository via GitHub demonstrates the installation process, which involves cloning and running the library.

92% match

D3.jsを利用したAngular2用グラフライブラリ ref: http://qiita.com/SOhtsu/items/d545e9665e5668f678ef

This example presents an Angular2 chart library built on D3.js, showcasing a variety of visualizations including line charts, pie charts, bar charts, scatter plots, histograms, stacked bar charts, world and globe maps, treemaps, pack layouts, and choropleths. The code integrates D3’s rendering APIs, such as `d3.forceSimulation` for network layouts and `d3.geoPath` for geographic projections, within Angular2 components. It is organized as a project with source files, configuration, and dependencies, and the rendered outputs are generated dynamically from data. The repository provides a reusable foundation for embedding interactive D3 graphics into Angular2 applications.

87% match

UdmChart

UdmChart demonstrates an Angular library that renders twelve distinct D3.js chart types, including geoOrthographic projections, bar, pie, scatter plot, histogram, pack layout, tree, line, geoMap, stackBar, choropleth, and force-directed graphs. Each chart is instantiated through a reusable `<lib-Ng6UdmChart>` component, which takes `chartType`, `configData`, and `graphData` as inputs to generate SVG output. The examples use static JSON datasets for each visualization, with the geographic charts relying on D3's projection and path generation, while the force layout employs `d3.forceSimulation` for node positioning.

75% match

UdmChart

UdmChart is an Angular component that renders a variety of D3.js charts, including line, bar, pie, scatter plot, histogram, stack bar, geographic map, tree, and force-directed layouts, all as animated SVG. It switches chart types based on an input parameter and uses `d3.histogram` to bin data for histograms, with scales and axes configured from a data-driven configuration object. The code imports the full D3 library and applies transitions for animation, supporting customizable margins and grid lines.

70% match

UdmChart

This example demonstrates an interactive chart built with Angular, displaying data through the UdmChart library. It shows a visualization component (Ng6UdmChartModule) integrated into a browser application. The code imports the module from the local `projects/ng6-udm-chart` directory and uses Angular’s `BrowserModule` and `NgModule` to bundle the component. The rendering approach is defined by the library’s internals, though the visible code only wires the module into the app’s main module. Data specifics are not visible, but the architecture highlights how Angular composes third-party charting modules into a working app.

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr

UdmChart

UdmChart demonstrates a collection of twelve chart types, including line, bar, pie, scatter plot, histogram, stack bar, geo map, geo orthographic, tree map, pack layout, choropleth, tree, sankey, and force layouts. The visualization uses D3.js APIs such as `d3.forceSimulation` for network diagrams and `d3.geoPath` for geographic projections, rendering each chart type through a unified interface. It draws sample data on a canvas, enabling interactive exploration of diverse visualization patterns within a single application.

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham