Here I would like to talk about converting large, complex data into an easy visual representation format. For that, I pick the most commonly used charts - line, bar, and pie. Actually, there are plenty of charts, but you can find these three in most of the applications made for data analysis or representation. Next, I will explain how to build them by using the popular library D3.js. I’ve created a small demo application. It is a simple dashboard with those charts. I did not use any framework, just HTML, CSS, and JavaScript. Also, I added 3 separate files with data set for each of the charts. I think it is more than enough to begin drawing the charts. But first, let’s take a look at the HTML structure: D3 charts D3 Dashboard Line chart Bar chart Pie chart <!doctype html> < = > html lang "en" < > head < = /> meta charset "UTF-8" < > title </ > title < = = > link rel "stylesheet" href "styles.css" < = = > link href "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel "stylesheet" < = > script src "https://d3js.org/d3.v7.min.js" </ > script < = = > script type "module" src "charts/bar-chart.js" defer </ > script < = = > script type "module" src "charts/line-chart.js" defer </ > script < = = > script type "module" src "charts/pie-chart.js" defer </ > script </ > head < > body < > header < > span </ > span </ > header < > section < = > div class "bar-line-charts" < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = > div id "line-chart" class "chart" </ > div </ > div < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = > div id "bar-chart" class "chart" </ > div </ > div </ > div < = > div class "pie-chart" < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = = > div id "d3-chart" class "chart" style "padding: 90px" </ > div </ > div </ > div </ > section </ > body </ > html Let’s draw the first chart, it is going to be a pie, then I will continue with the line and bar chart. Pie Chart data element = .getElementById( ); margin = ,
    width = ,
    height = ; radius = .min(width, height) / - margin; svg = d3.select(element)
    .append( )
    .attr( , width)
    .attr( , height)
    .attr( , )
    .append( )
    .attr( , + width / + + height / + ); color = d3.scaleOrdinal()
    .domain(data)
    .range([ , , ]); pie = d3.pie()
    .value( { d[ ].value;
    }); data_ready = pie( .entries(data)); arcGenerator = d3.arc()
    .innerRadius( )
    .outerRadius(radius); svg.selectAll( )
    .data(data_ready)
    .enter()
    .append( )
    .attr( , arcGenerator)
    .attr( , { (color(d.data[ ].name))
    }); svg.selectAll( )
    .data(data_ready)
    .enter()
    .append( )
    .text( { d.data[ ].name
    })
    .attr( , { + arcGenerator.centroid(d) + ;
    })
    .style( , )
    .style( , ); import from '../data/pie-data.js' // Selecting the element const document 'd3-chart' // Setting dimensions const 10 400 400 // Setting the radius of the pie const Math 2 const "svg" "width" "height" "style" "margin-top: -32px !important" "g" "transform" "translate(" 2 "," 2 ")" // Setting the color scale const "#43ab92" "#f75f00" "#512c62" // Setting the position of each group on the pie const ( ) function d return 1 const Object // Building arcs const 0 // Building the pie chart 'slices' 'path' 'd' 'fill' ( ) function d return 1 // Adding titles to pie slices 'slices' 'text' ( ) function d return 1 "transform" ( ) function d return "translate(" ")" "text-anchor" "middle" "font-size" 20 Line Chart lineData element = .getElementById( ); margin = { : , : , : , : },
    width = - margin.left - margin.right,
    height = - margin.top - margin.bottom; createGradient = { gradient = select
        .select( )
        .append( )
        .attr( , )
        .attr( , )
        .attr( , )
        .attr( , )
        .attr( , );

    gradient.append( )
        .attr( , )
        .attr( , );

    gradient.append( )
        .attr( , )
        .attr( , );
} createGlowFilter = { filter = select
        .select( )
        .append( )
        .attr( , )

    filter.append( )
        .attr( , )
        .attr( , ); femerge = filter
        .append( );

    femerge.append( )
        .attr( , );

    femerge.append( )
        .attr( , );
} parseTime = d3.timeParse( ); parsedData = lineData.map( (
    { : item.values.map( ({ : val.total, : parseTime(val.date)
        }))
    })); svg = d3.select(element)
    .append( )
    .attr( , width + margin.left + margin.right)
    .attr( , + margin.top + margin.bottom)
    .attr( , )
    .append( )
    .attr( , ); xScale = d3.scaleTime()
    .domain([
        d3.min(parsedData, (d) => d3.min(d.values, (v) => v.date)),
        d3.max(parsedData, (d) => d3.max(d.values, (v) => v.date))
    ])
    .range([ , width]); yScale = d3.scaleLinear()
    .domain([
        d3.min(parsedData, (d) => d3.min(d.values, (v) => v.total)),
        d3.max(parsedData, (d) => d3.max(d.values, (v) => v.total))
    ])
    .range([height, ]); svg.append( );
svg.call(createGradient);
svg.call(createGlowFilter); line = d3.line()
    .x( { xScale(d.date);
    })
    .y( { yScale(d.total);
    })
    .curve(d3.curveCatmullRom.alpha( )); svg.selectAll( )
    .data(parsedData)
    .enter()
    .append( )
    .attr( , { lineValues = line(d.values).slice( ); splitedValues = lineValues.split( ); })
    .style( , ); svg.selectAll( )
    .data(parsedData)
    .enter()
    .append( )
    .attr( , { line(d.values)
    })
    .attr( , )
    .style( , )
    .style( , )
    .attr( , ); svg.append( )
    .attr( , + height + )
    .call(d3.axisBottom(xScale)); svg.append( )
    .call(d3.axisLeft(yScale)); import from '../data/line-data.js' // Selecting the element const document 'line-chart' // Setting dimensions const top 40 right 30 bottom 7 left 50 900 300 // Adding helper functions to make the line look nice // The <defs> element is used to store graphical objects that will be used at a later time. const ( ) function select const 'defs' 'linearGradient' 'id' 'gradient' 'x1' '0%' 'y1' '100%' 'x2' '0%' 'y2' '0%' 'stop' 'offset' '0%' 'style' 'stop-color:#da6e2a;stop-opacity:0.05' 'stop' 'offset' '100%' 'style' 'stop-color:#da6e2a;stop-opacity:.5' const ( ) function select const 'defs' 'filter' 'id' 'glow' 'feGaussianBlur' 'stdDeviation' '4' 'result' 'coloredBlur' const 'feMerge' 'feMergeNode' 'in' 'coloredBlur' 'feMergeNode' 'in' 'SourceGraphic' // Parsing timestamps const '%Y/%m/%d' const => item values ( ) => val total date // Appending svg to a selected element const 'svg' 'width' 'height' 300 "viewBox" `0 40 ` ${width + } 80 ${height} 'g' 'transform' `translate( , )` ${margin.left} ${margin.top} // Setting X,Y scale ranges const 0 const 0 // Appending <defs> 'defs' // Drawing line with inner gradient // Adding functionality to make line curved const ( ) function d return ( ) function d return 0.5 // Drawing inner part of a line '.line' 'path' 'd' ( ) function d const 1 const ',' return `M0, , ,l0, ` ${height} ${lineValues} ${height - splitedValues[splitedValues.length - ]} 1 'fill' 'url(#gradient)' // Drawing a line '.line' 'path' 'd' ( ) function d return 'stroke-width' '2' 'fill' 'none' 'filter' 'url(#glow)' 'stroke' '#ff6f3c' // Adding the x Axis "g" "transform" "translate(0," ")" // Adding the y Axis "g" Bar Chart barData element = .getElementById( ); margin = { : , : , : , : },
    width = - margin.left - margin.right,
    height = - margin.top - margin.bottom; xScale = d3.scaleBand()
    .range([ , width])
    .padding( ); yScale = d3.scaleLinear()
    .range([height, ]); svg = d3.select(element).append( )
    .attr( , width + margin.left + margin.right)
    .attr( , height + margin.top + margin.bottom)
    .attr( , )
    .append( )
    .attr( , + margin.left + + margin.top + ); barData.forEach( {
    d.value = +d.value;
}); xScale.domain(barData.map( { d.name;
}));
yScale.domain([ , d3.max(barData, { d.value;
})]); svg.selectAll( )
    .data(barData)
    .enter().append( )
    .attr( , { xScale(d.name);
    })
    .attr( , xScale.bandwidth())
    .attr( , { yScale(d.value);
    })
    .attr( , { height - yScale(d.value);
    })
    .style( , ); svg.append( )
    .attr( , + height + )
    .call(d3.axisBottom(xScale)); svg.append( )
    .call(d3.axisLeft(yScale)); import from '../data/bar-data.js' // Selecting the element const document 'bar-chart' // Setting dimensions const top 40 right 20 bottom 50 left 50 900 480 // Setting X,Y scale ranges const 0 0.1 const 0 // Appending svg to a selected element const "svg" "width" "height" "viewBox" `0 40 ` ${width + } 80 ${height} "g" "transform" "translate(" "," ")" // Formatting the data ( ) function d // Scaling the range of the data in the domains ( ) function d return 0 ( ) function d return // Appending the rectangles for the bar chart ".bar" "rect" "x" ( ) function d return "width" "y" ( ) function d return "height" ( ) function d return "fill" "#ff6f3c" // Adding the x Axis "g" "transform" "translate(0," ")" // Adding the y Axis "g" Wrapping up As you can see, all these charts do not have difficult logic. It takes around 70 lines of code to implement it. That is how we can make complex data to be converted in easy visual representation format. Try it yourself! The source code can be found on . I recommend inspecting charts in the DOM to understand how D3 renders the elements. GitHub

Splitting Angular Applications Into Micro Front-Ends

Top 3 Free JavaScript Libraries for Data Visualization  

Data Visualization for Dummies: 3 Simple Charts with <70 Lines of Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Things You Will Love About Micro Frontends

10 Resources That’ll Make You Better At Dashboard Creation

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Data Table Libraries for JavaScript

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

10 Best React Native Chart Libraries

3 Things You Will Love About Micro Frontends

10 Resources That’ll Make You Better At Dashboard Creation

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Data Table Libraries for JavaScript

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

10 Best React Native Chart Libraries

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps