How to use Jinja for Data Visualization
Last Updated :
24 Apr, 2025
Jinja is a powerful templating engine for rendering text whether it be HTML, LaTeX, or just anything that is just pure text. This article provides an introduction to how to utilize Jinja for Data Visualization. First, it presents the idea and finally provides an example of rendering a simple bar graph on a web page using a Jinja template rendered into HTML with the help of Python programming language. This article assumes basic familiarity with Jinja and Python.
Jinja for Data Visualization
This section discusses the basic idea of how to visualize data with Jinja. We know that Jinja generates text using a template and data is passed to that template. So we can design Jinja templates to process data and output some text files like HTML or LaTeX or any other text that can be rendered by some software such that it visualizes that data. Here is the description in step-by-step form -
Steps to visualize data with Jinja
Step 1: Decide what software can visualize your data (like a browser, LaTeX engine, etc.) which renders using text.
Step 2: Write a Jinja Template that can process the given data into a text-file/text that can be rendered using your chosen software to visualize the data. Like HTML file for browser.
Step 3: Using a Python program, load the data and then render the Jinja Template with the data to get an output text file.
Step 4: Render the output file on the chosen software to see the visualization of your data. (For example, if it's an HTML file, render it using browser to see output).
Rendering a web page with Bar Graph using Jinja
In this section, we visualize bar chart for comparing the popularity of different programming languages (Disclaimer: The data used is just some random data and does not represent any real thing in particular). We keep our data in a CSV file. We create a Jinja template to render an HTML file (which uses Chart.js library to visualize the bar chart). The csv file is read using pandas and the template is rendered and served on localhost using Flask. One doesn't need to be much familiar with any of these except Python and Jinja to work out this example.
Installation
After installing Python, we need to install Flask, jinja2 and pandas modules. We can use the following commands to install them -
On Windows -
py -m pip install flask, jinja2, pandas
On Linux -
python3 -m pip install flask, jinja2, pandas
Project Structure
We need to create the following file-folder structure to setup the project -
demoVisualization
|_ templates
| |_ visualizationTemplate.html
|_ data.csv
|_ renderer.py
This is mainly required for working with flask.
Explanation and content of the files
The data.csv file contains the data with one column for language name and the other for its respective popularity indicating value. Here are the contents of data.csv file:
Language,Popularity
Javascript,100
Python,80
C++,50
Java,70
Alternatively, this is the GitHub link to the data.csv file.
Next, we have the visualizationTemplate.html file which is a Jinja template file. It accepts two data parameters - labels (a sequence of strings, here, the names of programming languages) and popularity (a sequence of numbers, here, the popularity of the languages). It defines an HTML file using "Chart.js" library to visualize the bar chart (Discussing the details of HTML and Chart.js is beyond the scope of this article though).
visualizationTemplate.html: Understanding the file requires the knowledge of Jinja Syntax. Here we used the for loop of jinja to insert the data into data and labels parameters.
HTML
<html>
<head>
<title>Visualization with Jinja</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<H2>Popularity of different languages</H2>
<canvas id="myVisualization"></canvas>
<script>
var ctx = document.getElementById('myVisualization').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: [{%for x in labels%}"{{x}}",{%endfor%}],
datasets: [{
label: "Year 2023",
data: [{%for d in popularity%}{{d}},{%endfor%}],
borderwidth: 1
}]
},
options: {scales: {y:{beginAtZero: true}}}
});
</script>
</body>
</html>