chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
svg.append('g')
.append('rect')
.attr('width', width)
.attr('height', height)
.attr('x', 0)
.attr('y', 0)
.attr('fill', paper)
svg.append('g')
.append("path")
.attr("fill", 'none')
.attr("stroke", 'white')
.attr("stroke-width", 1)
.attr('vector-effect', 'non-scaling-stroke')
.style("pointer-events", "none")
.attr("d", path(topojson.feature(friuli, friuli.objects.friuli)))
// svg.append('g')
// .append("path")
// .attr("fill", 'none')
// .attr("stroke", pontoni)
// .attr("stroke-width", )
// .attr('vector-effect', 'non-scaling-stroke')
// .style("pointer-events", "none")
// .attr("d", path(topojson.feature(trip, trip.objects.friuli)))
// svg.append('g')
// .append('path')
// .attr('d', triangle)
// .attr('fill', pontoni)
// .attr('transform', `translate(${projectedCities.zurigo.point[0]}, ${projectedCities.zurigo.point[1] + 10})`)
// svg.append('g')
// .selectAll('circle')
// .data(projectedRoute)
// .enter()
// .append('circle')
// .attr('fill', 'red')
// .attr('cx', d=> d[0])
// .attr('cy', d=> d[1])
// .attr('r', 2)
// svg.append('g')
// .selectAll('circle')
// .data(Object.values(projectedCities))
// .enter()
// .append('circle')
// .attr('fill', pontoni)
// .attr('cx', d=> d.point[0])
// .attr('cy', d=> d.point[1])
// .attr('r', 3)
// svg.append('g')
// .selectAll('rect')
// .data(Object.values(projectedCities))
// .enter()
// .append('rect')
// .attr('fill', paper)
// .attr('width', 80)
// .attr('height', 28)
// .attr('x', d => d.point[0] - 40)
// .attr('y', d => d.point[1] - 10 - 28)
// svg.append('g')
// .selectAll('text')
// .data(Object.values(projectedCities))
// .enter()
// .append('text')
// .attr('font-size', fontSize)
// .attr('font-family', 'blacksword')
// .attr('fill', pontoni)
// .text(d => d.label)
// .attr('x', d => d.point[0])
// .attr('y', d => d.point[1] - 15)
// .attr('text-anchor', 'middle')
return svg.node()
}
projection = d3.geoMercator()
.center([13.212, 46.115])
.scale(130000)
.translate([width / 2, height / 2 ]);
pontoni = '#432c02'
paper = '#ECECE8'
fontSize = 25
friuli = FileAttachment("friuli-3.json").json()
trip = FileAttachment("percorso.json").json()
width = 720
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.
