// Using your public CSV link const DATA_URL = "https://gist.githubusercontent.com/Lohith0529/191bb15c157473980f680c2650cd3b70/raw/6fca032cfa4f9da5d40ed38e141b5adf0cddb0d2/songs_dataset_lohith.csv"; d3.csv(DATA_URL).then(data => { if (!data.length) { d3.select("#summary").text("No data found — check your CSV URL."); return; } // --- Summary section --- const numRows = data.length; const columns = Object.keys(data[0]); const numericCol = columns.find(c => !isNaN(+data[0][c])); const avgValue = numericCol ? d3.mean(data, d => +d[numericCol]) : null; d3.select("#summary").html(`

Dataset Summary

Rows: ${numRows}

Columns: ${columns.join(", ")}

${avgValue ? `

Mean of ${numericCol}: ${avgValue.toFixed(2)}

` : ""} `); // --- Preview Table (first 5 rows) --- const preview = data.slice(0, 5); const table = d3.select("#table-container") .append("table") .attr("class", "preview-table"); const thead = table.append("thead").append("tr"); thead.selectAll("th").data(columns).join("th").text(d => d); const tbody = table.append("tbody"); const rows = tbody.selectAll("tr").data(preview).join("tr"); rows.selectAll("td").data(row => columns.map(c => row[c])).join("td").text(d => d); // --- Gradient SVG Visual --- const svg = d3.select("#svgzone").append("svg") .attr("width", 480) .attr("height", 150); const defs = svg.append("defs"); const grad = defs.append("linearGradient") .attr("id", "grad") .attr("x1", "0%") .attr("x2", "100%"); grad.append("stop").attr("offset", "0%").attr("stop-color", "#ffb74d"); grad.append("stop").attr("offset", "100%").attr("stop-color", "#8e44ad"); svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 480) .attr("height", 150) .attr("rx", 12) .attr("fill", "url(#grad)"); svg.append("text") .attr("x", 240) .attr("y", 80) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-size", "22px") .text("Songs Dataset Visualization"); // --- BAR CHART: Average Popularity by Genre --- const genreAvg = Array.from( d3.group(data, d => d.genre), ([genre, values]) => ({ genre, avgPopularity: d3.mean(values, v => +v.popularity) }) ); const width = 500; const height = 300; const margin = { top: 30, right: 20, bottom: 60, left: 60 }; const chart = d3.select("#chart-area") .append("svg") .attr("width", width) .attr("height", height); const x = d3.scaleBand() .domain(genreAvg.map(d => d.genre)) .range([margin.left, width - margin.right]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(genreAvg, d => d.avgPopularity)]) .nice() .range([height - margin.bottom, margin.top]); chart.selectAll(".bar") .data(genreAvg) .join("rect") .attr("class", "bar") .attr("x", d => x(d.genre)) .attr("y", d => y(d.avgPopularity)) .attr("height", d => y(0) - y(d.avgPopularity)) .attr("width", x.bandwidth()); chart.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .attr("class", "axis") .call(d3.axisBottom(x)); chart.append("g") .attr("transform", `translate(${margin.left},0)`) .attr("class", "axis") .call(d3.axisLeft(y)); chart.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .attr("fill", "#333") .text("Genre"); chart.append("text") .attr("x", -height / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .attr("fill", "#333") .text("Average Popularity"); });

ICE5_LOHITH

kallappareddygari Lohith reddy