Scales and Axes in D3
DRANK

IntroductionThe charts are more meaningful when they have axes around them. The axes tell the quantity of a particular datum represented on the plane. This a how-to post to create the axes with scales around a D3 chart.Using the codeD3 provides .json() method to load the JSON data from a URL. This method takes two parameters – first, a URL that returns a JSON data and second, an anonymous method that takes action on the data coming from the server (current directory in my case). This anonymous method is asynchronous by nature and and takes at most two parameter. The following lines loads the data from a JSON file from my current directory:<code>var svgHeight = 500; var svgWidth = 800; var paddingH = 50; var paddingV = 50; var dataset = undefined; var maxX, xScale, yScale, radiusScale, colorXScale, colorYScale; /*----- Working with the D3 rendering -----*/ var svg = d3.select('body') .append('svg') .attr('width', svgWidth) .attr('height', svgHeight); d3.json('points.json', funct…

codeproject.com
Related Topics: SVG