The Scaling Challenge

There are many scales onto which the data can be mapped. On these scales the axes depends. Whether top or left the axes needs tick marks and values. For that scales come in handy.

If visualization is constructing “visual representations of abstract data to amplify cognition”, then perhaps the most important concept in D3 is the scale, which maps a dimension of abstract data to a visual variable. - Mike Bostock

Learning to use the Scale effectively is more important than placing the points on the chart. I have decided to master the scales first, followed by the ticks formating, then color scaling. All these are done practically to implement day to day visualization at the beginner level.

Scales are transformed into the axis and used in the legends, when it comes to categories. The legends are further used for creating transitions, and making highlights on the charts.

Here are the list of Problems faced and Solved

• Locating the X-axis at the bottom of the SVG

Issue here was the green rectangles were translated to the very bottom of the g element that was created. When the x-axis was attached, it went out of the view. The solution was to bring up the SVG element and leave a margin below.

• Formating the ticks of the time scales

Formating is straight forward by using d3.format("%a"). Challenge arose in using the correct function to call the format. tickFormat(d3.format()) chaining to d3.axisBottom() turned out to be the correct way. D3's help was not clear in this regard

• Positioning the Ordinal ticks along the X-axis

Again the help for the Ordinal function was bit opaque, especially when it comes to assigning the range. The range in other scales are [start, stop]. For ordinal [each ordinal point has seperate stop]. The solution is to create custom range using the map() function.

• Automating the positioning of the SVGs on the page

I wanted to automate the design of the webpage and make it beautiful and usable at the same. D3 gives the necessary tools for shapes, colors while JS gives the looping abstraction necessary for populating the shapes and colors. Following is the code for the same

                var chartGrid = d3.range(6).map((g) =>({
                    chart: base.append('svg')
                        .attr('height',heightCh)
                        .attr('width',widthCh)
                        .attr('transform','translate(20,0)')
                }));            
            

• How to reach the svg elements that are inside an Array?

Idea taken from here Give an "id" to the array of svgs. Then use the ids to select the svg you want

                var chartGrid = d3.range(6).map((g,i) =>({
                    chart: base.append('svg')
                        .attr('id',`svg${i}`)
                        .attr('height',heightCh)
                        .attr('width',widthCh)
                        .attr('transform','translate(20,0)')
                }));
            

• How to visualise the Band scale on the svgs?

In observable you can find a very colorful tutorial on the scales that explains the various nuances of the scales here. Attaching rectangles to multiple SVGs in the page is trivial. More interesting challenge was locating the rectangles, which the scaleBand() itself did exactly as it is done in observable...

• How to import the function into my script? I am getting reference error for require

Browser must know that the script you are importing is a module. This is done by adding the "type = module" attribute in the script tag, as done in this page. If the script is used in node environment, then package.json file has the config stating the scripts are module types.

• Appending series of squares to the existing svg

In order to show the quantile, quantize and threshold scale in action, it is better to have a grid of squares. That is what I am building for the svg 5 and 6

• How did you bring all those squares on top of the green rectangles?

I am importing the squares function from squares.js file and attaching it to the SVGs that is created earlier. The method of coloring the squares has been delegated to the quantile, quantize and the threshold scales. The idea of representing the scales using squares was taken from here. Even though the method used to create them is different from how guys at observable has done that.

• Is there a way to create those squares without D3?

There is JQuery, and other frameworks like angular that can append the shapes to the DOM elements. I have explored that here using the data on a json data

The chart area will be colored green.