martgnz/.block

## .block
height: 600
license: mit
border: none

## README.md

      
    Raw
  

              README.md
            
          
    Here is my bar chart homework for the UCB dataviz course taught by Shan Carter and Kevin Quealy.
Hint: it tries to be this NYT chart.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
text {
  font-family: sans-serif;
  font-size: 11px;
}
.y-axis path {
  display: none;
}
.bottomaxis text {
  display: none;
}
</style>
<body>

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script type="text/javascript">
var margin = { top: 20, right: 40, bottom: 20, left: 10 };

var width = 960 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;

var y = d3
  .scaleLinear()
  .domain([0, 5.6])
  .range([height, 0]);

var x = d3
  .scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.2);

var svg = d3
  .select("body")
  .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 + ")");

var yAxis = d3
  .axisRight(y)
  .tickValues([1, 2, 3, 4, 5])
  .tickFormat(function(d) {
    return "$" + d;
  });

var bottomyAxis = d3
  .axisRight(y)
  .tickValues([0])
  .tickSize(width);

var xAxis = d3.axisBottom(x).ticks([0]);

var labels = [
  "C-SPAN",
  "The Weather Channel",
  "Comedy Central",
  "MSNBC",
  "Bravo",
  "TBS",
  "ESPN2",
  "TNT",
  "ESPN"
];

d3.csv("subscription-prices.csv", type, function(err, prices) {
  prices.sort(function(a, b) {
    return a.X2013 - b.X2013;
  });

  x.domain(
    prices.map(function(d) {
      return d.Network;
    })
  );

  var bar = svg
    .selectAll("g")
    .data(prices)
    .enter()
    .append("g")
    .attr("class", "bar");

  bar
    .append("rect")
    .attr("width", x.bandwidth())
    .attr("height", function(d) {
      return height - y(d.X2013);
    })
    .attr("y", function(d) {
      return y(d.X2013);
    })
    .attr("x", function(d) {
      return x(d.Network);
    })
    .attr("class", "bar")
    .attr("fill", function(d) {
      return d.Network === "ESPN"
        ? "orange"
        : labels.includes(d.Network) ? "#999" : "#ddd";
    });

  bar
    .filter(function(d) {
      return labels.includes(d.Network);
    })
    .append("text")
    .text(function(d) {
      return d.Network;
    })
    .attr("dx", function(d) {
      return d.Network === "ESPN" ? 8 : 0;
    })
    .attr("dy", function(d) {
      return d.Network === "ESPN" ? 8 : -4;
    })
    .attr("text-anchor", function(d) {
      return d.Network === "ESPN" ? "start" : "end";
    })
    .attr("fill", "black")
    .attr("y", function(d) {
      return y(d.X2013);
    })
    .attr("x", function(d) {
      return x(d.Network);
    })
    .style("font-weight", function(d) {
      return d.Network === "ESPN" ? "700" : "400";
    });

  svg
    .append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + width / 1.075 + ",0)")
    .call(yAxis);

  svg
    .append("g")
    .attr("class", "y-axis bottomaxis")
    .call(bottomyAxis);
});

function type(d) {
  d.X2013 = +d.X2013;

  return d;
}
</script>

## subscription-prices.csv

          
            Network
            X2013

            
              3net
              1.33

            
              A&E
              0.29

            
              ABC Family Channel
              0.27

            
              AMC
              0.33

            
              Animal Planet
              0.1

            
              Antena 3
              0.32

            
              ASPiRE
              0.04

            
              AXS TV
              0.15

            
              Bandamax
              0.13

            
              BBC America
              0.13

            
              BBC World News
              0.02

            
              beIN SPORT
              0.15

            
              beIN SPORT en EspaÇñol
              0.21

            
              BET
              0.2

            
              BET Gospel
              0.05

            
              BET Hip-Hop
              0.07

            
              Bio
              0.11

            
              Blackbelt TV
              0.06

            
              Bloomberg Television
              0.07

            
              BlueHighways TV
              0.03

            
              Boomerang
              0.09

            
              Bravo
              0.24

            
              Bridges TV
              0.11

            
              BTN
              0.37

            
              C-SPAN
              0.06

            
              Canal Sur
              0.08

            
              Caracol TV
              0.16

            
              Cartoon Network
              0.21

            
              CBS Sports Network
              0.24

            
              CENTRIC
              0.08

            
              CentroAmerica TV
              0.17

            
              Chiller
              0.08

            
              Cloo
              0.08

            
              CMT
              0.1

            
              CMT Pure Country
              0.05

            
              CNBC
              0.31

            
              CNBC World
              0.01

            
              CNN
              0.6

            
              CNN en EspaÇñol
              0.6

            
              CNN International
              0.14

            
              Comedy Central
              0.18

            
              Cooking Channel
              0.07

            
              Crime & Investigation Network
              0.06

            
              Current
              0.11

            
              De PelÇðcula
              0.19

            
              De PelÇðcula ClÇsico
              0.11

            
              Destination America
              0.07

            
              Discovery Channel
              0.38

            
              Discovery en EspaÇñol
              0.2

            
              Discovery Familia
              0.18

            
              Discovery Fit & Health
              0.07

            
              Disney Channel
              1.15

            
              Disney Junior
              0.17

            
              Disney XD
              0.17

            
              DIY Network
              0.09

            
              Documentary Channel
              0.03

            
              E! Entertainment Television
              0.24

            
              Ecuavisa
              0.2

            
              ESPN
              5.54

            
              ESPN 3D
              2.79

            
              ESPN Classic
              0.2

            
              ESPN Deportes
              0.19

            
              ESPN2
              0.7

            
              ESPNews
              0.21

            
              ESPNU
              0.2

            
              FamilyNet
              0

            
              FEARnet
              0.04

            
              Food Network
              0.19

            
              FOX Business Network
              0.13

            
              FOX College Sports
              0.41

            
              FOX Deportes
              0.22

            
              Fox Movie Channel/FX Movies
              0.18

            
              FOX News
              0.94

            
              FOX Soccer
              0.18

            
              FUEL TV
              0.18

            
              FUSE
              0.06

            
              FX Network
              0.51

            
              G4
              0.1

            
              GAC
              0.02

            
              Galavision
              0.03

            
              Golf Channel
              0.31

            
              GolTV
              0.14

            
              GSN
              0.12

            
              H2
              0.06

            
              Hallmark Channel
              0.06

            
              Hallmark Movie Channel
              0.02

            
              HDNet Movies
              0.37

            
              HGTV
              0.16

            
              History
              0.26

            
              History en EspaÇñol
              0.19

            
              HLN
              0

            
              HTV
              0.16

            
              Independent Film Channel
              0.23

            
              INSP
              0

            
              Investigation Discovery
              0.09

            
              Justice Central. TV
              0

            
              La Familia Cosmovision
              0.14

            
              LatinoamÇ¸rica TelevisiÇün
              0.17

            
              Lifetime Movie Network
              0.1

            
              Lifetime Real Women
              0.04

            
              Lifetime Television
              0.32

            
              LOGO
              0.06

            
              MAVTV
              0.09

            
              MEXICANAL
              0.1

            
              Mexico TV
              0.21

            
              MGM HD
              0.47

            
              Military Channel
              0.07

            
              Military History Channel
              0.06

            
              MLB Network
              0.23

            
              Mnet
              0

            
              MSNBC
              0.21

            
              MTV
              0.43

            
              MTV Hits
              0.02

            
              MTV Jams
              0.03

            
              mtv-U
              0.07

            
              MTV2
              0.07

            
              mun2
              0.06

            
              Nat Geo Mundo
              0.2

            
              Nat Geo WILD
              0.12

            
              National Geographic Channel
              0.24

            
              NBA TV
              0.27

            
              NBC Sports Network
              0.33

            
              NFL Network
              1.34

            
              NHL Network
              0.29

            
              Nick 2
              0.02

            
              Nick Jr./NickMom
              0.21

            
              Nickelodeon/Nick At Nite
              0.6

            
              Nicktoons Network
              0.08

            
              NuvoTV
              0.07

            
              Outdoor Channel
              0.05

            
              Outside Television
              0.03

            
              Ovation
              0.07

            
              OWN: Oprah Winfrey Network
              0.2

            
              Oxygen Network
              0.1

            
              Palladia
              0.09

            
              PBS KIDS Sprout
              0.09

            
              ReelzChannel
              0

            
              Resort & Residence
              0

            
              RFD-TV
              0.04

            
              Ritmoson Latino
              0.2

            
              RLTV
              0.07

            
              Science
              0.07

            
              ShortsHD
              0.11

            
              Smithsonian Channel
              0.11

            
              SOAPnet
              0.17

            
              Sony Movie Channel
              0.33

            
              SPEED
              0.31

            
              Spike TV
              0.25

            
              Sportsman Channel
              0.04

            
              Sundance Channel
              0.18

            
              Sur Peru
              0.18

            
              Syfy
              0.28

            
              TBS
              0.59

            
              TCM
              0.3

            
              TeenNick
              0.11

            
              Telefe International
              0.2

            
              Telehit
              0.19

            
              Tempo
              0.05

            
              Tennis Channel
              0.18

            
              The Africa Channel
              0.07

            
              The Hub
              0.13

            
              The Style Network
              0.15

            
              The Weather Channel
              0.13

            
              TLC
              0.2

            
              TNT
              1.24

            
              Tr3s
              0.03

            
              Travel Channel
              0.14

            
              truTV
              0.12

            
              TV Chile
              0.2

            
              TV Colombia
              0.15

            
              TV Land
              0.14

            
              TV One
              0.1

            
              TV Venezuela
              0.19

            
              TVGN
              0.02

            
              TyC Sports International Channel
              0.27

            
              Universal HD
              0.16

            
              Universal Sports
              0.21

            
              Univision Deportes
              0.3

            
              Univision Deportes Dos
              0.16

            
              Univision Noticias
              0.18

            
              Univision tlnovelas
              0.18

            
              UP
              0

            
              USA
              0.71

            
              UtilÇðsima
              0.22

            
              Velocity
              0.13

            
              VH1
              0.2

            
              VH1 Classic
              0.08

            
              VH1 Soul
              0.05

            
              WAPA-America
              0.23

            
              WE tv
              0.13

            
              WealthTV
              0.15

            
              WGN America
              0.2

            
              World Fishing Network
              0.13

            
              Youtoo TV
              0.04

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style type="text/css">
	text {
	font-family: sans-serif;
	font-size: 11px;
	}
	.y-axis path {
	display: none;
	}
	.bottomaxis text {
	display: none;
	}
	</style>
	<body>

	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	var margin = { top: 20, right: 40, bottom: 20, left: 10 };

	var width = 960 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;

	var y = d3
	.scaleLinear()
	.domain([0, 5.6])
	.range([height, 0]);

	var x = d3
	.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.2);

	var svg = d3
	.select("body")
	.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 + ")");

	var yAxis = d3
	.axisRight(y)
	.tickValues([1, 2, 3, 4, 5])
	.tickFormat(function(d) {
	return "$" + d;
	});

	var bottomyAxis = d3
	.axisRight(y)
	.tickValues([0])
	.tickSize(width);

	var xAxis = d3.axisBottom(x).ticks([0]);

	var labels = [
	"C-SPAN",
	"The Weather Channel",
	"Comedy Central",
	"MSNBC",
	"Bravo",
	"TBS",
	"ESPN2",
	"TNT",
	"ESPN"
	];

	d3.csv("subscription-prices.csv", type, function(err, prices) {
	prices.sort(function(a, b) {
	return a.X2013 - b.X2013;
	});

	x.domain(
	prices.map(function(d) {
	return d.Network;
	})
	);

	var bar = svg
	.selectAll("g")
	.data(prices)
	.enter()
	.append("g")
	.attr("class", "bar");

	bar
	.append("rect")
	.attr("width", x.bandwidth())
	.attr("height", function(d) {
	return height - y(d.X2013);
	})
	.attr("y", function(d) {
	return y(d.X2013);
	})
	.attr("x", function(d) {
	return x(d.Network);
	})
	.attr("class", "bar")
	.attr("fill", function(d) {
	return d.Network === "ESPN"
	? "orange"
	: labels.includes(d.Network) ? "#999" : "#ddd";
	});

	bar
	.filter(function(d) {
	return labels.includes(d.Network);
	})
	.append("text")
	.text(function(d) {
	return d.Network;
	})
	.attr("dx", function(d) {
	return d.Network === "ESPN" ? 8 : 0;
	})
	.attr("dy", function(d) {
	return d.Network === "ESPN" ? 8 : -4;
	})
	.attr("text-anchor", function(d) {
	return d.Network === "ESPN" ? "start" : "end";
	})
	.attr("fill", "black")
	.attr("y", function(d) {
	return y(d.X2013);
	})
	.attr("x", function(d) {
	return x(d.Network);
	})
	.style("font-weight", function(d) {
	return d.Network === "ESPN" ? "700" : "400";
	});

	svg
	.append("g")
	.attr("class", "y-axis")
	.attr("transform", "translate(" + width / 1.075 + ",0)")
	.call(yAxis);

	svg
	.append("g")
	.attr("class", "y-axis bottomaxis")
	.call(bottomyAxis);
	});

	function type(d) {
	d.X2013 = +d.X2013;

	return d;
	}
	</script>
	Network	X2013
	3net	1.33
	A&E	0.29
	ABC Family Channel	0.27
	AMC	0.33
	Animal Planet	0.1
	Antena 3	0.32
	ASPiRE	0.04
	AXS TV	0.15
	Bandamax	0.13
	BBC America	0.13
	BBC World News	0.02
	beIN SPORT	0.15
	beIN SPORT en EspaÇñol	0.21
	BET	0.2
	BET Gospel	0.05
	BET Hip-Hop	0.07
	Bio	0.11
	Blackbelt TV	0.06
	Bloomberg Television	0.07
	BlueHighways TV	0.03
	Boomerang	0.09
	Bravo	0.24
	Bridges TV	0.11
	BTN	0.37
	C-SPAN	0.06
	Canal Sur	0.08
	Caracol TV	0.16
	Cartoon Network	0.21
	CBS Sports Network	0.24
	CENTRIC	0.08
	CentroAmerica TV	0.17
	Chiller	0.08
	Cloo	0.08
	CMT	0.1
	CMT Pure Country	0.05
	CNBC	0.31
	CNBC World	0.01
	CNN	0.6
	CNN en EspaÇñol	0.6
	CNN International	0.14
	Comedy Central	0.18
	Cooking Channel	0.07
	Crime & Investigation Network	0.06
	Current	0.11
	De PelÇðcula	0.19
	De PelÇðcula ClÇsico	0.11
	Destination America	0.07
	Discovery Channel	0.38
	Discovery en EspaÇñol	0.2
	Discovery Familia	0.18
	Discovery Fit & Health	0.07
	Disney Channel	1.15
	Disney Junior	0.17
	Disney XD	0.17
	DIY Network	0.09
	Documentary Channel	0.03
	E! Entertainment Television	0.24
	Ecuavisa	0.2
	ESPN	5.54
	ESPN 3D	2.79
	ESPN Classic	0.2
	ESPN Deportes	0.19
	ESPN2	0.7
	ESPNews	0.21
	ESPNU	0.2
	FamilyNet	0
	FEARnet	0.04
	Food Network	0.19
	FOX Business Network	0.13
	FOX College Sports	0.41
	FOX Deportes	0.22
	Fox Movie Channel/FX Movies	0.18
	FOX News	0.94
	FOX Soccer	0.18
	FUEL TV	0.18
	FUSE	0.06
	FX Network	0.51
	G4	0.1
	GAC	0.02
	Galavision	0.03
	Golf Channel	0.31
	GolTV	0.14
	GSN	0.12
	H2	0.06
	Hallmark Channel	0.06
	Hallmark Movie Channel	0.02
	HDNet Movies	0.37
	HGTV	0.16
	History	0.26
	History en EspaÇñol	0.19
	HLN	0
	HTV	0.16
	Independent Film Channel	0.23
	INSP	0
	Investigation Discovery	0.09
	Justice Central. TV	0
	La Familia Cosmovision	0.14
	LatinoamÇ¸rica TelevisiÇün	0.17
	Lifetime Movie Network	0.1
	Lifetime Real Women	0.04
	Lifetime Television	0.32
	LOGO	0.06
	MAVTV	0.09
	MEXICANAL	0.1
	Mexico TV	0.21
	MGM HD	0.47
	Military Channel	0.07
	Military History Channel	0.06
	MLB Network	0.23
	Mnet	0
	MSNBC	0.21
	MTV	0.43
	MTV Hits	0.02
	MTV Jams	0.03
	mtv-U	0.07
	MTV2	0.07
	mun2	0.06
	Nat Geo Mundo	0.2
	Nat Geo WILD	0.12
	National Geographic Channel	0.24
	NBA TV	0.27
	NBC Sports Network	0.33
	NFL Network	1.34
	NHL Network	0.29
	Nick 2	0.02
	Nick Jr./NickMom	0.21
	Nickelodeon/Nick At Nite	0.6
	Nicktoons Network	0.08
	NuvoTV	0.07
	Outdoor Channel	0.05
	Outside Television	0.03
	Ovation	0.07
	OWN: Oprah Winfrey Network	0.2
	Oxygen Network	0.1
	Palladia	0.09
	PBS KIDS Sprout	0.09
	ReelzChannel	0
	Resort & Residence	0
	RFD-TV	0.04
	Ritmoson Latino	0.2
	RLTV	0.07
	Science	0.07
	ShortsHD	0.11
	Smithsonian Channel	0.11
	SOAPnet	0.17
	Sony Movie Channel	0.33
	SPEED	0.31
	Spike TV	0.25
	Sportsman Channel	0.04
	Sundance Channel	0.18
	Sur Peru	0.18
	Syfy	0.28
	TBS	0.59
	TCM	0.3
	TeenNick	0.11
	Telefe International	0.2
	Telehit	0.19
	Tempo	0.05
	Tennis Channel	0.18
	The Africa Channel	0.07
	The Hub	0.13
	The Style Network	0.15
	The Weather Channel	0.13
	TLC	0.2
	TNT	1.24
	Tr3s	0.03
	Travel Channel	0.14
	truTV	0.12
	TV Chile	0.2
	TV Colombia	0.15
	TV Land	0.14
	TV One	0.1
	TV Venezuela	0.19
	TVGN	0.02
	TyC Sports International Channel	0.27
	Universal HD	0.16
	Universal Sports	0.21
	Univision Deportes	0.3
	Univision Deportes Dos	0.16
	Univision Noticias	0.18
	Univision tlnovelas	0.18
	UP	0
	USA	0.71
	UtilÇðsima	0.22
	Velocity	0.13
	VH1	0.2
	VH1 Classic	0.08
	VH1 Soul	0.05
	WAPA-America	0.23
	WE tv	0.13
	WealthTV	0.15
	WGN America	0.2
	World Fishing Network	0.13
	Youtoo TV	0.04