I just copy pasted this from the first example in here:
http://www.recursion.org/d3-for-mere-mortals/
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!--<script src="d3/d3.v3.js"></script>-->
<script src="/d3/d3.v3.js"></script>
<div>
<script>
var rectDemo = d3.select("#rect-demo").
append("svg:svg").
attr("width", 400).
attr("height", 300);
rectDemo.append("svg:rect").
attr("x", 100).
attr("y", 100).
attr("height", 100).
attr("width", 200);
d3.selectAll("body").append(rectDemo) ;
</script>
</div>
</body>
and it shows nothing on the page. I am sure I am doing something stupid here but this is my first example and can't figure out what is going it....
The script attempts to draw the rectangle in a svg element that's added inside the (already existing) element with id="rect-demo".
Therefore, you need to have an HTML element (for example a <div>) with the appropriate id:
<div id="rect-demo"> </div>
See this live demo: http://jsbin.com/enisen/2/edit
Related
Absolutely newbie to d3.js
I am trying out a tutorial pull off from internet which should be straight-foward but I am pulling my hair off now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://d3js.org/d3.v6.min.js"></script>
</head>
<style>
body {font-family: Arial;}
</style>
<body>
<ul id="list">
<li></li>
<li></li>
</ul>
<input type="button" name="load" value="Load List" onclick="javascript:load()"/>
<input type="button" name="remove" value="Remove Fourth Value" onclick="javascript:remove()"/>
<script>
function load() {
d3.select("#list").selectAll("li")
.data([10,20,30,25,15])
.text(function(d){console.log(d); return "This is pre-existing element and the value is " + d;})
.enter()
.append("li")
.text(function(d){return "This is dynamically created element and the value is "+d;})
}
function remove() {
d3.select("#list").selectAll("li")
.data([10,30,25,15])
.exit()
.remove()
}
</script>
</body>
</html>
The HTML page will loaded with two empty pre-defined bullet points. The list will build after you click the "Load" button which is all fine. The logic I don't quite understand is on the "remove()" function which, by providing a new version of data, shouldn't d3.js remove the 2nd item on the list? Instead, it always remove the last item on the list as if the update is based on the size of the array passed to .data() instead of the actual values
In fact the original tutorial is not working as it described. But .exit() and .remove() should be comparing the existing data with the given new data and remove the one that is missed out in the new data?
Appreciate any help here. Thanks in advance!
How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>
You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);
I'm making an html page with several examples of charts that I will be using. On the page I have a Dimple line graph, a pie chart, a wordcloud etc. When I try to add a second dimple graph - this time a bar graph, the first dimple line graph that I already have on the page is drawn on top of my bar graph:
My HTML file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Graphs</title>
<link rel="stylesheet" type="text/css" href="_/base.css">
<link rel="stylesheet" type="text/css" href="_/c3CSS.css">
<script type="text/javascript" src="_/d3.min.js"></script>
<script type="text/javascript" src="_/dimple.v2.1.0.min.js"></script>
<script type="text/javascript" src="_/c3.min.js"></script>
<script type="text/javascript" src="_/d3.layout.cloud.js"></script>
</head>
<body>
<div id="chartContainer">
<h1>Hot Topics Line</h1>
<script type="text/javascript" src=CurvyLine.js></script>
</div>
<h1>Hot Topics Pie</h1>
<div id="chart">
<script type="text/javascript" src=Pie.js></script>
</div>
<div id="wordCloud">
<h1>Clickable Word Cloud</h1>
<script type="text/javascript" src=WordCloud.js></script>
</div>
<div id="bar">
<h1>Clickable Word Cloud</h1>
<script type="text/javascript" src=WeekBar.js></script>
</div>
</body>
</html>
Without adding the bar chart at the end, the line graph displays properly at the top of the page above the pie chart. However, with the bar chart added, both the line and bar graph are drawn inside the "bar" div. Can anyone help with this please? Here is my line graph js file:
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("data/tweet_example.tsv", function (data) {
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Tweets");
var s = myChart.addSeries("Topic", dimple.plot.line);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
and here is my bar graph js file:
var svg = dimple.newSvg("#bar", 800, 410);
d3.tsv("data/tweet_example2.tsv", function (data) {
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var barChart = new dimple.chart(svg, data);
barChart.addCategoryAxis("x", ["Day", "Topic"]);
barChart.addMeasureAxis("y", "Tweets");
barChart.addSeries("Topic", dimple.plot.bar);
barChart.addLegend(65, 10, 510, 20, "right");
barChart.draw();
barChart.draw();
});
Your problem is that you are using the same global name svg to hold references to two different charts. When your second piece of code runs, it overwrites the svg value that you had from the first piece of code, and when the .tsv() callback returns, it finds a reference to the second graph.
Simplest solution: use different names for svg variable in both pieces of code: svg1 and svg2 will be fine.
Most elegant solution: use some kind of namespace management, such as wrapping both pieces of code in immediately called functions:
function() {
// your first chunk of code here
}()
function() {
// your second chunk of code here
}()
This way you will have two svg variables local to their own scopes
I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn't work:
<script type="text/javascript">
function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Please help! Thanks.
You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it's not valid to have a function that only contains html -- you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
All you're missing is a method to write the element on the page
<script type="text/javascript">
function addimage() {
document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
Now i done the ADD /Remove Elements
How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,
category which populate records from database category table, and when user select the particular category than sub category will populate from datbase sub category table,
am looking one jquery or some open which do this same work,
refer some good plugins,
How to add the element when i click the ADD Elment, please chekc my code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').append(app_str);
$("#add_element").click(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
hdn_add_element_cnt = hdn_add_element_cnt+1;
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').fadeIn(10000).append(app_str);
//Increment Elemenet ID Count +1
document.getElementById("hdn_add_element_cnt").value = hdn_add_element_cnt;
})
})
function delete_element(element_id_no){
var get_element_hidden_cnt = $("#hdn_add_element_cnt").val();
$("#element_"+element_id_no).fadeOut(100).remove();
}
</script>
</head>
<body>
<div style="width:500px; height:200px; background-color:#FF0000;">
<div id="add_element" style="width:400px; height:75px;">
ADD Element
</div>
<div id="element_area">
</div>
</div>
<input type="hidden" id="hdn_add_element_cnt" value="1" />
</body>
</html>
jQuery doesn't need plugins to do this. Standard functions work well:
.append() adds elements, so to add a <div> to the <body>, just do this:
$('body').append('<div id="foobar">This is my text</div>');
.remove() similarly removes elements, so to remove that <div> that you added, just do this:
$('#foobar').remove();
.html() and .text() can be used to set the contents of an element. .text() is usually for setting the displayed text, and .html() is for adding content elements:
$('#foobar').text('Hello');
$('#foobar').html('<h1 class="foo">Hello</h1>');
Your question is really vague, so I'm not sure what else to say.