Number of indexed journals per municipality in Colombia

This is the first of a series of plots that seek to explore the state of indexed journals in my country. In this first graph, its interesting to see how the biggest cities, such as Bogotá and Medellín, have more indexed journals. The data used came from https://www.datos.gov.co/ and the name of the original dataset is 'REVISTAS INDEXADAS EN EL INDICE NACIONAL PUBLINDEX - SEGUNDA ACTUALIZACION'.

<!DOCTYPE html>

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
	
	.bars {
		stroke: #3e4444;
	}

.unselected {
		fill: #eca1a6;
	}

.selected {
		fill: #bdcebe;
	}

text {
		font-family: 'Roboto Slab', serif;
	}

</style>

var svg = d3.select("svg"),
		margin = {top: 20, right: 0, bottom: 120, left: 0}
		width = +svg.attr("width") - margin.left - margin.right,
		height = +svg.attr("height") - margin.top - margin.bottom,
		g = svg.append("g").attr("transform", "translate("+ margin.left +","+ margin.top +")")

var yScale = d3.scaleLinear().range([0, height]),
		xScale = d3.scaleBand().range([0, width]).padding(0.1);

d3.json("journalsByMunicipio.json", function(err, data){
		
		if (err) throw err;

formatedData = dictToArray(data);

function update(myData){

yScale.domain(d3.extent(formatedData, function(d){ return d.numJournals; }));

xScale.domain(formatedData.map(function(d){ return d.municipio; }));

xAxis = d3.axisBottom(xScale);

g.append("g")
					.attr("transform", "translate(0,"+ height +")")
					.call(xAxis)
				.selectAll("text")
					.attr("y", 0)
					.attr("x", 9)
					.attr("dy", ".35em")
					.attr("transform", "rotate(90)")
					.attr("text-anchor", "start");

console.log(myData);
						
			var bars = g.selectAll(".bar").data(myData);

bars.enter().append("rect")
					.attr("class","bars unselected")
					.attr("x", function(d){ return xScale(d.municipio); })
					.attr("y", function(d){ return height - yScale(d.numJournals); })
					.attr("width", xScale.bandwidth())
					.attr("height", function(d){ return yScale(d.numJournals); })
					.on("mouseover", handleMouseOver)
					.on("mouseout", handleMouseOut);

}

update(formatedData);

function handleMouseOver(d, i){
			d3.select(this)
					.attr("class", "bars selected");

g.append("text")
					.attr("id", "text-" + d.municipio.substring(0,4))
					.attr("x", function(){ return xScale(d.municipio) + 3; })
					.attr("y", function(){ return height - yScale(d.numJournals + 2); })
					.text(function(){ return d.numJournals; });

}

function handleMouseOut(d, i){
			d3.select(this)
					.attr("class", "bars unselected");

g.select("#text-" + d.municipio.substring(0,4)).remove();
		}

});

function dictToArray(myDict){
		
		var myArray = []

for (key in myDict){
			var newElement = {"municipio": key, "numJournals": +myDict[key]};
			myArray.push(newElement);
		}
		return myArray
	}

</script>

https://d3js.org/d3.v4.min.js