D3 js How to get plain text in label at X axis and make value scaleLog

Hi i figured out how to add log labels at Y axis axis but cant make chart line scale log, and i dont really know how to make X axis labels plain text instead of converting it to date

If i just change scaleLinear to scaleLog chart line dissapear

Also removing const parseTime = d3.timeParse('%Y/%m/%d'); and change parseTime(val.date) just to val.date, and changing scaleTime to scaleOrdinal does not work as i would

Also i don't understand why Y axis labels are so blured

Sorry for asking but cant findout how this pluggin works. using D3 7.2.1 and JQ 3.5.1

(function (d3){
        const lineChartData = [
        {
            currency: "data",
            values: [
            {
                date: "2018/01/01",
                close: 0
            },
            {
                date: "2018/02/01",
                close: 5
            },
            {
                date: "2018/03/01",
                close: 10 
            },
            {
                date: "2018/04/01",
                close: 50 
            },
            {
                date: "2018/05/01",
                close: 100 
            },
            {
                date: "2018/06/01",
                close: 500 
            },
            {
                date: "2018/07/01",
                close: 1000 
            },
            {
                date: "2018/08/01",
                close: 5000 
            },
            {
                date: "2018/09/01",
                close: 10000 
            },
            ]
        }
        ];
    
        const margin = {
        top: 20,
        bottom: 20,
        left: 50,
        right: 20
        };
    
        const width = 400 - margin.left - margin.right;
        const height = 300 - margin.top - margin.bottom;
        
        const createGradient = select => {
        const gradient = select
            .select('defs')
            .append('linearGradient')
                .attr('id', 'gradient')
                .attr('x1', '0%')
                .attr('y1', '100%')
                .attr('x2', '0%')
                .attr('y2', '0%');

        gradient
                .append('stop')
                .attr('offset', '0%')
                .attr('style', 'stop-color:#FF6500; stop-opacity:0');

        gradient
            .append('stop')
            .attr('offset', '100%')
            .attr('style', 'stop-color:#FF6500; stop-opacity: 1');
        }
        
        const createGlowFilter = select => {
        const filter = select
            .select('defs')
            .append('filter')
                .attr('id', 'glow')
    
        //stdDeviation is px count for make blur around main chart line
        filter
            .append('feGaussianBlur')
            .attr('stdDeviation', '0')
            .attr('result', 'coloredBlur');
        
        const femerge = filter
            .append('feMerge');
        
        femerge
            .append('feMergeNode')
            .attr('in', 'coloredBlur');
        femerge
            .append('feMergeNode')
            .attr('in', 'SourceGraphic');
        }
    
        const svg = d3.select('#line-chart')
        .append('svg')
            .attr('width', 700 + margin.left + margin.right)
            .attr('height', 300 + margin.top + margin.bottom)
        .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`);
        
        svg.append('defs');
        svg.call(createGradient);
        svg.call(createGlowFilter);
    
        const parseTime = d3.timeParse('%Y/%m/%d');
        
        const parsedData = lineChartData.map(company => ({
        ticker: company.ticker,
        values: company.values.map(val => ({
            close: val.close,
            date: parseTime(val.date)
        }))
        }));
    
        const xScale = d3.scaleTime()
        .domain([
            d3.min(parsedData, d => d3.min(d.values, v => v.date)),
            d3.max(parsedData, d => d3.max(d.values, v => v.date))
        ])
        .range([0, width]);

        const yScale = d3.scaleLinear()
        .domain([
            d3.min(parsedData, d => d3.min(d.values, v => v.close)),
            d3.max(parsedData, d => d3.max(d.values, v => v.close))
        ])
        .range([height, 0]);
        
        const line = d3.line()
        .x(d => xScale(d.date))
        .y(d => yScale(d.close))
        .curve(d3.curveCatmullRom.alpha(0.5));
        
        svg.selectAll('.line')
        .data(parsedData)
        .enter()
        .append('path')
            .attr('d', d => {
            const lineValues = line(d.values).slice(1);
            const splitedValues = lineValues.split(',');
        
            return `M0,${height},${lineValues},l0,${height - splitedValues[splitedValues.length - 1]}`
            })
            .style('fill', 'url(#gradient)')
        
        svg.selectAll('.line')
        .data(parsedData)
        .enter()
        .append('path')
            .attr('d', d => line(d.values))
            .attr('stroke-width', '2')
            .style('fill', 'none')
            .style('filter', 'url(#glow)')
            .attr('stroke', '#FF6500');

        const tick = svg.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(xScale).ticks(9))
        .selectAll('.tick')
        .style('transition', '.2s');
    
        //Y dashes
        //stroke color of line in background
        //stroke-dasharray
        //first paramter is length
        //second parameter is space between
        tick
        .selectAll('line')
            .attr('stroke-dasharray', `4, 7`)
            .attr('stroke', '#5E779B')
            .attr('y2', `-${height}px`)
        tick
        .append('rect')
            .attr('width', `${(width / 12) + 10}px`)
            .attr('x', `-${width / 24 + 5}px`)
            .attr('y', `-${height}px`)
            .attr('height', `${height + 30}px`)
            .style('fill', 'transparent');
            
        svg.selectAll('.tick')
        .append('circle')
            .attr('r', '5px')
            .style('fill', '#ffffff')
            .style('stroke', '#FF6500')
            .attr('cy', (x, i) => - height + yScale(parsedData[0].values[i].close));


        svg.select('.domain')
        .attr('stroke', '#5E779B')
        .attr('stroke-dasharray', `4, 7`)

        var yscale = d3.scaleLog()
            .domain([1, 100000])
                        .nice()
            .range([height - 10, -10]);

        var y_axis = d3.axisLeft(yscale);

        y_axis.ticks(5);
  
        svg.append("g")
            .call(d3.axisLeft(xScale).ticks(5))
            .attr("transform", "translate(0, 10)")
            .attr('stroke', '#5E779B')
            .attr('stroke-dasharray', `4, 7`)
            .call(y_axis)
    })
    (d3);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<body>
    <div id="line-chart"></div>
</body>