svg bar chart fails to render on plnkr - d3.js

Not sure if this is a plnkr issue or an issue with my code.. although the console is not showing any errors.
I am writting a little svg script and it does not render.
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 14, 20, 25];
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function(d, i) {
return i * (w/dataset.length);
})
.attr('y', function(d) {
return h - (d);
})
.attr("width", w/ dataset.length - padding)
.attr("height", function(d) {
return d;
});
Plnkr here:
http://plnkr.co/edit/X7KomlmOVS6C0zhNL19b

Run it inside a document.ready or wait till the window is loaded. http://plnkr.co/edit/TmFWndyCgLk7GYEng7XP
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
</html>
and in the JS
$(document).ready(function(){
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 14, 20, 25];
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
console.log('running the plnkr');
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function(d, i) {
return i * (w/dataset.length);
})
.attr('y', function(d) {
return h - (d * 4);
})
.attr("width", w/ dataset.length - padding)
.attr("height", function(d) {
return d * 4;
});
});

Related

D3: Rescaling scatter plot elements with Update, without removing elements

I have some rookie question.
I am trying to rescale scatter plot elements (circles along with X axis) based on button click - to create 'zoom in' activity. I am lowering X axis domain for that.
It works very well with Xaxis, however its harder with circles. I must remove all of them and draw them again (the place marked in the code). This makes the process slow when lot of elements involved and also doesn't allow transition which is applied for axis scaling.
Is it possible just to change attributes of circles that i won't need to remove and redraw everything again?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
// Define Canvas size
var width = 500;
var height = 500;
// Generate Toy Data
var randomX = d3.randomUniform(0, 880);
var randomY = d3.randomUniform(0, 800);
data_x = [];
data_y = [];
for (i = 0; i < 10000; i++) {
nume = Math.floor((Math.random() * 100));
data_x.push(nume);
data_y.push(nume);
}
// Scaling Coeffs
var coeffX = 1;
var coeffY = 1;
var coeffR = 1;
var coordX = (Math.max.apply(null, data_x)/coeffX);
var coordy = (Math.max.apply(null, data_y)/coeffY);
var x = d3.scaleLinear()
.domain([0, coordX])
.range([ 0, width]).nice();
var y = d3.scaleLinear()
.domain([0, coordy])
.range([height, 0]).nice();
var yAxis = d3.axisLeft(y).ticks(5);
var xAxis = d3.axisBottom(x).ticks(5)
//Create SVG element
var canvas = d3.select("body")
.append("svg")
.attr("width", width+50)
.attr("height", height+50)
.append("g");
// --------------- Draw Elements ---------------------
var circles = canvas.selectAll("circlepoint")
.data(data_x)
.enter()
.append("g");
circles.append("circle")
.attr("cx",function(d, i){
var tempe = data_x[i];
return x(tempe);
})
.attr("cy", function(d, i){
var tempe = data_y[i];
return y(tempe);
})
.attr("r", function(){
return 3;
})
.style("stroke", "steelblue")
.style("fill", "none")
.attr("transform", "translate(40, -20)");
var xsCont = canvas.append("g")
.attr("transform", "translate(40, " + (height-20) +")")
.attr("class","xaxis")
.call(xAxis);
var ysCont = canvas.append("g")
.attr("transform", "translate(40, -20)")
.call(yAxis);
function rescaleAxisX(tempCoeffX, tempCoeffR){
coordX = (Math.max.apply(null, data_x)/tempCoeffX);
x.domain([0, Math.max.apply(null, data_x)/tempCoeffX])
// -------- This part works well-------
canvas.select(".xaxis")
.transition().duration(750)
.call(xAxis);
// -------- End -------------
// -------- This one doesn't as expected-------
circles.remove();
circles = canvas.selectAll("circlepoint")
.data(data_x)
.enter()
.append("g");
circles.append("circle")
.attr("cx",function(d, i){
var tempe = data_x[i];
return x(tempe);
})
.attr("cy", function(d, i){
var tempe = data_y[i];
return y(tempe);
})
.attr("r", function(d, i){
return tempCoeffR;
})
.style("stroke", "steelblue")
.style("fill", "none")
.attr("transform", "translate(40, -20)");
}
// -------- End -------
// Zoom in button
var buttonZoomPlusX = d3.select("body")
.append("input")
.attr("type","button")
.attr("class","button")
.attr("value", "+")
.on("click", function(){
coeffX = coeffX + 1;
coeffR = coeffR + 1;
rescaleAxisX(coeffX, coeffR);
})
</script>
</body>
</html>
Here is implemented Fiddle
https://jsfiddle.net/sma76ntq/
Thanks a lot in advance
Well it was rookie mistake as always. Two things were missing:
1. Appending some class to circles in order not too select everything on canvas if there were more circles drawn
circles.append("circle")
.attr("cx",function(d, i){
var tempe = data_x[i];
return x(tempe);
})
.attr("cy", function(d, i){
var tempe = data_y[i];
return y(tempe);
//return y(d.y);
})
.attr("r", function(){
return 3;
})
.attr("class","eles")
.style("stroke", "steelblue")
.style("fill", "none")
.attr("transform", "translate(40, -20)");
on redrawn just select classes and change attributes.
canvas.selectAll(".eles").data(data_x)
.transition()
.duration(750)
.attr("cx",function(d, i){
var tempe = data_x[i];
return x(tempe);
})
.attr("cy", function(d, i){
var tempe = data_y[i];
return y(tempe);
});
Working Fiddle here: https://jsfiddle.net/v7q14nbm/1/

d3.js I want to change the data value to a percentage

I want to use the data value from json file and use it in d3.js.
I would like to display the data in the json file by using a bar graph in 0 to 100% on the x axis, and convert it to a percentage and graph it.
I do not know how to change the data value to a percentage.
So there is no longer any progress in the code.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>D3_percent_Bar</title>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
</head>
<body>
<svg id="bar1" width="250" height="250"></svg>
<script>
var margin={top:10,bottom:10,left:15,right:15},
w = 250 - margin.left - margin.right,
h = 250 - margin.top - margin.bottom;
var canvas = d3.select("#bar1")
.append("svg")
.attr("width",w+margin.left+margin.right)
.attr("height",h+margin.top+margin.bottom);
var formatter = d3.format(".0%");
var x = d3.scaleLinear()
.range([0,w]);
var xAxis = d3.axisBottom()
.scale(x)
.ticks(10,formatter);
var data = d3.json("data_F.json", function (error,data){
alert(data);
alert(error);
var max = Math.max.apply(Math, data);
var percents = (data / max)*100;
//var maxX = d3.max(data, function(d){return d.num2;});
//var minX = d3.min(data, function(d){return d.num1;});
//x.domain([0,maxX]);
canvas.append("g")
.attr("class","axis")
.attr("transform", "translate("+margin.left+","+50+")")
.call(xAxis);
var bar = canvas.selectAll("rect")
.data(data)
.attr("class","bar")
.enter()
.append("rect")
.attr("x",margin.left+40)
.attr("width", function(d){return d.num1;})
.attr("y",function(d,i){return i*50;})
.attr("height",40);
//.attr("height",barHeight-1)
//.attr("transform","translate(0,4)");
});
</script>
</body>
</html>
You don't need to "change the data value to a percentage". You can simply change the tick format:
.tickFormat(d => Math.round(d*100/d3.max(data)) + "%");
Have a look at the following demos. This is a regular bar chart:
var data = [20,45,245,134,267,111,54,333,23];
var w = 500, h = 200, padding = 20;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var xScale = d3.scaleLinear()
.range([padding, (w - padding)])
.domain([0, d3.max(data)]);
var rects = svg.selectAll(".rects")
.data(data)
.enter()
.append("rect")
.attr("x", xScale(0))
.attr("y", (d,i) => i*20)
.attr("height", 14)
.attr("width", d => xScale(d) - padding)
.attr("fill", "teal");
var xAxis = d3.axisBottom(xScale);
var gX = svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>
Nothing new here, the ticks show the absolute values, the maximum being 333.
But here is the same code, without changing any data, only changing the tickFormat:
var data = [20,45,245,134,267,111,54,333,23];
var w = 500, h = 200, padding = 20;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var xScale = d3.scaleLinear()
.range([padding, (w - padding)])
.domain([0, d3.max(data)]);
var rects = svg.selectAll(".rects")
.data(data)
.enter()
.append("rect")
.attr("x", xScale(0))
.attr("y", (d,i) => i*20)
.attr("height", 14)
.attr("width", d => xScale(d) - padding)
.attr("fill", "teal");
var xAxis = d3.axisBottom(xScale)
.tickFormat(d => Math.round(d*100/d3.max(data)) + "%");
var gX = svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

d3 how to tween inner radius for pie chart

I need to animate pie chart into a donut chart (or ring chart).
Here is my code:
var arc = d3.svg.arc().outerRadius(radius-margin).innerRadius(0)
var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(60)
var path = pie_chart.selectAll('path')
.data(pie(data))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color_scale(d.data.device)
})
.transition().attr('d', arc2)
Some times it's working but sometimes it is not. I have tried to apply transition to arc but not working.
var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(0).transition().innerRadius(60)
I would write my own arcTween function for this to take complete control of the transition:
function arcTween(d) {
var i = d3.interpolateNumber(0, radius-70); //<-- radius of 0 to donut
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r); //<-- create arc
return arc(d); //<-- return arc path
};
}
Full code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 500,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [10, 20, 30, 40];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color(i);
})
.transition()
.delay(100)
.duration(5000)
.attrTween("d", arcTween);
function arcTween(d) {
var i = d3.interpolateNumber(0, radius-70);
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r);
return arc(d);
};
}
</script>
</body>
Or just give someone a headache:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 500,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [10, 20, 30, 40];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
var arcs = g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color(i);
});
(function repeat() {
arcs.transition()
.duration(500)
.attrTween("d", arcTweenOut)
.transition()
.duration(500)
.attrTween("d", arcTweenIn)
.each('end', repeat)
})();
function arcTweenOut(d) {
var i = d3.interpolateNumber(0, radius-70);
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r);
return arc(d);
};
}
function arcTweenIn(d) {
var i = d3.interpolateNumber(radius-70, 0);
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r);
return arc(d);
};
}
</script>
</body>

D3 auto updates when array length change

I have simple code here from Interactive Data Visualization by Scott Murray with minor changes. What I changed is the initial data's length 5 is different from the dataset1's length 25 in the click function.
However, every time I click and update, it does generate random new numbers but the length only shows 5 bars.
What is the reason for this? And how could I modify to change it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../d3/d3.v3.js"></script>
<title>D3 index01 </title>
<style type="text/css">
div.bar{
display: inline-block;
width: 20px;
height: 75px;
background-color: teal;
margin-right: 2px;
}
</style>
</head>
<body>
<p> click it </p>
<script type = "text/javascript">
var w=600;
var h = 250;
var dataset = [5,10,13,14,15];
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length)).rangeRoundBands([0,w],0.05);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)]).range([0,h]);
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d,i){
return xScale(i);
})
.attr("y",function(d){return (h-yScale(d));})
.attr("width",xScale.rangeBand())
.attr("height",function(d){return yScale(d);});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i)+xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
d3.select("p")
.on("click",function(){
var dataset1 = [];
for(var i=0; i<25; i++){
var newNumber = Math.floor(Math.random()*25);
dataset1.push(newNumber);
}
svg.selectAll("rect").data(dataset1)
.transition()
.delay(function(d,i){
return i*100;
})
.duration(500)
.attr("x",function(d,i){
return xScale(i);
})
.attr("y",function(d){
return h-yScale(d);
})
.attr("x", function(d,i){
return xScale(i);
})
.attr("height",function(d){
return yScale(d);
})
.attr("fill",function(d){
return "rgb(0,0, " + (d*10) + ")";
});
svg.selectAll("text").data(dataset1).
text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
});
</script>
</body>
</html>
The issue, as I see it, is that when you update the rects with the new numbers using this statement
svg.selectAll("rect").data(dataset1)
the selectAll only selects the original 5 rects that were created based on dataset
var dataset = [5,10,13,14,15];
You could either create them all from the start with an equally sized starting dataset or append new rect svgs at this point.
Since you are doing a transition on the original rects I think it makes the most sense to just start with all 25. You could write a function to automatically generate this and put it where dataset is defined:
var dataset = [];
var numBars = 25; // This is the number of bars you want
var maxHeight = 25; // Seems like this is independent and needed as a ceiling
for(var i =0;i < N;i++){
var newNumber = Math.floor(Math.random()* maxHeight);
dataset.push(newNumber);
}
You could then replace 25 with numBars within your onclick function as well.

Change class of one element when hover over another element d3

I have a list of images and a list of image titles. I want to be able to show a hover state (change css) for the title when I mouse over its corresponding image, but I cannot figure out how to connect the two pieces of data. My code is below. I have it so that when you click on the top number the information appears beneath.
<!DOCTYPE html>
<html>
<head>
<script src="d3.v2.js"></script>
<title>Untitled</title>
</head>
<body>
<script type="text/javascript" >
function barStack(d) {
var l = d[0].length
while (l--) {
var posBase = 0, negBase = 0;
d.forEach(function(d) {
d=d[l]
d.size = Math.abs(d.y)
if (d.y<0) {
d.y0 = negBase
negBase-=d.size
} else
{
d.y0 = posBase = posBase + d.size
}
})
}
d.extent= d3.extent(d3.merge(d3.merge(d.map(function(e) { return e.map(function(f) { return [f.y0,f.y0-f.size]})}))))
return d
}
var ratiodata = [[{y:3.3}],[{y:-1.5}]]
var imageList = [
[3.3, 28, -1.5, 13, 857, 3, 4, 7, [{paintingfile:"676496.jpg", title:"Dessert1"}, {paintingfile:"676528.jpg", title: "Dessert2"}]
]]
var h=400
var w=1350
var margin=25
var color = d3.scale.category10()
var div = d3.select("body").append("div")
.attr("class", "imgtooltip")
.style("opacity", 0);
var x = d3.scale.ordinal()
.domain(['255'])
.rangeRoundBands([margin,w-margin], .1)
var y = d3.scale.linear()
.range([h-margin,0+margin])
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0)
var yAxis = d3.svg.axis().scale(y).orient("left")
barStack(ratiodata)
y.domain(ratiodata.extent)
var svg = d3.select("body")
.append("svg")
.attr("height",h)
.attr("width",w)
svg.selectAll(".series")
.data(ratiodata)
.enter()
.append("g")
.classed("series",true)
.style("fill","orange")
.selectAll("rect").data(Object)
.enter()
.append("rect")
.attr("x",function(d,i) { return x(x.domain()[i])})
.attr("y",function(d) { return y(d.y0)})
.attr("height",function(d) { return y(0)-y(d.size)})
.attr("width",x.rangeBand());
svg.selectAll("text")
.data(imageList)
.enter()
.append("text")
.text(function(d) {
return d[0];
})
.attr("x", function(d, i) {
return x(x.domain()[i]) + x.rangeBand() / 2;
})
.attr("y", function(d) {
return h - (32.1100917431*d[0] +150);
})
.attr("font-size", "16px")
.attr("fill", "#000")
.attr("text-anchor", "middle")
//.on("click", function(d) {console.log(d[1]);})
.on("click", function(d) {
//Update the tooltip position and value
d3.selectAll("ul")
.remove();
d3.selectAll("li")
.remove();
d3.select("#PaintingDetails")
.append("ul")
.selectAll("li")
.data(d[8])
.enter()
.append("li")
.text(function(d){
return (d.title);
});
d3.select("#imageBox")
.append("ul")
.selectAll("li")
.data(d[8])
.enter()
.append("li")
.classed("Myimageslist",true)
.append("img")
.classed("Myimages",true)
.attr("src", function(d){
return ("http://images.tastespotting.com/thumbnails/" + d.paintingfile);
})
.attr("align", "top");
d3.select(".Myimages")
.on("mouseover", function(){
d3.select("#PaintingDetails")
.selectAll("li")
.classed("selected", true)
});
});
svg.append("g").attr("class","axis x").attr("transform","translate (0 "+y(0)+")").call(xAxis);
// svg.append("g").attr("class","axis y").attr("transform","translate ("+x(margin)+" 0)").call(yAxis);
</script>
<div id="PaintingDetails"></div>
<div id="imageBox"></div>
</body>
</html>
The quick and dirty solution would be to simply use the index of the data element to figure out which title matches which image:
d3.selectAll(".Myimages")
.on("mouseover", function(d, i) {
d3.select("#PaintingDetails")
.selectAll("li")
.classed("selected", function(e, j) { return j == i; })
});

Resources