I'm beginner in D3. I would like to know how to include in text letters like č,š,ž..
I included line with utf-8:
<meta charset="utf-8">
I also tried this in the head:
<script type="text/javascript" charset="utf-8" src="D3/d3.js"></script>
Letters like č,š or ž are shown like �. That is the same with letters from .text("Število...") and also with words from loaded file *.csv.
I tried change letter č with code
č
but no success. What can I do? Please help.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Slo</title>
<script type="text/javascript" src="D3/d3.js"></script>
<style type="text/css">
.naslov {
fill: #505050;
font: 18px sans-serif;}
.podnaslov {
fill: #777;
font: 12px sans-serif;}
.besedilo {
fill: #777;
font: 8px sans-serif;}
.land {
fill: #ccc;
stroke: #fff;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: .5;}
</style>
</head>
<body>
<script type="text/javascript">
var w = 1000;
var h = 450;
var formatNumber = d3.format(",.0f");
var radius = d3.scale.sqrt()
.domain([0, 1e6])
.range([1, 90]);
//Projekcija
var projection = d3.geo.mercator()
.scale(11000)
.translate([-2480,10270]);
//Path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
//Napisi
var naslov = svg.append("text")
.text("PREBIVALSTVO V SLOVENIJI PO NASELJIH")
.attr("class", "naslov")
.attr("x",15).attr("y",30);
var podnaslov = svg.append("text")
.text("LETA 2002 in 2013")
.attr("class", "podnaslov")
.attr("x",15).attr("y",60);
var besedilo1 = svg.append("text")
.attr("class", "besedilo")
.text("Velikost kroga kaže na stevilo prebivalcev v naselju leta 2013.").attr("x",15).attr("dy",100);
var besedilo2 = svg.append("text")
.attr("class", "besedilo")
.text("Prikazani so podatki za naselja, ki so imela leta 2013 vec kot 1300 prebivalcev.").attr("x",15).attr("dy",112);
var besedilo3 = svg.append("text")
.attr("class", "besedilo")
.text("Zadrži miško na krogih in si oglej podatke.").attr("x",15).attr("dy",124);
//Load in GeoJSON data
d3.json("Obstara.geojson", function (data){
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("class","land")
});
//Load mesta
d3.csv("Mesta_02_13.csv", function(error,podatki) {
if (error) return console.error(erorr);
svg.selectAll("circle")
.data(podatki)
.enter()
.append("circle")
.style("fill", function(d) {
if (d.trinajst-d.dva <= 0) {return "#9D5355"}
else { return "#006699"};})
.attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
.attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
.attr("r", function(d) { return radius(d.trinajst); })
.style("stroke","grey")
.style("stroke-width", '0.3px')
.style("opacity", 0.6)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", function(d) {
if (d.trinajst-d.dva <= 0) {return "#9D5355"}
else { return "#006699" };});})
.append("title")
.text(function(d) { return d.name + "\n2002: " + d.dva + "\n2013: " + d.trinajst; })
});
</script>
</body>
I loaded csv file where are also included names with č,š,ž letters:
name,lat,lon,dva,trinajst Ljubljana,46.0605,14.5166,258873,274826 Maribor,46.5620,15.6482,93847,94809 Celje,46.2524,15.2765,37834,37490 Mengeš,46.1686,14.5731,5557,6202 ...
