founder BUDOTS MEDIA, PHILIPPINES TRAVEL COMPANY
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.datum(geojson)
.attr("fill", "lightgrey")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
svg.append("g")
.attr("fill", "red")
.attr("fill-opacity", 0.3)
.attr("stroke", "red")
.selectAll("path")
.data(data)
.join("path")
.attr("transform", d => {
d.position = projection([d.lng,d.lat])
return `translate(${d.position})`}
)
.attr("d", d => spike(length(d.nightsTotal)))
.append("title")
.text(d => `${d.mjesto}
${d3.format(".2s")(d.nightsTotal)}`);
const legend = svg.append("g")
.attr("fill", "#777")
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g")
.data(length.ticks(8).slice(1).reverse())
.join("g")
.attr("transform", (d, i) => `translate(${width*0.8 - (i + 1) * 28},400)`);
legend.append("path")
.attr("fill", "red")
.attr("fill-opacity", 0.3)
.attr("stroke", "red")
.attr("d", d => spike(length(d)));
legend.append("text")
.attr("dy", "1.3em")
.text(length.tickFormat(4, "s"));
return svg.node();
}
projection = d3.geoAlbers()
.rotate([70,0])
.fitExtent([[0, 20], [width * 0.9, height * 0.9]], geojson)
data = {
var retval = d3.csvParse(await FileAttachment("nocenjaGeo.csv").text(), function(d) {
return {
'mjesto': d.mjesto,
'arrivalsTotal': +d.a,
'arrivalsForeign': +d.b,
'arrivalsLocal': +d.c,
'nightsTotal': +d.d,
'nightsForeign': +d.e,
'nightsLocal': +d.f,
'lat': +d.lat,
'lng': +d.lng
}
})
return retval
}
topoHrv = FileAttachment("hrvatska.1.tomo.simplified.topo.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
