karen-izuka/data.csv

## data.csv

          
            name
            value
            link

            
              facebook
              2.23
              https://image.flaticon.com/icons/svg/174/174848.svg

            
              youtube
              1.9
              https://image.flaticon.com/icons/svg/174/174883.svg

            
              whatsapp
              1.5
              https://image.flaticon.com/icons/svg/174/174879.svg

            
              instagram
              1
              https://image.flaticon.com/icons/svg/174/174855.svg

            
              twitter
              0.335
              https://image.flaticon.com/icons/svg/174/174876.svg

            
              reddit
              0.330
              https://image.flaticon.com/icons/svg/174/174866.svg

            
              pinterest
              0.250
              https://image.flaticon.com/icons/svg/174/174863.svg

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Embedding Images</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Social Media Platform Popularity</h1>
  <div id="chart"></div>
  <div id="note01"><a href="https://buffer.com/library/social-media-sites">Link to Source</a></div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

## index.js
//static variables
const margin = {top: 50, right: 25, bottom: 50, left: 25};
const width = 1000 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const svg = d3.select('#chart')
  .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})`);
const x = d3.scaleBand()
  .range([0, width])
  .padding(0.3);
const y = d3.scaleLinear()
  .range([height, 0]);
const format = d3.format('.1f');
const color = d3.scaleOrdinal()
  .range(['#3b5999', '#cd201f', '#25D366', '#e4405f', '#55acee', '#ff4500', '#bd081c']);

//load data
const load = async () => {
  const data = await d3.csv('data.csv', ({name, value, link}) => ({name: name, value: +value, link: link}));
  chart(data);
}

const chart = data => {
  x.domain(data.map(d => d.name));
  y.domain([0, d3.max(data, d => d.value)]);
  color.domain(data.map(d => d.name));
  const bar = svg.selectAll('rect')
    .data(data)
    .join('rect')
    .attr('x', d => x(d.name))
    .attr('y', d => y(d.value))
    .attr('width', x.bandwidth())
    .attr('height', d => y(0) - y(d.value))
    .attr('fill', d => color(d.name));
  const label = svg.selectAll('.label')
    .data(data)
    .join('text')
    .text(d => `${format(d.value)}b users`)
    .attr('class', 'label')
    .attr('x', d => x(d.name) + x.bandwidth()/2)
    .attr('y', d => y(d.value) - 15)
    .attr('text-anchor', 'middle');
  const image = svg.selectAll('.image')
    .data(data)
    .join('svg:image')
    .attr('xlink:href', d => d.link)
    .attr('x', d => x(d.name) + x.bandwidth()/2 - 15)
    .attr('y', height + margin.bottom/4)
    .attr('width', 30)
    .attr('height', 30);
}


load();

## style.css
h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  text-align: center;
}

svg {
  display: block;
  margin: auto;
}

.label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

#note01 {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  padding: 20px;
  text-align: center;
}
name	value	link
facebook	2.23	https://image.flaticon.com/icons/svg/174/174848.svg
youtube	1.9	https://image.flaticon.com/icons/svg/174/174883.svg
whatsapp	1.5	https://image.flaticon.com/icons/svg/174/174879.svg
instagram	1	https://image.flaticon.com/icons/svg/174/174855.svg
twitter	0.335	https://image.flaticon.com/icons/svg/174/174876.svg
reddit	0.330	https://image.flaticon.com/icons/svg/174/174866.svg
pinterest	0.250	https://image.flaticon.com/icons/svg/174/174863.svg
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Embedding Images</title>
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
	</head>
	<body>
	<h1>Social Media Platform Popularity</h1>
	<div id="chart"></div>
	<div id="note01"><a href="https://buffer.com/library/social-media-sites">Link to Source</a></div>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	//static variables
	const margin = {top: 50, right: 25, bottom: 50, left: 25};
	const width = 1000 - margin.left - margin.right;
	const height = 500 - margin.top - margin.bottom;
	const svg = d3.select('#chart')
	.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})`);
	const x = d3.scaleBand()
	.range([0, width])
	.padding(0.3);
	const y = d3.scaleLinear()
	.range([height, 0]);
	const format = d3.format('.1f');
	const color = d3.scaleOrdinal()
	.range(['#3b5999', '#cd201f', '#25D366', '#e4405f', '#55acee', '#ff4500', '#bd081c']);

	//load data
	const load = async () => {
	const data = await d3.csv('data.csv', ({name, value, link}) => ({name: name, value: +value, link: link}));
	chart(data);
	}

	const chart = data => {
	x.domain(data.map(d => d.name));
	y.domain([0, d3.max(data, d => d.value)]);
	color.domain(data.map(d => d.name));
	const bar = svg.selectAll('rect')
	.data(data)
	.join('rect')
	.attr('x', d => x(d.name))
	.attr('y', d => y(d.value))
	.attr('width', x.bandwidth())
	.attr('height', d => y(0) - y(d.value))
	.attr('fill', d => color(d.name));
	const label = svg.selectAll('.label')
	.data(data)
	.join('text')
	.text(d => `${format(d.value)}b users`)
	.attr('class', 'label')
	.attr('x', d => x(d.name) + x.bandwidth()/2)
	.attr('y', d => y(d.value) - 15)
	.attr('text-anchor', 'middle');
	const image = svg.selectAll('.image')
	.data(data)
	.join('svg:image')
	.attr('xlink:href', d => d.link)
	.attr('x', d => x(d.name) + x.bandwidth()/2 - 15)
	.attr('y', height + margin.bottom/4)
	.attr('width', 30)
	.attr('height', 30);
	}


	load();
	h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-align: center;
	}

	svg {
	display: block;
	margin: auto;
	}

	.label {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	}

	#note01 {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	padding: 20px;
	text-align: center;
	}