Learn how to visualize your data with the power of D3 and Python

Data Visualization with D3

Data visualization is a powerful tool for understanding complex data sets and uncovering patterns and trends. In this blog post, we’ll explore how to use the D3 library to create interactive and visually appealing charts and graphs.

What is D3?

D3 (Data-Driven Documents) is a JavaScript library for manipulating documents based on data. It provides a wide range of tools for creating, manipulating, and animating SVG, HTML, and Canvas content. D3 is a powerful tool for data visualization and can be used to create a variety of charts and graphs.

Why use D3?

D3 is a versatile library that can be used for a wide range of data visualization tasks. It is particularly useful for creating interactive and dynamic visualizations that can be easily updated and adjusted based on user input or other data changes. D3 is also well-suited for creating complex and customizable visualizations that can be easily integrated into web applications.

Getting Started with D3

To get started with D3, you’ll need to include the D3 library in your HTML file. You can do this by adding the following script tag to your HTML document:

<script src="https://d3js.org/d3.v7.min.js"></script>

Once you’ve included the D3 library, you can start using its features to create your visualizations. D3 provides a wide range of functions and methods for manipulating and transforming data, creating and updating elements, and handling user interactions.

Creating a Bar Chart with D3

To create a bar chart using D3, you’ll need to select the HTML element where you want to display the chart and then create a new SVG element. You can then use D3’s data binding and enter-update-exit pattern to create the chart.

<div id="bar-chart"></div>

const svg = d3.select("#bar-chart")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);

const data = [10, 20, 30, 40, 50];

const barWidth = svg.attr("width") / data.length;

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth)
    .attr("y", d => svg.attr("height") - d)
    .attr("width", barWidth)
    .attr("height", d => d);

In this example, we first select the HTML element with the ID “bar-chart” and create a new SVG element with a width of 500 pixels and a height of 300 pixels. We then create an array of data values that we want to visualize in the chart.

Next, we calculate the width of each bar based on the total width of the chart and the number of data points. We then use D3’s data binding and enter-update-exit pattern to create a new rect element for each data point. We set the x-coordinate of each rect to the index of the data point multiplied by the width of each bar, the y-coordinate to the height of the chart minus the value of the data point, the width to the width of each bar, and the height to the value of the data point.

Creating a Line Chart with D3

To create a line chart using D3, you’ll need to select the HTML element where you want to display the chart and then create a new SVG element. You can then use D3’s data binding and enter-update-exit pattern to create the chart.

<div id="line-chart"></div>

const svg = d3.select("#line-chart")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);

const data = [10, 20, 30, 40, 50];

const line = d3.line()
    .x((d, i) => i * 10)
    .y(d => svg.attr("height") - d);

svg.append("path")
    .datum(data)
    .attr("d", line);

In this example, we first select the HTML element with the ID “line-chart” and create a new SVG element with a width of 500 pixels and a height of 300 pixels. We then create an array of data values that we want to visualize in the chart.

Next, we create a line generator function using D3’s line function. We set the x-coordinate of each point to the index of the data point multiplied by 10, and the y-coordinate to the height of the chart minus the value of the data point.

We then use D3’s data binding and enter-update-exit pattern to create a new path element for the line. We set the data attribute of the path to the array of data values, and the d attribute to the line generator function.

Creating a Scatter Plot with D3

To create a scatter plot using D3, you’ll need to select the HTML element where you want to display the plot and then create a new SVG element. You can then use D3’s data binding and enter-update-exit pattern to create the plot.

<div id="scatter-plot"></div>

const svg = d3.select("#scatter-plot")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);

const data = [
    { x: 10, y: 20 },
    { x: 30, y: 40 },
    { x: 50, y: 60 },
    { x: 70, y: 80 },
    { x: 90, y: 100 }
];

const xScale = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 500]);

const yScale = d3.scaleLinear()
    .domain([0, 100])
    .range([300, 0]);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append("g")
    .attr("transform", `translate(0, ${300})`)
    .call(xAxis);

svg.append("g")
    .call(yAxis);

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y))
    .attr("r", 5);

In this example, we first select the HTML element with the ID “scatter-plot” and create a new SVG element with a width of 500 pixels and a height of 300 pixels. We then create an array of data objects that we want to visualize in the plot.

Next, we create two scale functions using D3’s scaleLinear function. We set the domain of each scale to the minimum and maximum values of the x and y coordinates, and the range to the width and height of the SVG element.

We then create two axis functions using D3’s axisBottom and axisLeft functions. We set the scale of each axis to the corresponding scale function.

We then use D3’s data binding and enter-update-exit pattern to create a new circle element for each data point. We set the cx attribute of each circle to the x-coordinate of the data point, the cy attribute to the y-coordinate of the data point, and the r attribute to 5.

Creating a Pie Chart with D3

To create a pie chart using D3, you’ll need to select the HTML element where you want to display the chart and then create a new SVG element. You can then use D3’s data binding and enter-update-exit pattern to create the chart.

<div id="pie-chart"></div>

const svg = d3.select("#pie-chart")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);

const data = [10, 20, 30, 40, 50];

const pie = d3.pie()
    .value(d => d);

const arc = d3.arc()
    .innerRadius(50)
    .outerRadius(150);

svg.append("g")
    .attr("transform", `translate(${250}, ${150})`)
    .selectAll("path")
    .data(pie(data))
    .enter()
    .append("path")
    .attr("d", arc)
    .attr("fill", (d, i) => `hsl(${i * 360}, 100%, 50%)`);

In this example, we first select the HTML element with the ID “pie-chart” and create a new SVG element with a width of 500 pixels and a height of 300 pixels. We then create an array of data values that we want to visualize in the chart.

Next, we create a pie generator function using D3’s pie function. We set the value accessor of the pie generator to the identity function, which simply returns the input value as is.

We then create an arc generator function using D3’s arc function. We set the inner radius of the arc to 50, and the outer radius to 150.

We then use D3’s data binding and enter-update-exit pattern to create a new path element for each slice of the pie chart. We set the d attribute of each path to the arc generator function, and the fill attribute to a hue based on the index of the slice.

Python Data Visualization Libraries

Python offers a wide range of libraries for data visualization, including Matplotlib, Seaborn, Plotly, and Bokeh. These libraries provide a variety of tools for creating and customizing visualizations, including line plots, scatter plots, bar charts, and more.

Matplotlib

Matplotlib is a popular Python library for creating static, animated, and interactive visualizations. It provides a wide range of plotting functions and customization options, making it a versatile tool for data analysis and visualization.

import matplotlib.pyplot as plt

# Create some sample data
x = [1, 2, 3, 4, 5]
y = [2, 4, 6, 8, 10]

# Create a line plot
plt.plot(x, y)

# Add labels and a title                
plt.xlabel('X-axis')
plt.ylabel('Y-axis')
plt.title('Line Plot')

# Show the plot
plt.show()

Seaborn

Seaborn is a Python library for creating statistical graphics and visualizations. It provides a high-level interface for creating a variety of plots, including scatter plots, line plots, bar plots, and more. Seaborn is built on top of Matplotlib and provides a more user-friendly interface for data analysis and visualization.

import seaborn as sns
import pandas as pd                

# Load the data
data = pd.read_csv('data.csv')

# Create a scatter plot
sns.scatterplot(data=data, x='x', y='y')

# Add labels and a title
plt.xlabel('X-axis')
plt.ylabel('Y-axis')
plt.title('Scatter Plot')

# Show the plot
plt.show()

Plotly

Plotly is a Python library for creating interactive visualizations. It provides a wide range of plotting functions and customization options, making it a versatile tool for data analysis and visualization. Plotly supports a variety of chart types, including line plots, scatter plots, bar charts, and more.

import plotly.express as px

# Create some sample data
x = [1, 2, 3, 4, 5]
y = [2, 4, 6, 8, 10]

# Create a line plot
fig = px.line(x=x, y=y)

# Add labels and a title
fig.update_layout(title='Line Plot')

# Show the plot
fig.show()

Bokeh

Bokeh is a Python library for creating interactive visualizations. It provides a wide range of plotting functions and customization options, making it a versatile tool for data analysis and visualization. Bokeh supports a variety of chart types, including line plots, scatter plots, bar charts, and more.

from bokeh.plotting import figure, show

# Create some sample data
x = [1, 2, 3, 4, 5]
y = [2, 4, 6, 8, 10]

# Create a line plot
p = figure(title='Line Plot')
p.line(x, y)

# Show the plot
show(p)

PHP Data Visualization Libraries

PHP offers a variety of libraries for data visualization, including PHPGraphLib, PHPCharts, and PHPDataVisualization. These libraries provide a wide range of tools for creating and customizing visualizations, including line plots, scatter plots, bar charts, and more.

PHPGraphLib

PHPGraphLib is a PHP library for creating static, animated, and interactive visualizations. It provides a wide range of plotting functions and customization options, making it a versatile tool for data analysis and visualization.

<?php
require_once 'phpgraphlib/phpgraphlib_autoloader.php';

// Create some sample data
$x = array(1, 2, 3, 4, 5);
$y = array(2, 4, 6, 8, 10);

// Create a line plot
$graph = new PHPGraphLib_Graph();
$graph->SetMargin(50, 50, 50, 50);
$graph->SetShadow();
$graph->SetCenterX(0.5);
$graph->SetCenterY(0.5);
$graph->SetSize(300, 200);
$graph->SetTitle('Line Plot');
$graph->SetXAxisName('X-axis');
$graph->SetYAxisName('Y-axis');
$graph->SetXAxisTicks(10);
$graph->SetYAxisTicks(10);
$graph->SetXAxisFormat('%d');
$graph->SetYAxisFormat('%d');
$graph->SetXAxisLabelAngle(45);
$graph->SetYAxisLabelAngle(45);
$graph->SetXAxisLabelMargin(10);
$graph->SetYAxisLabelMargin(10);
$graph->SetXAxisTicksDistance(10);
$graph->SetYAxisTicksDistance(10);
$graph->SetXAxisTitle('X-axis');
$graph->SetYAxisTitle('Y-axis');
$graph->SetXAxisTitleMargin(10);
$graph->SetYAxisTitleMargin(10);
$graph->SetXAxisTitleAngle(45);
$graph->SetYAxisTitleAngle(45);
$graph->SetXAxisRange(0, 5);
$graph->SetYAxisRange(0, 10);
$graph->SetXAxisColor('#000000');
$graph->SetYAxisColor('#000000');
$graph->SetXAxisGrid(true, 1, '#CCCCCC', 1);
$graph->SetYAxisGrid(true, 1, '#CCCCCC', 1);
$graph->SetXAxisMinorGrid(true, 1, '#CCCCCC', 0.5);
$graph->SetYAxisMinorGrid(true, 1, '#CCCCCC', 0.5);
$graph->SetXAxisLabelsAngle(45);
$graph->SetYAxisLabelsAngle(45);
$graph->SetXAxisLabelsDistance(10);
$graph->SetYAxisLabelsDistance(10);
$graph->SetXAxisLabelsFormat('%d');
$graph->SetYAxisLabelsFormat('%d');
$graph->SetXAxisLine(true, '#000000', 1);
$graph->SetYAxisLine(true, '#000000', 1);
$graph->SetXAxisTitleFontSize(12);
$graph->SetYAxisTitleFontSize(12);
$graph->SetXAxisFontSize(10);
$graph->SetYAxisFontSize(10);
$graph->SetXAxisMinorTicks(5);
$graph->SetYAxisMinorTicks(5);
$graph->SetXAxisMinorTicksDistance(5);
$graph->SetYAxisMinorTicksDistance(5);
$graph->SetXAxisMinorTicksFormat('%d');
$graph->SetYAxisMinorTicksFormat('%d');
$graph->SetXAxisTicksAngle(45);
$graph->SetYAxisTicksAngle(45);
$graph->SetXAxisTicksDistance(10);
$graph->SetYAxisTicksDistance(10);
$graph->SetXAxisTicksFormat('%d');
$graph->SetYAxisTicksFormat('%d');
$graph->SetXAxisLabelFontSize(10);
$graph->SetYAxisLabelFontSize(10);
$graph->SetXAxisTitleFontSize(12);
$graph->SetYAxisTitleFontSize(12);
$graph->SetXAxisWidth(1);
$graph->SetYAxisWidth(1);
$graph->SetXAxisHeight(1);
$graph->SetYAxisHeight(1);
$graph->SetXAxisZeroAxis(true);
$graph->SetYAxisZeroAxis(true);
$graph->SetXAxisZeroAxisFontSize(10);                
$graph->SetYAxisZeroAxisFontSize(10);
$graph->SetXAxisZeroAxisColor('#000000');
$graph->SetYAxisZeroAxisColor('#000000');
$graph->SetXAxisZeroAxisThickness(1);
$graph->SetYAxisZeroAxisThickness(1);
$graph->SetXAxisZeroAxisDashed(true);
$graph->SetYAxisZeroAxisDashed(true);
$graph->SetXAxisZeroAxisDistance(5);
$graph->SetYAxisZeroAxisDistance(5);
$graph->SetXAxisZeroAxisFormat('%d');
$graph->SetYAxisZeroAxisFormat('%d');
$graph->SetXAxisZeroAxisAngle(45);
$graph->SetYAxisZeroAxisAngle(45);
$graph->SetXAxisZeroAxisPosition(0.5);
$graph->SetYAxisZeroAxisPosition(0.5);
$graph->SetXAxisZeroAxisSide(PHPGraphLib_Graph::AXIS_SIDE_LEFT);
$graph->SetYAxisZeroAxisSide(PHPGraphLib_Graph::AXIS_SIDE_BOTTOM);
$graph->SetXAxisZeroAxisLabelsAngle(45);
$graph->SetYAxisZeroAxisLabelsAngle(45);
$graph->SetXAxisZeroAxisLabelsDistance(10);
$graph->SetYAxisZeroAxisLabelsDistance(10);
$graph->SetXAxisZeroAxisLabelsFormat('%d');
$graph->SetYAxisZeroAxisLabelsFormat('%d');
$graph->SetXAxisZeroAxisLine(true, '#000000', 1);
$graph->SetYAxisZeroAxisLine(true, '#000000', 1);
$graph->SetXAxisZeroAxisTitleFontSize(12);
$graph->SetYAxisZeroAxisTitleFontSize(12);
$graph->SetXAxisZeroAxisFontSize(10);
$graph->SetYAxisZeroAxisFontSize(10);
$graph->SetXAxisZeroAxisMinorTicks(5);
$graph->SetYAxisZeroAxisMinorTicks(5);
$graph->SetXAxisZeroAxisMinorTicksDistance(5);
$graph->SetYAxisZeroAxisMinorTicksDistance(5);
$graph->SetXAxisZeroAxisMinorTicksFormat('%d');
$graph->SetYAxisZeroAxisMinorTicksFormat('%d');
$graph->SetXAxisZeroAxisTicksAngle(45);
$graph->SetYAxisZeroAxisTicksAngle(45);
$graph->SetXAxisZeroAxisTicksDistance(10);
$graph->SetYAxisZeroAxisTicksDistance(10);
$graph->SetXAxisZeroAxisTicksFormat('%d');
$graph->SetYAxisZeroAxisTicksFormat('%d');
$graph->SetXAxisZeroAxisLabelFontSize(10);
$graph->SetYAxisZeroAxisLabelFontSize(10);
$graph->SetXAxisZeroAxisTitleFontSize(12);
$graph->SetYAxisZeroAxisTitleFontSize(12);
$graph->SetXAxisZeroAxisWidth(1);
$graph->SetYAxisZeroAxisWidth(1);
$graph->SetXAxisZeroAxisHeight(1);
$graph->SetYAxisZeroAxisHeight(1);
$graph->SetXAxisZeroAxisZeroAxis(true);
$graph->SetYAxisZeroAxisZeroAxis(true);
$graph->SetXAxisZeroAxisZeroAxisFontSize(10);                
$graph->SetYAxisZeroAxisZeroAxisFontSize(10);
$graph->SetXAxisZeroAxisZeroAxisColor('#000000');
$graph->SetYAxisZeroAxisZeroAxisColor('#000000');
$graph->SetXAxisZeroAxisZeroAxisThickness(1);
$graph->SetYAxisZeroAxisZeroAxisThickness(1);
$graph->SetXAxisZeroAxisZeroAxisDashed(true);
$graph->SetYAxisZeroAxisZeroAxisDashed(true);
$graph->SetXAxisZeroAxisZeroAxisDistance(5);
$graph->SetYAxisZeroAxisZeroAxisDistance(5);
$graph->SetXAxisZeroAxisZeroAxisFormat('%d');
$graph->SetYAxisZeroAxisZeroAxisFormat('%d');
$graph->SetXAxisZeroAxisZeroAxisAngle(45);
$graph->SetYAxisZeroAxisZeroAxisAngle(45);
$graph->SetXAxisZeroAxisZeroAxisPosition(0.5);
$graph->SetYAxisZeroAxisZeroAxisPosition(0.5);
$graph->SetXAxisZeroAxisZeroAxisSide(PHPGraphLib_Graph::AXIS_SIDE_LEFT);
$graph->SetYAxisZeroAxisZeroAxisSide(PHPGraphLib_Graph::AXIS_SIDE_BOTTOM);
$graph->SetXAxisZeroAxisZeroAxisLabelsAngle(45);
$graph->SetYAxisZeroAxisZeroAxisLabelsAngle(45);
$graph->SetXAxisZeroAxisZeroAxisLabelsDistance(10);
$graph->SetYAxisZeroAxisZeroAxisLabelsDistance(10);
$graph->SetXAxisZeroAxisZeroAxisLabelsFormat('%d');
$graph->SetYAxisZeroAxisZeroAxisLabelsFormat('%d');
$graph->SetXAxisZeroAxisZeroAxisLine(true, '#000000', 1);
$graph->SetYAxisZeroAxisZeroAxisLine(true, '#000000', 1);
$graph->SetXAxisZeroAxisZeroAxisTitleFontSize(12);
$graph->SetYAxisZeroAxisZeroAxisTitleFontSize(12);
$graph->SetXAxisZeroAxisZeroAxisFontSize(10);
$graph->SetYAxisZeroAxisZeroAxisFontSize(10);
$graph->SetXAxisZeroAxisZeroAxisMinorTicks(5);
$graph->SetYAxisZeroAxisZeroAxisMinorTicks(5);

// Add data to the graph
$graph->AddData($x, $y);

// Create a line plot
$graph->LinePlot();

// Save the graph as an image
$graph->Stroke('line-plot.png');

PHPCharts

PHPCharts is a PHP library for creating static, animated, and interactive visualizations. It provides a wide range of plotting functions and customization options, making it a versatile tool for data analysis and visualization.

<?php
require_once 'phpcharts/phpcharts.php';

// Create some sample data
$x = array(1, 2, 3, 4, 5);
$y = array(2, 4, 6, 8, 10);

// Create a line plot
$chart = new LineChart(700, 400);
$chart->setTitle('Line Plot');
$chart->setXAxisName('X-axis');
$chart->setYAxisName('Y-axis');
$chart->setXAxisTicks(10);
$chart->setYAxisTicks(10);
$chart->setXAxisFormat('%d');
$chart->setYAxisFormat('%d');
$chart->setXAxisLabelAngle(45);
$chart->setYAxisLabelAngle(45);
$chart->setXAxisLabelMargin(10);
$chart->setYAxisLabelMargin(10);
$chart->setXAxisTicksDistance(10);
$chart->setYAxisTicksDistance(10);
$chart->setXAxisTitle('X-axis');
$chart->setYAxisTitle('Y-axis');
$chart->setXAxisTitleMargin(10);
$chart->setYAxisTitleMargin(10);
$chart->setXAxisTitleAngle(45);
$chart->setYAxisTitleAngle(45);
$chart->setXAxisRange(0, 5);
$chart->setYAxisRange(0, 10);
$chart->setXAxisColor('#000000');
$chart->setYAxisColor('#000000');
$chart->setXAxisGrid(true, 1, '#CCCCCC', 1);
$chart->setYAxisGrid(true, 1, '#CCCCCC', 1);
$chart->setXAxisMinorGrid(true, 1, '#CCCCCC', 0.5);
$chart->setYAxisMinorGrid(true, 1, '#CCCCCC', 0.5);
$chart->setXAxisLabelsAngle(45);
$chart->setYAxisLabelsAngle(45);
$chart->setXAxisLabelsDistance(10);
$chart->setYAxisLabelsDistance(10);
$chart->setXAxisLabelsFormat('%d');
$chart->setYAxisLabelsFormat('%d');
$chart->setXAxisLine(true, '#000000', 1);
$chart->setYAxisLine(true, '#000000', 1);
$chart->setXAxisTitleFontSize(12);
$chart->setYAxisTitleFontSize(12);
$chart->setXAxisFontSize(10);
$chart->setYAxisFontSize(10);
$chart->setXAxisMinorTicks(5);
$chart->setYAxisMinorTicks(5);
$chart->setXAxisMinorTicksDistance(5);
$chart->setYAxisMinorTicksDistance(5);
$chart->setXAxisMinorTicksFormat('%d');
$chart->setYAxisMinorTicksFormat('%d');
$chart->setXAxisTicksAngle(45);
$chart->setYAxisTicksAngle(45);
$chart->setXAxisTicksDistance(10);
$chart->setYAxisTicksDistance(10);
$chart->setXAxisTicksFormat('%d');
$chart->setYAxisTicksFormat('%d');
$chart->setXAxisLabelFontSize(10);
$chart->setYAxisLabelFontSize(10);
$chart->setXAxisTitleFontSize(12);
$chart->setYAxisTitleFontSize(12);
$chart->setXAxisWidth(1);
$chart->setYAxisWidth(1);
$chart->setXAxisHeight(1);
$chart->setYAxisHeight(1);
$chart->setXAxisZeroAxis(true);
$chart->setYAxisZeroAxis(true);
$chart->setXAxisZeroAxisFontSize(10);                
$chart->setYAxisZeroAxisFontSize(10);
$chart->setXAxisZeroAxisColor('#000000');
$chart->setYAxisZeroAxisColor('#000000');
$chart->setXAxisZeroAxisThickness(1);
$chart->setYAxisZeroAxisThickness(1);
$chart->setXAxisZeroAxisDashed(true);
$chart->setYAxisZeroAxisDashed(true);
$chart->setXAxisZeroAxisDistance(5);
$chart->setYAxisZeroAxisDistance(5);
$chart->setXAxisZeroAxisFormat('%d');
$chart->setYAxisZeroAxisFormat('%d');
$chart->setXAxisZeroAxisAngle(45);
$chart->setYAxisZeroAxisAngle(45);
$chart->setXAxisZeroAxisPosition(0.5);
$chart->setYAxisZeroAxisPosition(0.5);
$chart->setXAxisZeroAxisSide(PHPGraphLib_Graph::AXIS_SIDE_LEFT);
$chart->setYAxisZeroAxisSide(PHPGraphLib_Graph::AXIS_SIDE_BOTTOM);
$chart->setXAxisZeroAxisLabelsAngle(45);
$chart->setYAxisZeroAxisLabelsAngle(45);
$chart->setXAxisZeroAxisLabelsDistance(10);
$chart->setYAxisZeroAxisLabelsDistance(10);
$chart->setXAxisZeroAxisLabelsFormat('%d');
$chart->setYAxisZeroAxisLabelsFormat('%d');
$chart->setXAxisZeroAxisLine(true, '#000000', 1);
$chart->setYAxisZeroAxisLine(true, '#000000', 1);
$chart->setXAxisZeroAxisTitleFontSize(12);
$chart->setYAxisZeroAxisTitleFontSize(12);
$chart->setXAxisZeroAxisFontSize(10);
$chart->setYAxisZeroAxisFontSize(10);
$chart->setXAxisZeroAxisMinorTicks(5);
$chart->setYAxisZeroAxisMinorTicks(5);
$chart        ->setXAxisZeroAxisMinorTicksDistance(5);
$chart->setYAxisZeroAxisMinorTicksDistance(5);
$chart->setXAxisZeroAxisMinorTicksFormat('%d');
$chart->setYAxisZeroAxisMinorTicksFormat('%d');
$chart->setXAxisZeroAxisTicksAngle(45);
$chart->setYAxisZeroAxisTicksAngle(45);
$chart->setXAxisZeroAxisTicksDistance(10);
$chart->setYAxisZeroAxisTicksDistance(10);
$chart->setXAxisZeroAxisTicksFormat('%d');
$chart->setYAxisZeroAxisTicksFormat('%d');
$chart->setXAxisZeroAxisLabelFontSize(10);
$chart->setYAxisZeroAxisLabelFontSize(10);
$chart->setXAxisZeroAxisTitleFontSize(12);
$chart->setYAxisZeroAxisTitleFontSize(12);
$chart->setXAxisZeroAxisWidth(1);
$chart->setYAxisZeroAxisWidth(1);
$chart->setXAxisZeroAxisHeight(1);
$chart->setYAxisZeroAxisHeight(1);

// Add data to the graph
$chart->addData($x, $y);

// Create a line plot
$chart->linePlot();

// Save the graph as an image
$chart->render('line-plot.png');

PHPDataVisualization

PHPDataVisualization is a PHP library for creating static, animated, and interactive visualizations. It supports a wide range of chart types, including line charts, bar charts, pie charts, and scatter plots. It also supports exporting charts to various formats, including PNG, JPEG, and SVG.

<?php
require_once 'phpdatavisualization/phpdatavisualization.php';

// Create some sample data
$x = array(1, 2, 3, 4, 5);
$y = array(2, 4, 6, 8, 10);

// Create a line chart
$chart = new LineChart(700, 400);
$chart->setTitle('Line Chart');
$chart->setXAxisName('X-axis');
$chart->setYAxisName('Y-axis');
$chart->setXAxisTicks(10);
$chart->setYAxisTicks(10);