Karl-Horning / d3-templates

This repository, d3-templates, contains examples and templates for creating data visualizations using the D3.js library. Each example is converted from TypeScript to JavaScript, and JSDoc comments and explanations are added for better understanding.

D3 Templates

This repository, d3-templates, contains examples and templates for creating data visualizations using the D3.js library. Each example is converted from TypeScript to JavaScript, and JSDoc comments and explanations are added for better understanding.

Examples

1. Area Chart: Illustrates the usage of an area chart to visualize data trends over time. View Example

2. Bar Chart: Demonstrates the creation of a bar chart to represent data using rectangular bars. View Example

3. Donut Chart: Visualizes categorical data in a circular form, with dynamic resizing and interactive tooltips. View Example

4. Histogram: Utilizes a histogram to display the distribution of data in a set of bins. View Example

5. Horizontal Bar Chart: Represents data with a horizontal bar chart, dynamically adjusting to different datasets. View Example

6. Line Chart: Illustrates the creation of a line chart to represent data points connected by straight line segments. View Example

Getting Started

To run the examples:

1. Clone or download this repository to your local machine.
2. Open the HTML files (in other words, area-chart.html, bar-chart.html, donut-chart.html, histogram.html, horizontal-bar-chart.html, line-chart.html) in a web browser.

Project Structure

• area-chart: Folder containing the Area Chart example.

  • area-chart.html: HTML file.
  • area-chart.js: JavaScript file.
  • data.js: JavaScript file with the key data.
  • d3.v6.min.js: D3 library version 6 minified file.
  • README.md: README specific to the Area Chart example.

• bar-chart: Folder containing the Bar Chart example.

  • bar-chart.html: HTML file.
  • bar-chart.js: JavaScript file.
  • d3.v6.min.js: D3 library version 6 minified file.
  • README.md: README specific to the Bar Chart example.

• donut-chart: Folder containing the Donut Chart example.

  • donut-chart.html: HTML file.
  • donut-chart.js: JavaScript file.
  • d3.v6.min.js: D3 library version 6 minified file.
  • README.md: README specific to the Donut Chart example.

• histogram: Folder containing the Histogram example.

  • histogram.html: HTML file.
  • histogram.js: JavaScript file.
  • data.js: JavaScript file with the key data.
  • d3.v6.min.js: D3 library version 6 minified file.
  • README.md: README specific to the Histogram example.

• horizontal-bar-chart: Folder containing the Horizontal Bar Chart example.

  • horizontal-bar-chart.html: HTML file.
  • horizontal-bar-chart.js: JavaScript file.
  • d3.v6.min.js: D3 library version 6 minified file.
  • README.md: README specific to the Horizontal Bar Chart example.

• line-chart: Folder containing the Line Chart example.

  • line-chart.html: HTML file.
  • line-chart.js: JavaScript file.
  • data.js: JavaScript file with the key data.
  • d3.v6.min.js: D3 library version 6 minified file.
  • README.md: README specific to the Line Chart example.

Usage

Explore each example to understand how to create data visualizations using D3.js. Customize the code and datasets to fit your specific requirements.

Tutorials

Tutorials on D3.js are available from:

• D3.js Getting Started
• FreeCodeCamp D3.js Tutorial

Credits

• D3.js library: D3.js
• Original templates and examples available on Observable

License

This project is licensed under the MIT License.