Develop Reference

I cannot enlarge my map with D3.js and always get a black block

I try to enlarge my map with geoProjection or geoMercator. The mapsvg is hidden befind a black block, and my map cannot be seen. My code is as follows:
fetch("./data/chinaMapDataAll.json")
.then(d1 => d1.json())
.then(d1 => {
var mapdata = [];
var mapsvg = d3.select("#mapsvg")
var mapwidth = mapsvg.attr("width")
var mapheight = mapsvg.attr("height")
for(let i=0;i<=d1.features.length-1;i++){
mapdata.push(d1.features[i].geometry.coordinates[0][0]);
}
console.log(mapdata);
var mapProjection=d3.geoProjection(function(x,y){
return [x,y];
});
var mapPath = d3.geoPath(mapProjection);
mapsvg.selectAll("path")
.data(d1.features)
.join("path")
.attr("d", function(d) { return mapPath(d) })
.attr("fill",function(d,i) { return scacolor[i]; })

d3 radar chart -- radialLine creates path but without coordinates

This is probably a pretty specific question:
My problem is that in d3.js i need to create a radial chart.
I created the axis and labels.
Now i want to draw the radialLine.
It creates the path objects in my HTML document,
but without any coordinates.
I think it has something to do with the way the radius/data is provided to the radialLine, but can't figure out what to change...
Hopefully someone sees my mistake.
I also created a JSfiddle:
complete JSfiddle
//Data:
var notebookData = [{
model: "Levecchio 620RE",
data: [579, 8, 2.4, 256, 13.3]
}];
var categories = [
"Price",
"RAM",
"CPU",
"Storage",
"Display"
];
var priceScale = d3.scaleLinear().domain([2500,300]).range([0,100]);
var ramScale = d3.scaleLinear().domain([0,32]).range([0,100]);
var cpuScale = d3.scaleLinear().domain([1.0,3.2]).range([0,100]);
var storageScale = d3.scaleLinear().domain([64,2048]).range([0,100]);
var displaySizeScale = d3.scaleLinear().domain([10.0,20.0]).range([0,100]);
function selectScale(category_name) {
switch(category_name) {
case "Price":
return priceScale;
case "RAM":
return ramScale;
case "CPU":
return cpuScale;
case "Storage":
return storageScale;
case "Display":
return displaySizeScale;
}
}
var scaledData = notebookData.map(function (el) {
return el.data.map(function (el2, i) { //el = 1 notebook
return selectScale(categories[i])(el2);
});
});
//My RadialLine
//generatorfunction
var radarLine = d3.radialLine()
.radius(function(d) { return scaledData(d.value); })
.angle(function(d,i) { return i*angleSlice; })
.curve(d3.curveLinearClosed)
;
//Create the wrapper
var radarWrapper = g.selectAll(".radarWrapper")
.data(notebookData)
.enter().append("g")
.attr("class", "radarWrapper")
;
//Create pathlines
radarWrapper.append("path")
.attr("class", "radarStroke")
.attr("d", function(d,i) { return radarLine(d); })
.style("stroke-width", cfg.strokeWidth + "px")
.style("stroke", function(d,i) { return cfg.color(i); })
.style("fill", "none")
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

I've edited your fiddle a bit to make it work:
https://jsfiddle.net/2qgygksL/75/
Basicly what i've done:
fix the color scheme
var colors = d3.scale.category10();
instead of
var colors = d3.scale.ordinal(d3.schemeCategory10);
added data to path
radarWrapper.append("path")
.data(scaledData)
change radius to
.radius(function(d, i) {
return d;
})
since You used something like return scaledData(d.value); where your scaledData is an array.

No map rendered in D3

I am trying to follow the Choropleth example by Scott Murray (shown in his text book)using a timezone geojson file. The problem is my map ain't getting rendered and the entire SVG is getting filled with green color. My code is below, and I would like to know if I'm doing anything wrong in rendering the map. I fill colors in the map using the values under each timezone.(shown in the picture below).
<script>
var width = 1000;
var height = 600;
var d = [];
var projection = d3.geo.mercator()
.translate([width/2, height/2])
.scale([500]);
var path = d3.geo.path().projection(projection);
var color = d3.scale.ordinal().range(colorbrewer.YlGn[9]);
var svg = d3.select("#viz").append("svg")
.attr("width",width)
.attr("height",height);
d3.json('scm-timezone.json', function(data){
var com = data.commits;
d.push(com);
color.domain([
d3.min(d[0]),
d3.max(d[0])
]);
d3.json("world.json", function(json){
for(var i = 0;i < data.tz.length;i++){
var dataTZ = data.tz[i];
var commitValue = parseInt(data.commits[i]);
for(var j = 0;j<json.features.length;j++){
var jsonTZ = json.features[j].properties.description;
if(dataTZ == jsonTZ) {
json.features[j].properties.value = commitValue;
}
}
}
svg.selectAll("path")
.data(json.features)
.enter()
.insert("path")
.attr("d",path)
.style("fill", function(d) {
var val = d.properties.value;
if(val){ return color(val); }
else { return "white"; }
});
});
});
</script>
And my world.json finally looks like this-

d3 radial wipe animation clips one element

The intent of this code is to click on a pie slice and have all of slices animated in a shrinking and expanding fashion. When I run the following code for a single element, they all work. When I try to animate all arcs at the same time, the smallest one disappears. Fiddle http://jsfiddle.net/fk03xyap/
var data = [50,20,30];
var svgConfig = {
height: 1000,
width: 1000,
id: 'mySvg',
transform: 'translate(500,300)'
};
var colors = ['blue','gray','green'];
var pie = d3.layout.pie().value(function(d) { return d;});
var arcGen = d3.svg.arc()
.outerRadius(100)
.innerRadius(10);
var svg = d3.select('body').append('svg').attr(svgConfig);
var g = svg.selectAll('.arc')
.data(pie(data))
.enter()
.append('g')
.attr('transform','translate(100,200)')
.attr('class','arc');
var paths = g.append('path').attr('d',arcGen).style('fill',function(d,i){
return colors[i];
});
d3.selectAll('path').on('click', function () {
var el = d3.select(this);
var g = d3.select('g');
var paths = d3.selectAll('path');
var endAngle,startAngle,orig;
paths.transition().duration(250).attrTween('d',function(d){
orig = d;
console.log('orig',orig);
endAngle = d.endAngle;
startAngle = d.startAngle;
console.log('first');
var interpolate = d3.interpolate(d.endAngle, d.startAngle +.01);
return function(t){
d.endAngle = interpolate(t);
return arcGen(d);
};
}).transition().duration(755).attrTween('d',function(r){
console.log('orig new',orig);
var interpolate = d3.interpolate(r.startAngle,endAngle);
return function(t){
r.endAngle = interpolate(t);
return arcGen(r);
};
});
});

You are overwriting the "original" end angle. I would stash it in the d element for later use. Cleaning this up, the code simplifies to:
d3.selectAll('path').on('click', function () {
paths.transition().duration(250).attrTween('d',function(d){
d.origEnd = d.endAngle;
var interpolate = d3.interpolate(d.endAngle, d.startAngle +.01);
return function(t){
d.endAngle = interpolate(t);
return arcGen(d);
};
}).transition().duration(755).attrTween('d',function(r){
var interpolate = d3.interpolate(r.startAngle,r.origEnd);
return function(t){
r.endAngle = interpolate(t);
return arcGen(r);
};
});
});
Updated example.

Transition on line chart using d3.js

In my line chart, initially all data needed for plot line. There is two button Make and sell, If I click on any one of the button, data related to that button should be plotted for line with transition effect as shown in this link . I have tried to make this work, but I can't. I tried to make relation between button and line chart as given below(code), its not working. I have hard coded buttonId in my code with sell to have data related to sell, if I change it to Make I will get data related to Make but I need to hard coded here. what I want is when a Make button clicked data related to Make should come with transition as above link shown. My code is
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="d3.chart.min.js"></script>
</head>
<body>
<div id="vis"></div>
<button id="Make">Make</button>
<button id="sell">sell</button>
<script type="text/javascript">
d3.chart("linechart", {
initialize: function() {
// create a base scale we will use later.
var chart = this;
chart.w = chart.base.attr('width') || 200;
chart.h = chart.base.attr('height') || 150;
chart.w = +chart.w;
chart.h = +chart.h;
buttonId = 'sell'
chart.x = d3.scale.linear()
.range([0, chart.w]);
chart.y = d3.scale.linear()
.range([chart.h,0]);
chart.base.classed('line', true);
this.areas = {};
chart.areas.lines = chart.base.append('g')
.classed('lines', true)
.attr('width', chart.w)
.attr('height', chart.h)
chart.line = d3.svg.line()
.x(function(d) { return chart.x(d.x);})
.y(function(d) { return chart.y(d.y);});
this.layer("lines", chart.areas.lines, {
dataBind: function(data) {
// update the domain of the xScale since it depends on the data
chart.y.domain([d3.min(data,function(d){return d.y}),d3.max(data,function(d){return d.y})])
var mydata=new Array();
if(buttonId)
{
var j=0;
for(var i in data)
{
if(data[i].custody === buttonId){mydata[j] = data[i]; j++;};
}
chart.x.domain(d3.extent(mydata, function(d) { return d.x; }));
}
else
{
chart.x.domain(d3.extent(data, function(d) { return d.x; }));
}
// return a data bound selection for the passed in data.
return this.selectAll("path").data([data]);
},
insert: function() {
return this.append("path")
.datum(data)
.attr("d", chart.line)
.attr('stroke','#1ABC9C')
.attr('stroke-width','2')
.attr('fill','none');
}
});
},
// configures the width of the chart.
// when called without arguments, returns the
// current width.
width: function(newWidth) {
if (arguments.length === 0) {
return this.w;
}
this.w = newWidth;
return this;
},
// configures the height of the chart.
// when called without arguments, returns the
// current height.
height: function(newHeight) {
if (arguments.length === 0) {
return this.h;
}
this.h = newHeight;
return this;
},
});
var data = [
{x: 0,y:190, custody: "Make"},
{x: 1,y:10, custody: "Make"},{x: 2,y:40, custody: "Make"},{x: 3,y:90, custody: "Make"},
{x: 4,y:30, custody: "sell"},{x: 5,y:20, custody: "sell"},{x: 6,y:10, custody: "sell"},
{x: 7,y:40, custody: "sell"}
];
var chart1 = d3.select("#vis")
.append("svg")
.chart("linechart")
.width(720)
.height(320)
chart1.draw(data);
</script>
</body>
</html>
Get d3.chart.min.js from d3.chart.min.js
and get d3.v3.min.js from d3.v3.min.js