I'm trying to set the size of this globe to 200 x 200px.
I've learned that the projection is currently sized 960 x 500px.
Changing the size of the SVG doesn't shrink the globe. I'm having trouble understanding why.
Without luck I have tried to add the following to the code:
var width = 200;
var height = 200;
And
const width = 200;
const height = 200;
And
const svg = d3.select('svg')
.attr('width', 200).attr('height', 200);
How would I best approach this, and what am I doing wrong?
My code:
<!DOCTYPE html>
<html>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
const width = 960;
const height = 500;
const config = {
speed: 0.005,
verticalTilt: -20,
horizontalTilt: 0
}
let locations = [];
const svg = d3.select('svg')
.attr('width', width).attr('height', height);
const markerGroup = svg.append('g');
const projection = d3.geoOrthographic();
const initialScale = projection.scale();
const path = d3.geoPath().projection(projection);
const center = [width/2, height/2];
drawGlobe();
drawGraticule();
enableRotation();
function drawGlobe() {
d3.queue()
.defer(d3.json, 'world-110m.json')
.defer(d3.json, 'locations.json')
.await((error, worldData, locationData) => {
svg.selectAll(".segment")
.data(topojson.feature(worldData, worldData.objects.countries).features)
.enter().append("path")
.attr("class", "segment")
.attr("d", path)
.style("stroke", "silver")
.style("stroke-width", "1px")
.style("fill", (d, i) => 'silver')
.style("opacity", ".5");
locations = locationData;
drawMarkers();
});
}
function drawGraticule() {
const graticule = d3.geoGraticule()
.step([10, 10]);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path)
.style("fill", "#fff")
.style("stroke", "#ececec");
}
function enableRotation() {
d3.timer(function (elapsed) {
projection.rotate([config.speed * elapsed - 120, config.verticalTilt, config.horizontalTilt]);
svg.selectAll("path").attr("d", path);
drawMarkers();
});
}
function drawMarkers() {
const markers = markerGroup.selectAll('circle')
.data(locations);
markers
.enter()
.append('circle')
.merge(markers)
.attr('cx', d => projection([d.longitude, d.latitude])[0])
.attr('cy', d => projection([d.longitude, d.latitude])[1])
.attr('fill', d => {
const coordinate = [d.longitude, d.latitude];
gdistance = d3.geoDistance(coordinate, projection.invert(center));
return gdistance > 1.57 ? 'none' : 'tomato';
})
.attr('r', 7);
markerGroup.each(function () {
this.parentNode.appendChild(this);
});
}
</script>
</body>
</html>
Projection.scale()
The scale of the projection determines the size of the projected world. Generally speaking d3 projections have a default scale value that will fill a 960x500 SVG/Canvas. A map produced with d3.geoOrthographic doesn't have a long edge, so this is 500x500 pixels. The default scale value is: 249.5 - half the width/height (allowing for stroke width). This scale factor is linear on both width and height: double it and double both (quadruple projected size of world). So if you want a 200x200 px world you'll want: 99.5 to be your scale value.
This is the default for d3.geoOrthographic, other scales have other scale defaults. For a Mercator, for example, it is 480/π: 2π of longitude across 960 pixels of width.
Projection.translate()
However, if you change the scale for a 200x200 pixel world, you'll have an issue with the default projection translate. By default this is set to [250,480] - half of [500,960], the default D3 anticipated size of the SVG/Canvas. This coordinate is where the geographic center of the projection (by default 0°N,0°W) is projected to. You'll want to change this to a value of [100,100]: the center of your SVG/Canvas.
Solution
const projection = d3.geoOrthographic()
.scale(99.5)
.translate([100,100]);
Automagic Solution
There is an easier way, but understanding the mechanics can be useful.
projection.fitSize()/.fitExtent() both set scale and translate automatically based on a specified width/height / extent. In your case this is easy to solve manually, but you could also use:
d3.geoOrthographic()
.fitSize([width,height],geoJsonObject)
or
d3.geoOrthographic()
.fitExtent([[left,top],[right,bottom]],geojsonObject)
As you're using topojson: topojson.feature returns a geojson object (with a features property containing individual features - the array of features can't be passed to fitSize or fitExtent).
Related
I have 2 buttons that i want to use to control what data set I am using for my bar chart. Right now I can click on one and it shows my d3 graph without problems. But when I want to switch to the other graph, I click on the button and it shows me that graph on top of my previous graph. How do I make it so that when I switch between graphs, it only shows me one graph.
var djockey = 'top5jockey.csv'
var dtrainer = 'top5trainer.csv'
// Define SVG area dimensions
var svgWidth = 1500;
var svgHeight = 1000;
// Define the chart's margins as an object
var chartMargin = {
top: 30,
right: 30,
bottom: 130,
left: 30
};
// Define dimensions of the chart area
var chartWidth = svgWidth - chartMargin.left - chartMargin.right;
var chartHeight = svgHeight - chartMargin.top - chartMargin.bottom;
// Select body, append SVG area to it, and set the dimensions
var svg = d3.select("body")
.append("svg")
.attr("height", svgHeight)
.attr("width", svgWidth);
// Append a group to the SVG area and shift ('translate') it to the right and to the bottom
var chartGroup = svg.append("g")
.attr("transform", `translate(${chartMargin.left}, ${chartMargin.top})`);
var btnj = document.getElementById("Jockey")
btnj.addEventListener('click', function(e){
change(e.target.id)
})
var btnt = document.getElementById("Trainer")
btnt.addEventListener('click', function(e){
change(e.target.id)
})
function change(value){
if(value === 'Jockey'){
update(djockey);
}else if(value === 'Trainer'){
update(dtrainer);
}
}
function update(data){
d3.csv(data).then(function(data) {
console.log(data);
// Cast the hours value to a number for each piece of tvData
data.forEach(function(d) {
d.Count = +d.Count;
});
// Configure a band scale for the horizontal axis with a padding of 0.1 (10%)
var xScale = d3.scaleBand()
.domain(data.map(d => d.Name))
.range([0, chartWidth])
.padding(0.1);
// Create a linear scale for the vertical axis.
var yLinearScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.Count)])
.range([chartHeight, 0]);
// Create two new functions passing our scales in as arguments
// These will be used to create the chart's axes
var bottomAxis = d3.axisBottom(xScale);
var leftAxis = d3.axisLeft(yLinearScale).ticks(10);
// Append two SVG group elements to the chartGroup area,
// and create the bottom and left axes inside of them
chartGroup.append("g")
.call(leftAxis);
chartGroup.append("g")
.attr("class", "x_axis")
.attr("transform", `translate(0, ${chartHeight})`)
.call(bottomAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
// Create one SVG rectangle per piece of tvData
// Use the linear and band scales to position each rectangle within the chart
chartGroup.selectAll("#bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => xScale(d.Name))
.attr("y", d => yLinearScale(d.Count))
.attr("width", xScale.bandwidth())
.attr("height", d => chartHeight - yLinearScale(d.Count));
}).catch(function(error) {
console.log(error);
})
};
D3 has a function allowing you to remove all svg elements. Basically, you select the svg, then run .remove() at the top of your event listener. It will clear out all svg elements.
I am trying to draw an svg map from a topojson file located here. When I run the code below, I see a small red collection of g elements that is that map, but I'm not sure how to make it larger. I've tried doing projection.scale(100) but that does not work.
Here is a fiddle.
<svg width=500 height=500></svg>
async function run() {
const res = await fetch(
"https://rawcdn.githack.com/jasonicarter/toronto-geojson/0fb40bd54333bc3d397a26cf4f68abb1b6d94188/toronto_topo.json"
);
const jsondata = await res.json();
const width = 500;
const height = 500;
const neighbourhoods = topojson.feature(jsondata, jsondata.objects.toronto);
const projection = d3.geoAlbers().translate([width / 2, height / 2])
const svg = d3.select("svg")
svg
.append("g")
.selectAll("path")
.data(neighbourhoods.features)
.enter()
.append("path")
.attr("d", d3.geoPath().projection(projection))
.attr("fill", "red")
.attr("stroke", "white");
console.log("done")
}
run();
Indeed, you have to use the scale and the translate properties to scale / center your map.
But d3.geoProjection also provides some convenience functions such as fitExtent and fitSize in order to fit the projection on one specific GeoJSON feature object.
As your dataset is containing many features, I propose to use topojson.mesh to obtain a unique object representing your whole dataset (as a mesh) to use its extent with the fitSize method of the projection to scale your map :
const neighbourhoods = topojson.feature(jsondata, jsondata.objects.toronto);
const mesh = topojson.mesh(jsondata, jsondata.objects.toronto);
const projection = d3.geoAlbers()
.fitSize([width, height], mesh);
const svg = d3.select("svg")
svg
.append('g')
.selectAll("path")
.data(neighbourhoods.features)
.enter()
.append("path")
.attr("d", d3.geoPath().projection(projection))
.attr("fill", "red")
.attr("stroke", "white");
Which (after adding a border on the svg element) gives the following :
If you wanted to fit the extent using a some padding (lets say 20px) you could have use the following :
const projection = d3.geoAlbers()
.fitExtent([[20, 20], [width - 20, height - 20]], mesh);
If you click the red button in this example:
https://bl.ocks.org/interwebjill/fe782e6f195b17f6fe6798a24c390d90
you can see that the chart translates so that the circle is in the center and then zooms in to a specified level (reclicking on the button zooms back out). Translating and then zooming in this way leaves a gap on the left that I would rather not have. How might I change the code so that the chart zooms first and then translates to center so that I don't have this gap in the chart?
I have tried reversing the order of the scale and translate in both the zoom definition and the zoomToExtent function but there is no different in effect.
The ultimate source of the problem is d3.interpolateZoom. This interpolator has scale interpolate faster than translate - even though they mostly both are transitioning at the same time. The pattern implemented with d3.interpolateZoom is based on this paper.
Because scale and translate both interpolate differently in d3.interpolateZoom, you get a gap in the side of your chart as the scale decreases/increases more rapidly than the translate values.
d3.interpolateZoom is used when you call the zoom on a transition.
However, if you apply a transform directly on a transition using .attr(), the d3 transition will use d3.interpolateString, which will search the start and end strings for corresponding numbers and use d3.interpolateNumber on those. This will apply the same interpolation to both scale and translate.
Using both methods we can compare the discrepancy between d3.interpolateZoom and d3.interpolateString. Below the black rectangle uses d3.interpolateString while the orange rectangle uses d3.interpolateZoom. Click on a rectangle to start the transition:
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
var g1 = svg.append("g"), g2 = svg.append("g");
var zoom1 = d3.zoom().on("zoom", function() {
g1.attr("transform", d3.event.transform);
});
var zoom2 = d3.zoom().on("zoom", function() {
g2.attr("transform", d3.event.transform);
});
g1.call(zoom1.transform, d3.zoomIdentity
.translate(150, 100)
.scale(2));
g2.call(zoom2.transform, d3.zoomIdentity
.translate(150,100)
.scale(2));
g1.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 50)
.attr("height", 50);
g2.append("rect")
.attr("x", 22)
.attr("y", 22)
.attr("width", 46)
.attr("height",46)
.attr("fill","orange");
d3.selectAll("rect").on("click", function() {
g1.transition()
.duration(6000)
.attr("transform", d3.zoomIdentity)
.on("end", function() {
d3.select(this).call(zoom1.transform, d3.zoomIdentity);
})
g2.transition()
.duration(6000)
.call(zoom2.transform, d3.zoomIdentity)
});
<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
Where the first rectangle transitions the transform with .attr(), we need to call the zoom afterwards to ensure the zoom has the current transform, we don't need to in this example, but if you wanted to use the zoom after the transform you need to do this
Comparing these two we get:
(Y axis indicates percentage remaining in transition from start attribute to end attribute)
You want scale and translate to move simultaneously at the same rate when transitioning. We can do this if we use a tweening function. Unlike above we can't just use transition().attr("transform",newTransfrom) because you are also drawing canvas and updating the axis. So we'll need to create our own tweening function that can use the current transform and scale, apply it to the axis, canvas, and markers.
For example, rather than calling the zoom (which will use d3.interpolateZoom):
function zoomToExtent(d0, d1) {
zoomRect.call(zoom).transition()
.duration(1500)
.call(zoom.transform, d3.zoomIdentity
.translate(-xSVG(d0), 0)
.scale(width / (xSVG(d1) - xSVG(d0))));
}
Instead, we can use a tweening function which controls the element's transform and applies the same interpolator to scale and translate:
function zoomToExtent(d0, d1) {
//get transition start and end values:
var startScale = d3.zoomTransform(zoomRect.node()).k;
var startTranslate = d3.zoomTransform(zoomRect.node()).x;
var endTranslate = -xSVG(d0);
var endScale = width / (xSVG(d1) - xSVG(d0));
zoomRect.call(zoom).transition()
.duration(1500)
.tween("transform", function() {
var interpolateScale = d3.interpolateNumber(startScale,endScale);
var interpolateTranslate = d3.interpolateNumber(startTranslate,endTranslate);
return function(t) {
var t = d3.zoomIdentity.translate(interpolateTranslate(t),0).scale(interpolateScale(t));
zoomed(t);
}
})
.on("end", function() { // update the zoom identity on end:
d3.select(this).call(zoom.transform, d3.zoomIdentity
.translate(endTranslate, 0)
.scale(endScale));
})
}
You may notice I'm passing a transform value to the zoomed function, since there is no d3.event.transform for this, we need to modify the zoomed function to use the passed parameter if available, otherwise to fall back on the event transform:
function zoomed(transform) {
var t = transform || d3.event.transform;
...
Altogether, that might look something like this.
For another comparison between the two transitioning methods, I've created a gridded comparison that can be toggled between the two zoom identities:
var svg = d3.select("body").append("svg")
.attr("width", 510)
.attr("height", 310);
var g1 = svg.append("g");
var g2 = svg.append("g");
var rectangles1 = g1.selectAll()
.data(d3.range(750))
.enter()
.append("rect")
.attr("x", function(d) { return d%25*20; })
.attr("y", function(d) { return Math.floor(d/25)*20; })
.attr("width", 20)
.attr("height", 20)
.attr("fill","#ccc")
.attr("stroke","white")
.attr("stroke-width", 2);
var rectangles2 = g2.selectAll()
.data(d3.range(750))
.enter()
.append("rect")
.attr("x", function(d) { return d%25*20; })
.attr("y", function(d) { return Math.floor(d/25)*20; })
.attr("width", 20)
.attr("height", 20)
.attr("fill","none")
.attr("stroke","#444")
.attr("stroke-width", 1);
var startZoom = d3.zoomIdentity
.translate(-250,-200)
.scale(4);
var endZoom = d3.zoomIdentity
.translate(-100,-100)
.scale(5);
var zoom1 = d3.zoom().on("zoom", function() { g1.attr("transform", d3.event.transform); });
var zoom2 = d3.zoom().on("zoom", function() { g2.attr("transform", d3.event.transform); });
g1.call(zoom1.transform, startZoom);
g2.call(zoom2.transform, startZoom);
var toggle = true;
svg.on("click", function() {
toggle = !toggle;
g1.transition()
.duration(5000)
.call(zoom1.transform, toggle ? startZoom: endZoom)
g2.transition()
.duration(5000)
.attr("transform", toggle ? startZoom: endZoom)
.on("end", function() {
d3.select(this).call(zoom2.transform, toggle ? startZoom: endZoom);
})
})
rect {
opacity: 0.5;
}
<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
Have been trying to build a pie/donut chart with smooth gradient on it but figured out that it's quite difficult to make. Already spent a lot of time and still haven't any luck how to resolve that problem. I'm using d3js library
I have something similar to this
And want to fill it with gradient, exactly like this
Any advice how to make it more close to it. Maybe someone of you have already faced with that issue and have some knowledge about it.
Will be appreciate for any answers and advices.
As #meetamit says in his comment, there's no built-in SVG way I can find to product a circular gradient like you show. However, if we build on this excellent answer we can replicate your chart pretty well.
The trick is to make a donut of 360 arcs (one for each degree) to create the gradient ourselves. We can then use the pie calculation to not include the arcs where our slice padding should be:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<script>
// sample data
var data = [10,20,30,40,50];
var height = 500,
width = 500,
radius = 200,
padding = 0.04;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width/2 + ',' + width/2 + ')');
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius);
// pie the data
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d; });
data = pie(data);
// create our gradient
var colors = [],
slice = 0,
inPad = false;
// 360 degrees
d3.range(360).forEach(function(d, i) {
// convert to radians
var start = i * (Math.PI / 180),
end = (i + 1) * (Math.PI / 180);
// if we are in a padding area
if ( Math.abs(data[slice].startAngle - start) < padding ||
Math.abs(data[slice].endAngle - start) < padding ) {
inPad = true;
} else {
// when to move to next slice
if (inPad){
// move to next slice
slice++;
// "stick" on last slice
if (slice >= data.length) slice = 4;
}
inPad = false;
}
// only push if not in padding
if (!inPad){
colors.push({
startAngle: start,
endAngle: end,
fill: d3.hsl(i, 1, .5).toString()
});
}
});
// add arcs
svg.selectAll('.arc')
.data(colors)
.enter()
.append('path')
.attr('class', 'arc')
.attr('d', arc)
.style('fill', function(d){
return d.fill;
})
.style('stroke',function(d){
return d.fill;
});
</script>
</body>
</html>
I like to draw a circle in each coordinate. Using only width, height, and coordinates, how do I scale the coordinates? I'm very new to D3.js and I guess I'm doing something wrong with the projection part.
var width = 200,
height = 200;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var coordinates = [ [43.08803611,-79.06312222],
[43.09453889,-79.05636667] ];
var group = svg.append('g');
var projection = d3.geo.mercator()
.translate([width,height]);
var projectedCoordinates = [];
for (var i=0; i<coordinates.length; i++) {
projectedCoordinates[i] = projection(coordinates[i]);
}
group.selectAll("circle")
.data(projectedCoordinates)
.enter()
.append("circle")
.attr("r",4)
.attr("cx", function(d){ return d[0]; })
.attr("cy", function(d){ return d[1]; });
You are almost there, the only problem is that your projection is projecting the coordinates outside your drawing area. You can use the .center() function to tell the projection where the center is and .scale() to "zoom in". You should also only translate the projection by half the width and height of the container, otherwise the center will be in the bottom right corner.
The following example values should enable you to see the points:
var projection = d3.geo.mercator()
.center([43.09, -79.06])
.scale(50000)
.translate([width/2,height/2]);