Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
data visualization

15 Articles
{
,

}
A circular pit chart pin three slices differentiated by different colors. Sparkle emoji surrounds the chart.
Direct link to the article Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!
charts data visualization

Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!

We dive again into CSS Pie Charts! This time, Author Antoine Villepreux delivers semantic and flexible charts without a single line of JS.
Image
Antoine Villepreux on Jun 4, 2026
A circular pit chart pin three slices differentiated by different colors. Sparkle emoji surrounds the chart.
Direct link to the article Trying to Make the Perfect Pie Chart in CSS
charts data visualization

Trying to Make the Perfect Pie Chart in CSS

Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.
Image
Juan Diego Rodríguez on Feb 9, 2026
Horizontal bar chart illustration. Bars are pill-shaped with white text labels indicating percentage. Dark gray background.
Direct link to the article CSS Bar Charts Using Modern Functions
charts data visualization

CSS Bar Charts Using Modern Functions

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?
Image
Preethi on Feb 5, 2026
Image
Direct link to the article How to Make an Area Chart With CSS
charts clip-path data visualization flexbox

How to Make an Area Chart With CSS

You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine …

Image
Rami Yushuvaev on Dec 2, 2020
Image
Direct link to the article Creating a Gauge in React
data visualization graph react SVG

Creating a Gauge in React

You should really look at everything Amelia does, but I get extra excited about her interactive blog posts. Her latest about creating a gauge with SVG in React is unreal. Just the stuff about understanding viewBox is amazing and that’s …

Image
Chris Coyier on May 3, 2020
Image
Direct link to the article Making an Audio Waveform Visualizer with Vanilla JavaScript
canvas data visualization web audio api

Making an Audio Waveform Visualizer with Vanilla JavaScript

As a UI designer, I’m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing user interfaces. But sometimes, I step on a technical landmine.

A few …

Image
Matthew Ström on Nov 12, 2019
Image
Direct link to the article Making a Chart? Try Using Mobx State Tree to Power the Data
charts data visualization

Making a Chart? Try Using Mobx State Tree to Power the Data

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options.

But …

Image
Ted Littledale on Nov 5, 2019
Image
Direct link to the article Creating Interactive Maps in WordPress with MapSVG
data visualization WordPress wordpress plugins

Creating Interactive Maps in WordPress with MapSVG

The MapSVG plugin for WordPress allows you to create feature-rich, interactive maps quickly and through a smart admin UI. Interactive maps are a common request for projects when you need to visualize impact over particular locations. If you are …

Image
Lentie Ward on May 29, 2019
Image
Direct link to the article The Many Ways of Getting Data Into Charts
api charts data visualization

The Many Ways of Getting Data Into Charts

Data is available everywhere nowadays, whether it’s in a plain text file, a REST API, an online Google sheet… you name it! It’s that variety of context that makes building graphs more than simply having a database in your local …

Image
Dan Englishby on May 1, 2019
Image
Direct link to the article Earth day, API’s and sunshine.
api data visualization fetch

Earth day, API’s and sunshine.

Cassie Evans showcases some really nifty web design ideas and explores using the API provided by the company her team over at Clearleft recently hired to cover their building’s roof with solar panels. Cassie outlines her journey designing a webpage …

Image
Robin Rendle on May 1, 2019
  • 1
  • 2
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

This field is for validation purposes and should be left unchanged.

CSS-Tricks
  • About the site
  • Contact us
  • Write for CSS-Tricks!
  • Advertising
  • RSS Feeds
Social
  • Bluesky
  • Mastodon
  • CodePen
  • X / Twitter
  • LinkedIn
Legalese
  • CSS-Tricks License
  • AI Statement
Back to Top
Advertisement
Advertisement