Old school D3 from simpler times

All examples By author By category About

ChandrakantThakkarDigiCorp

Full window Github gist

xAxis Ticks Format D3 V4

<html>

<head>
    <title>Chandrakant Bharatkumar Thakkar</title>
</head>

<body>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <div id="chart" style="width: 800;height: 500">
    </div>
    <script>
        $("#chart").empty();

var mainDiv = "#chart";
        var xAxis = "xaxis";
        var mainDivName = mainDiv.substr(1, mainDiv.length);
        d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height());
        var svg = d3.select(mainDiv + " svg"),
            margin = {
                top: 20,
                right: 20,
                bottom: 30,
                left: 40
            },
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom;

var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [{
            xaxis: 1
        }, {
            xaxis: 2
        }, {
            xaxis: 3
        }, {
            xaxis: 4
        }, {
            xaxis: 5
        }, {
            xaxis: 6
        }, {
            xaxis: 7
        }, {
            xaxis: 8
        }, {
            xaxis: 9
        }, {
            xaxis: 10
        }];
        var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.1);
        x0.domain(data.map(function(d) {
            return d[xAxis];
        }));
        var distance = 80;
        var ypoint = height;
        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ypoint + ")")
            .call(d3.axisBottom(x0))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin.bottom * 0.9)
            .attr("dx", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Simple Number Format");
        ypoint = ypoint - distance;
        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ypoint + ")")
            .call(d3.axisBottom(x0).tickFormat(d3.format(".2f")))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin.bottom * 0.9)
            .attr("dx", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Floating Number Format");

data.forEach(function(d) {
            d.xaxis = d.xaxis * 1000;
        });
        x0.domain(data.map(function(d) {
            return d[xAxis];
        }));
        ypoint = ypoint - distance;
        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ypoint + ")")
            .call(d3.axisBottom(x0).tickFormat(d3.format(".0s")))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin.bottom * 0.9)
            .attr("dx", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("SI Format");

var data = [{
            xaxis: "1-jul-17"
        }, {
            xaxis: "2-jul-17"
        }, {
            xaxis: "3-jul-17"
        }, {
            xaxis: "4-jul-17"
        }, {
            xaxis: "5-jul-17"
        }, {
            xaxis: "6-jul-17"
        }, {
            xaxis: "7-jul-17"
        }, {
            xaxis: "8-jul-17"
        }, {
            xaxis: "9-jul-17"
        }, {
            xaxis: "10-jul-17"
        }];
        var parseTime = d3.timeParse("%d-%b-%y");
        data.forEach(function(d) {
            d.xaxis = parseTime(d.xaxis);
        });
        x0 = d3.scaleTime().range([0, width]);
        x0.domain(d3.extent(data, function(d) {
            return d[xAxis]
        }));
        ypoint = ypoint - distance;
        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ypoint + ")")
            .call(d3.axisBottom(x0).tickFormat(d3.timeFormat("%a %d")))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin.bottom * 0.9)
            .attr("dx", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Day Date Format");
        ypoint = ypoint - distance;
        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ypoint + ")")
            .call(d3.axisBottom(x0).tickFormat(d3.timeFormat("%Y-%m-%d")))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin.bottom * 0.9)
            .attr("dx", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("YYYY-MM-DD Format");
        ypoint = ypoint - distance;
        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + ypoint + ")")
            .call(d3.axisBottom(x0).ticks(10).tickFormat(d3.timeFormat("%y-%b-%d")))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin.bottom * 0.9)
            .attr("dx", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("YY-MON-DD Format");
    </script>
</body>

</html>

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

https://code.jquery.com/jquery-latest.min.js

https://d3js.org/d3.v4.min.js