Unable to display data from database on a card using laravel

Even though there are many solutions provided for this error, I am encoutering, I have not find the solution yet, below is the error I am getting when trying to display data from the database on the bootstrap card ") ErrorException Undefined variable: published_articles (View: /home/nosi/Oresol-Lesotho-Skills-Exercise/blog/resources/views/article_data.blade.php) (View: /home/nosi/Oresol-Lesotho-Skills-Exercise/blog/resources/views/article_data.blade.php"

below is my route inside the web.php:

  Route::get('article_data', 'PublishArticlesController@retrieveArticles')->name('article_data');

below is my controller:

public function retrieveArticles(){

$articles = PublishArticle::latest()->paginate(6);
return view('article_data')->with(['published_articles'=>$articles]);

}

below is my blade file which is inside views, articles_data.blade.php:

    @extends('layouts.public_navbar')

@section('content')
<div class="container text-center">
    <h1>Explore Published Articles</h1>
</div>
<div class="container">
    <div class="card-deck row">
    @foreach ($published_articles as $article)
            <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="card">
                    <div class="view overlay">
                        <a href="#!">
                            <div class="mask rgba-white-slight"></div>
                        </a>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title"></h4>
                        <p>Author: </p>
                        <p class="card-text"></p>
                        <a href="" class="btn btn-primary btn-md">Read more</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Add Bootstrap JS and Popper.js scripts (required for Bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endsection

your help will be highly apreciated

via Chebli Mohamed