Graph Details

Child Welfare: Child Welfare Survey for family needs

Series of stacked bar charts showing how needs of NYC families has changed since the start of the COVID-19 pandemic according to survey responses

How have families’ needs for the following services changed since the COVID-19 pandemic?

Embed Details

Add this style information to the head of your file. <link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/child-welfare-survey-family-needs.css" type="text/css"> Add this html where you need the graph to appear <div id="child-welfare-survey-family-needs" class="graph-wrapper mx-auto"> <p class="text-center mb-3">How have families’ needs for the following services changed since the COVID-19 pandemic?</p> <div class="legend-wrapper grid grid-flow-cols grid-cols-2 grid-rows-2 md:grid-cols-4"> <div><i></i><span class="text-sm"></span></div> <div><i></i><span class="text-sm"></span></div> <div><i></i><span class="text-sm"></span></div> <div><i></i><span class="text-sm"></span></div> </div> <div class="flex flex-col md:flex-row items-center justify-evenly hover:bg-blue-200 py-1 md:pl-1" id="internet-access"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="food-access"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="education-access"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="household-goods"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="mental-health-access"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="program-access"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="direct-cash-assistance"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="job-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="housing-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="family-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="domestic-violence-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="hygiene-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="parenting-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="immigrant-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="legal-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="medical-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="substance-abuse-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> <div class="flex flex-col md:flex-row items-center justify-evenly max-w-2/4 hover:bg-blue-200 py-1 md:pl-1" id="translation-support"> <span class="w-11/12 md:w-8/12"></span><svg class="w-11/12 block mx-auto md:w-8/12" /> </div> </div> Add this before the closing body tag <script src="//d1o40k53wiknb7.cloudfront.net/js/child-welfare-survey-family-needs.js"></script>