Lynxsia IT Solution

JavaScript Graphics D3.js

JS Graphics D3.js

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics.

Installation

D3.js provides an easy and straight forward method to install and use.

Visit D3 JS website to learn more.

Via CDN

Add the following link to <head> tag.

					 
        
          <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

Test Code Online

Use Local Files

You can also download and include local files.

					 
        
          <script src="/path/to/d3.min.js"></script>

Test Code Online

Scatter Charts

					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <svg id="myPlot" style="width:500px;height:500px"></svg>
              <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
              <script>
                // Set Dimensions
                const xSize = 500; 
                const ySize = 500;
                const margin = 40;
                const xMax = xSize - margin*2;
                const yMax = ySize - margin*2;

                // Create Random Points
                const numPoints = 100;
                const data = [];
                for (let i = 0; i < numPoints; i++) {
                  data.push([Math.random() * xMax, Math.random() * yMax]);
                }

                // Append SVG Object to the Page
                const svg = d3.select("#myPlot")
                  .append("svg")
                  .append("g")
                  .attr("transform","translate(" + margin + "," + margin + ")");

                // X Axis
                const x = d3.scaleLinear()
                  .domain([0, 500])
                  .range([0, xMax]);

                svg.append("g")
                  .attr("transform", "translate(0," + yMax + ")")
                  .call(d3.axisBottom(x));

                // Y Axis
                const y = d3.scaleLinear()
                  .domain([0, 500])
                  .range([ yMax, 0]);

                svg.append("g")
                  .call(d3.axisLeft(y));

                // Dots
                svg.append('g')
                  .selectAll("dot")
                  .data(data).enter()
                  .append("circle")
                  .attr("cx", function (d) { return d[0] } )
                  .attr("cy", function (d) { return d[1] } )
                  .attr("r", 3)
                  .style("fill", "Red");
              </script>
            </body>
          </html>

Test Code Online