ryan-dirajlal/data.csv

## data.csv

          
            Country
            Value

            
              Democrats
              62

            
              Republicans
              54

            
              Independents
              54

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<script>

    // set the dimensions and margins of the graph
    const margin = {top: 30, right: 30, bottom: 70, left: 60},
        width = 460 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    const svg = d3.select("#my_dataviz")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    // Parse the Data
    d3.csv("data.csv").then( function(data) {

// X axis
        const x = d3.scaleBand()
            .range([ 0, width ])
            .domain(data.map(d => d.Country))
            .padding(0.2);
        svg.append("g")
            .attr("transform", `translate(0, ${height})`)
            .call(d3.axisBottom(x))
            .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

// Add Y axis
        const y = d3.scaleLinear()
            .domain([0, 62])
            .range([ height, 0]);
        svg.append("g")
            .call(d3.axisLeft(y));

// Bars
        svg.selectAll("mybar")
            .data(data)
            .join("rect")
            .attr("x", d => x(d.Country))
            .attr("y", d => y(d.Value))
            .attr("width", x.bandwidth())
            .attr("height", d => height - y(d.Value))
            .attr("fill", "#69b3a2")

    })
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<!-- Load d3.js -->
	<script src="https://d3js.org/d3.v6.js"></script>

	<!-- Create a div where the graph will take place -->
	<div id="my_dataviz"></div>

	<script>

	// set the dimensions and margins of the graph
	const margin = {top: 30, right: 30, bottom: 70, left: 60},
	width = 460 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	// append the svg object to the body of the page
	const svg = d3.select("#my_dataviz")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`);

	// Parse the Data
	d3.csv("data.csv").then( function(data) {

	// X axis
	const x = d3.scaleBand()
	.range([ 0, width ])
	.domain(data.map(d => d.Country))
	.padding(0.2);
	svg.append("g")
	.attr("transform", `translate(0, ${height})`)
	.call(d3.axisBottom(x))
	.selectAll("text")
	.attr("transform", "translate(-10,0)rotate(-45)")
	.style("text-anchor", "end");

	// Add Y axis
	const y = d3.scaleLinear()
	.domain([0, 62])
	.range([ height, 0]);
	svg.append("g")
	.call(d3.axisLeft(y));

	// Bars
	svg.selectAll("mybar")
	.data(data)
	.join("rect")
	.attr("x", d => x(d.Country))
	.attr("y", d => y(d.Value))
	.attr("width", x.bandwidth())
	.attr("height", d => height - y(d.Value))
	.attr("fill", "#69b3a2")

	})
	</script>