D3 in 5 Minutes, Create Bar Chart & Funnel Chart VisualiZations using D3 scales with example using React js
By: Shobhit Singh
Tags: Technology, JavaScript, D3js, Visualization, Charts

Basic knowledge of SVG is needed, think of SVG similar to HTML elements.

working in D3 is pretty much similar to HTML and a pinch of jQuery with all those chaining and selection of elements.

Basics first:

1.Selection and manipulation

Using D3 we can select DOM elements using their CSS selectors or the name of an element itself.

D3 provides us two methods to select DOM elements. They are d3.select() which returns the first selection and d3. selectAll() this returns all the elements matching the criteria.

// select h1 ,add style of color red and then insert text 'h1 tag' d3.select('h1')

.style('color', 'red')

.text('h1 tag'); // select body tag append a `p` tag to it with text 'First Paragraph' d3.select('body').append('p').text('First Paragraph'); // select all `p` tags & add style of blue color to it. d3.selectAll('p').style('color', 'blue');

Code Playground Link for D3 basics: https://scrimba.com/c/c36r67S8

2. Data loading and binding

var dataset = [1, 2, 3, 4, 5]; d3.select('body') .selectAll('p') .data(dataset) //loop onto data set .join('p') // appends paragraph for each data element .text('D3 is awesome!!'); //this adds same text for each data entry .text(function(d) { return d; }); //this adds text for each data entry

3. SVG elements

SVG or a scalable vector graphics is a powerful tool to define vector graphics for the web.

Using SVG we can create different shapes and apply different styles to them.

var svgWidth = 600, svgHeight = 500; var svg = d3.select("svg") .attr("width", svgWidth) .attr("height", svgHeight) var line = svg.append("line") .attr("x1", 100) .attr("x2", 500) .attr("y1", 50) .attr("y2", 50) .attr("stroke", "red") //stroke is like border in svg .attr("stroke-width", 5); var rect = svg.append("rect") .attr("x", 100) .attr("y", 100) .attr("width", 200) .attr("height", 100) .attr("fill", "#9B95FF"); //fill is like background color in svg var circle = svg.append("circle") .attr("cx", 200) .attr("cy", 300) .attr("r", 80) .attr("fill", "#7CE8D5");

Code Playground Link for SVG Elements : https://scrimba.com/c/c36r67S8

Scales 📏 are functions which will transform your data by either increasing or decreasing their values for better visualizations 📈.

Multiple types of scale 📏 are available and depending upon the input data you can choose the scales.

Example

Construct a new continuous scale with the specified domain and range, Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.

Say if your linear scale domain is [0,100] and your range is [500,1000]

then your input values say 0,50,100 shall map to an output of 500, 750, 1000.

which can be understood as the min value of domain corresponds to min value in the range and max value of domain corresponds to max value in the range, and the mid-value of domain corresponds to min-value in range, and same is the case for any other value, basically the input is outputted proportionally based on domain & range.

var dataset = [1,2,3,4,5]; var svgWidth = 500, svgHeight = 300, barPadding = 5; var barWidth = (svgWidth / dataset.length);

var svg = d3.select('svg')// select the svg element .attr("width", svgWidth) // set its css attribute of width .attr("height", svgHeight); // set its css attribute of height var yScale = d3.scaleLinear() // create a linear scale // set domain of scale with min=0 & max as max value of dataset , D3 even provides us with mathemetical operations like max ,min,etc

.domain([0, d3.max(dataset)])

.range([0, svgHeight]);// set range of scale var barChart = svg.selectAll("rect") //📊 select all `rect` .data(dataset) //loop onto dataset .join("rect") // append all selected `rect` .attr("y", function(d) { return svgHeight - d }) //set y position attribute .attr("height", function(d) { return d; })//set height attribute .attr("width", barWidth - barPadding) //set width attribute with padding so that bar does not stick together & have a nice gap in betweeen



//set transform attribute else the bars would stack on top of each other .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; });

Code Playground Link for Bar chart 📊 : https://scrimba.com/c/ceqVqLCW

5.Funnel chart