Top 10 Mobile Apps Visualization

📱 Top 10 Mobile Apps by Average Daily Usage (Minutes)< /h2>
C reated by Manisha Konudula — Data Visualization Assignment< /footer> < script> // Embedded dataset (no need to fetch CSV) c onst data = [ { { 'pp Name"': 'hatsApp"', 'sage (minutes/day)"' 120 , }, { 'pp Name"': 'nstagram"', 'sage (minutes/day)"' 110 , }, { { 'pp Name"': 'ouTube"', 'sage (minutes/day)"' 150 , }, { { 'pp Name"': 'acebook"', 'sage (minutes/day)"' 90 , }, { 'pp Name"': 'napchat"', 'sage (minutes/day)"' 80 , }, { { 'pp Name"': 'witter"', 'sage (minutes/day)"' 60 , }, { { 'pp Name"': 'potify"', 'sage (minutes/day)"' 70 , }, { { 'pp Name"': 'etflix"', 'sage (minutes/day)"' 100 , }, { { 'pp Name"': 'elegram"', 'sage (minutes/day)"' 55 , }, { { 'pp Name"': 'inkedIn"', 'sage (minutes/day)"' 40 , } , ] ; const svg = d3.select("'chart"'; const width = +svg.attr("'idth"'; const height = +svg.attr("'eight"'; c onst margin = { top: 50, right: 30, bottom: 100, left: 80 , }; const innerW = width - margin.left - margin.right; c onst innerH = height - margin.top - margin.bottom; c onst g = svg. .append('g') .attr( 'transform', `translate(${margin.left},${margin.top})`), ; const x = d3. scaleBand() .domain(data.map(d(d)=> d["'pp Name"')) .range([0, innerW]) . padding(0.2); c onst y = d3. scaleLinear() . domain([0 0, d3.max(data, d(d)=> d["'sage (minutes/day)"']), ]) nice() .range([innerH, 0]); g .append("'g') .attr("'ransform"' `translate(0,${innerH})`) . call(d3.axisBottom(x)) . selectAll("'ext"' .attr("'ransform"', 'otate(-35)"' .style("'ext-anchor"', 'end'; g.append("'g'.call(d3.axisLeft(y)); / / Bars g.selectAll("'bar"' .data(data) .enter() . append("'ect"' .attr("'lass"', 'bar' .attr("'x', (d)=> x(d["'pp Name"')) .attr("'y', (d)=> y(d["'sage (minutes/day)"')) .attr("'idth"' x.bandwidth()) .attr(" 'height', (d)=> innerH - y(d["'sage (minutes/day)"')), .attr("'ill"', '4682b4"'; / / Labels on bars g .selectAll("'label"' .data(data) . enter() . append("'ext"' .attr(" 'x', (d)=> x(d["'pp Name"') + x.bandwidth()/ / 2, .attr("'y', (d)=> y(d["'sage (minutes/day)"') - 5) .attr("'ext-anchor"', 'iddle"' .attr("'ont-size"', '2px"' .attr("'ill"', '222"' .text(d(d)=> d["'sage (minutes/day)"'); / / X-axis label g.append("'ext"' .attr("'x' innerW / 2) . attr("'y' innerH + 70) . attr("'ext-anchor"', 'iddle"' .text("'pp Name"'; / / Y-axis label g .append("'ext"' . attr("'ransform"', 'otate(-90)"' .attr("'x' -innerH / 2) .attr("'y' -50) . attr("'ext-anchor"', 'iddle"' .text("'sage (minutes/day)"'; < /body>