JSFiddle - React, Tailwind, and code Playground

by Blake Dietz

JavaScript

var data   = [1,2,3,4];
        var width  = 500;
        var height = 250;
        var xScale = d3.scale.ordinal()
                                .domain(data)
                            .rangeBands([5,width-5]);

        var svg = d3.select("body")
                    .append("svg")
                        .attr("width", width)
                        .attr("height",height);

        function drawXAxis()
        {
            svg.selectAll("line")
                .data(data)
                .enter()
                .append("line")
                    .attr(
                        {
                            "x1": function(d,i){return xScale(d);},
                            "x2": function(d,i){return xScale(d);},
                            "y1": function(d,i){return 10},
                            "y2": function(d,i){return (i%1== 0)?5:10 },
                            "fill" :"red",
                            "stroke":"red",
                            "stroke-width":"3"
                        });

            svg.selectAll("line")
                .data(data)
                .enter()
                .append("text")
                    .attr(
                        {
                            "x1": function(d,i){return xScale(d);},
                            "x2": function(d,i){return xScale(d);},
                            "y1": function(d,i){return 10},
                            "y2": function(d,i){return (i%1== 0)?5:10 },
                            "fill" :"red",
                            "stroke":"red",
                            "stroke-width":"3"
                        });
            
            svg.selectAll("text")
                .data([1,3])// Filter out the values that you want to use
                .enter()
                .append("text")
                    .attr(
                        {
                            
                            "x": function(d){return xScale(d)},
                            "y": 20,
       ...