karen-izuka/data.csv

## data.csv

          
            State
            White
            Black
            Asian
            Other

            
              Alabama
              68.8
              26.4
              1.8
              3.0

            
              Alaska
              66.0
              3.4
              20.9
              9.7

            
              Arizona
              78.4
              4.2
              7.6
              9.7

            
              Arkansas
              78.0
              15.5
              2.2
              4.2

            
              California
              61.8
              5.9
              14.8
              17.4

            
              Colorado
              84.2
              4.0
              3.9
              7.8

            
              Connecticut
              77.3
              10.3
              4.4
              7.9

            
              Delaware
              69.4
              21.6
              3.9
              5.0

            
              District of Columbia
              40.2
              48.9
              4.0
              6.9

            
              Florida
              76.0
              16.1
              3.0
              4.9

            
              Georgia
              60.2
              30.9
              3.9
              4.9

            
              Hawaii
              25.4
              2.0
              47.8
              24.8

            
              Idaho
              91.7
              0.6
              2.7
              5.0

            
              Illinois
              72.3
              14.3
              5.2
              8.0

            
              Indiana
              84.2
              9.2
              2.1
              4.5

            
              Iowa
              91.2
              3.2
              2.4
              3.3

            
              Kansas
              85.2
              5.8
              3.5
              5.5

            
              Kentucky
              87.6
              7.9
              1.5
              3.0

            
              Louisiana
              62.8
              32.1
              2.3
              2.8

            
              Maine
              95.0
              1.1
              1.7
              2.2

            
              Maryland
              57.6
              29.5
              6.3
              6.6

            
              Massachusetts
              79.6
              7.1
              6.2
              7.1

            
              Michigan
              79.0
              14.0
              3.2
              3.7

            
              Minnesota
              84.8
              5.5
              5.4
              4.2

            
              Mississippi
              59.2
              37.4
              1.4
              2.1

            
              Missouri
              82.6
              11.5
              2.3
              3.5

            
              Montana
              89.2
              0.5
              7.3
              3.0

            
              Nebraska
              88.1
              4.7
              3.0
              4.1

            
              Nevada
              69.0
              8.4
              9.4
              13.2

            
              New Hampshire
              93.7
              1.3
              2.6
              2.3

            
              New Jersey
              68.3
              13.5
              9.2
              8.9

            
              New Mexico
              73.2
              2.1
              10.6
              14.2

            
              New York
              64.6
              15.6
              8.4
              11.5

            
              North Carolina
              69.5
              21.5
              3.8
              5.4

            
              North Dakota
              88.7
              1.6
              6.5
              3.0

            
              Ohio
              82.4
              12.2
              2.1
              3.3

            
              Oklahoma
              73.1
              7.2
              9.3
              10.4

            
              Oregon
              85.1
              1.8
              5.6
              7.5

            
              Pennsylvania
              81.6
              11.0
              3.3
              4.1

            
              Rhode Island
              81.1
              6.5
              3.7
              8.6

            
              South Carolina
              67.2
              27.5
              1.8
              3.5

            
              South Dakota
              85.0
              1.6
              9.8
              3.5

            
              Tennessee
              77.8
              16.8
              2.0
              3.5

            
              Texas
              74.9
              11.9
              4.8
              8.5

            
              Utah
              87.6
              1.1
              4.2
              7.1

            
              Vermont
              94.9
              1.1
              1.7
              2.2

            
              Virginia
              69.0
              19.2
              6.4
              5.4

            
              Washington
              77.8
              3.6
              9.6
              9.0

            
              West Virginia
              93.6
              3.3
              0.9
              2.2

            
              Wisconsin
              86.5
              6.3
              3.4
              3.8

            
              Wyoming
              91.0
              1.1
              3.2
              4.8

            
              Puerto Rico
              69.7
              8.4
              0.6
              21.3

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Race by State</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Racial Composition by State</h1>
  <div id="container">
    <div class="info">Source: Wikipedia</div>
    <div class="info">Hover to See %</div>
  </div>
  <div id="legend"></div>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

## index.js
//static variables
const radius = 100;
const padding = 10;
const color = d3.scaleOrdinal()
  .range(d3.schemePastel2);
const arc = d3.arc()
  .outerRadius(radius)
  .innerRadius(radius / 1.5)
  .cornerRadius(20);
const pie = d3.pie()
  .sort(null)
  .value(d => d.population);
const div = d3.select('#chart')
  .append('div')
  .attr('class', 'tooltip')
  .style('border', 0)
  .attr('opacity', 0);
const format = d3.format('.0%');
let raceList;

//data load
const load = async () => {
  const data = await d3.csv('data.csv')
  raceList = d3.keys(data[0]).filter(key => key != 'State')
  color.domain(raceList);
  data.forEach(d => {
    d.races = raceList.map(function(name) {
      return {name: name, population: +d[name]}
    });
  });
  chart(data);
}

//render chart
const chart = data => {
  //legend
  const legend = d3.select('#legend')
    .append('svg')
    .attr('class', 'legend')
    .attr('width', 750)
    .attr('height', 50)
    .selectAll('g')
    .data(raceList.slice())
    .enter()
    .append('g')
    .attr('transform', (d, i) => `translate(${i*215}, 0)`);
  legend.append('rect')
    .attr('width', 15)
    .attr('height', 15)
    .attr('fill', color);
  legend.append('text')
    .attr('class', 'label')
    .attr('x', 25)
    .attr('y', 10)
    .attr('dy', '.35em')
    .text(d => d);
  //donut charts
  const svg = d3.select('#chart')
    .selectAll('.pie')
    .data(data)
    .enter()
    .append('svg')
    .attr('width', radius * 2)
    .attr('height', radius * 2)
    .append('g')
    .attr('transform', `translate(${radius}, ${radius})`);
  svg.selectAll('.arc')
    .data(d => pie(d.races))
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', d => color(d.data.name))
    .attr('stroke', '#ffffff')
    .attr('stroke-width', '2px')
    .on('mouseenter', function(d, i) {
      d3.select(this).transition()
        .duration(100)
        .attr('opacity', 0.7)
      div.transition()
        .duration(100)
        .style('opacity', 1)
        .style('border', '1px solid #bdbdbd')
      div.html(`${format(d.value/100)} ${d.data.name}`)
        .style('left', `${d3.event.pageX+10}px`)
        .style('top', `${d3.event.pageY-10}px`);
    })
    .on('mouseout', function(d, i) {
      d3.select(this).transition()
        .duration(100)
        .attr('opacity', 1)
      div.transition()
        .duration(100)
        .style('opacity', 0)
    });
  //labels
  const title = svg.append('text')
    .attr('class', 'label')
    .attr('dy', '.35em')
    .attr('text-anchor', 'middle')
    .text(d => d.State);
}

load();

## style.css
div.tooltip {
  background: #ffffff;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 7px;
  pointer-events: none;
  position: absolute;
  text-align: center;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  padding: 5px;
  text-align: center;
}

svg {
  padding: 10px 0 0 10px;
}

.info {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 5px;
  text-align: center;
}

.label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.legend {
  display: block;
  margin: auto;
}

#chart {
  width: 1500px;
  margin: auto;
}

#container {
  text-align: center;
}

#legend {
  width: 1500px;
  margin: auto;
}
State	White	Black	Asian	Other
Alabama	68.8	26.4	1.8	3.0
Alaska	66.0	3.4	20.9	9.7
Arizona	78.4	4.2	7.6	9.7
Arkansas	78.0	15.5	2.2	4.2
California	61.8	5.9	14.8	17.4
Colorado	84.2	4.0	3.9	7.8
Connecticut	77.3	10.3	4.4	7.9
Delaware	69.4	21.6	3.9	5.0
District of Columbia	40.2	48.9	4.0	6.9
Florida	76.0	16.1	3.0	4.9
Georgia	60.2	30.9	3.9	4.9
Hawaii	25.4	2.0	47.8	24.8
Idaho	91.7	0.6	2.7	5.0
Illinois	72.3	14.3	5.2	8.0
Indiana	84.2	9.2	2.1	4.5
Iowa	91.2	3.2	2.4	3.3
Kansas	85.2	5.8	3.5	5.5
Kentucky	87.6	7.9	1.5	3.0
Louisiana	62.8	32.1	2.3	2.8
Maine	95.0	1.1	1.7	2.2
Maryland	57.6	29.5	6.3	6.6
Massachusetts	79.6	7.1	6.2	7.1
Michigan	79.0	14.0	3.2	3.7
Minnesota	84.8	5.5	5.4	4.2
Mississippi	59.2	37.4	1.4	2.1
Missouri	82.6	11.5	2.3	3.5
Montana	89.2	0.5	7.3	3.0
Nebraska	88.1	4.7	3.0	4.1
Nevada	69.0	8.4	9.4	13.2
New Hampshire	93.7	1.3	2.6	2.3
New Jersey	68.3	13.5	9.2	8.9
New Mexico	73.2	2.1	10.6	14.2
New York	64.6	15.6	8.4	11.5
North Carolina	69.5	21.5	3.8	5.4
North Dakota	88.7	1.6	6.5	3.0
Ohio	82.4	12.2	2.1	3.3
Oklahoma	73.1	7.2	9.3	10.4
Oregon	85.1	1.8	5.6	7.5
Pennsylvania	81.6	11.0	3.3	4.1
Rhode Island	81.1	6.5	3.7	8.6
South Carolina	67.2	27.5	1.8	3.5
South Dakota	85.0	1.6	9.8	3.5
Tennessee	77.8	16.8	2.0	3.5
Texas	74.9	11.9	4.8	8.5
Utah	87.6	1.1	4.2	7.1
Vermont	94.9	1.1	1.7	2.2
Virginia	69.0	19.2	6.4	5.4
Washington	77.8	3.6	9.6	9.0
West Virginia	93.6	3.3	0.9	2.2
Wisconsin	86.5	6.3	3.4	3.8
Wyoming	91.0	1.1	3.2	4.8
Puerto Rico	69.7	8.4	0.6	21.3
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Race by State</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>Racial Composition by State</h1>
	<div id="container">
	<div class="info">Source: Wikipedia</div>
	<div class="info">Hover to See %</div>
	</div>
	<div id="legend"></div>
	<div id="chart"></div>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	//static variables
	const radius = 100;
	const padding = 10;
	const color = d3.scaleOrdinal()
	.range(d3.schemePastel2);
	const arc = d3.arc()
	.outerRadius(radius)
	.innerRadius(radius / 1.5)
	.cornerRadius(20);
	const pie = d3.pie()
	.sort(null)
	.value(d => d.population);
	const div = d3.select('#chart')
	.append('div')
	.attr('class', 'tooltip')
	.style('border', 0)
	.attr('opacity', 0);
	const format = d3.format('.0%');
	let raceList;

	//data load
	const load = async () => {
	const data = await d3.csv('data.csv')
	raceList = d3.keys(data[0]).filter(key => key != 'State')
	color.domain(raceList);
	data.forEach(d => {
	d.races = raceList.map(function(name) {
	return {name: name, population: +d[name]}
	});
	});
	chart(data);
	}

	//render chart
	const chart = data => {
	//legend
	const legend = d3.select('#legend')
	.append('svg')
	.attr('class', 'legend')
	.attr('width', 750)
	.attr('height', 50)
	.selectAll('g')
	.data(raceList.slice())
	.enter()
	.append('g')
	.attr('transform', (d, i) => `translate(${i*215}, 0)`);
	legend.append('rect')
	.attr('width', 15)
	.attr('height', 15)
	.attr('fill', color);
	legend.append('text')
	.attr('class', 'label')
	.attr('x', 25)
	.attr('y', 10)
	.attr('dy', '.35em')
	.text(d => d);
	//donut charts
	const svg = d3.select('#chart')
	.selectAll('.pie')
	.data(data)
	.enter()
	.append('svg')
	.attr('width', radius * 2)
	.attr('height', radius * 2)
	.append('g')
	.attr('transform', `translate(${radius}, ${radius})`);
	svg.selectAll('.arc')
	.data(d => pie(d.races))
	.enter()
	.append('path')
	.attr('d', arc)
	.attr('fill', d => color(d.data.name))
	.attr('stroke', '#ffffff')
	.attr('stroke-width', '2px')
	.on('mouseenter', function(d, i) {
	d3.select(this).transition()
	.duration(100)
	.attr('opacity', 0.7)
	div.transition()
	.duration(100)
	.style('opacity', 1)
	.style('border', '1px solid #bdbdbd')
	div.html(`${format(d.value/100)} ${d.data.name}`)
	.style('left', `${d3.event.pageX+10}px`)
	.style('top', `${d3.event.pageY-10}px`);
	})
	.on('mouseout', function(d, i) {
	d3.select(this).transition()
	.duration(100)
	.attr('opacity', 1)
	div.transition()
	.duration(100)
	.style('opacity', 0)
	});
	//labels
	const title = svg.append('text')
	.attr('class', 'label')
	.attr('dy', '.35em')
	.attr('text-anchor', 'middle')
	.text(d => d.State);
	}

	load();
	div.tooltip {
	background: #ffffff;
	border-radius: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 7px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	}

	h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	padding: 5px;
	text-align: center;
	}

	svg {
	padding: 10px 0 0 10px;
	}

	.info {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px;
	text-align: center;
	}

	.label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}

	.legend {
	display: block;
	margin: auto;
	}

	#chart {
	width: 1500px;
	margin: auto;
	}

	#container {
	text-align: center;
	}

	#legend {
	width: 1500px;
	margin: auto;
	}