Trying to create simple svg canvas using D3 but looking at elements in the console nothing shows up. D3 seems to be loading because from the console when I type d3. I get the options and methods available in D3. But the svg canvas is not being drawn. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bar Chart</title>
<style>
</style>
</head>
<body>
<div id="chart"></div>
<script src="d3.v3.js">
var w = 500;
var h = 500;
function drawSVG(s) {
var svg = d3.select("#chart")
.append("svg")
.attr("width",w)
.attr("height",h);
console.log(s);
}
var sampleStr = "hello";
drawSVG(sampleStr);
</script>
</body>
</html>
You've placed your code within the script tag that has its source attribute set to download D3:
<script src="d3.v3.js">
... your code is here
</script>
You need to place your code in its own script tag:
<script src="d3.v3.js"></script>
<script>
... your code should go here
</script>
Related
I have two questions.
Is it possible to still show the not selected data in corresponding scatter plot. Where there can be two scatters around the selected data points that the other data points stay or if there can be a color.
Is it possible to have multiple brushes in dc.js. Where I can select one part of data and do that again on another place in the same scatter plot.
For question 1
This is before the selection:
This after selection on graph. I would still like the not selected one to still appear:
What I would like for question 1
Here is my code sample:
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Scatter Plot Brushing Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/dc.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="header.js"></script>
<p>Brush on one chart to see the points filtered on the other.</p>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript">
var chart1 = dc.scatterPlot("#test1");
var chart2 = dc.scatterPlot("#test2");
var data = "x,y,z\n" +
"1,1,3\n" +
"5,2,11\n" +
"13,13,13\n"+
"5,3,20\n"+
"12,12,10\n"+
"3,6,8\n"+
"15,2,9\n"+
"8,6,14\n"+
"1,4,9\n"+
"8,8,12\n";
var data = d3.csvParse(data);
data.forEach(function (x) {
x.x = +x.x;
x.y = +x.y;
x.z = +x.z;
});
var ndx = crossfilter(data),
dim1 = ndx.dimension(function (d) {
return [+d.x, +d.y];
}),
dim2 = ndx.dimension(function (d) {
return [+d.y, +d.z];
}),
group1 = dim1.group(),
group2 = dim2.group();
chart1.width(300)
.height(300)
.x(d3.scaleLinear().domain([0, 20]))
.yAxisLabel("y")
.xAxisLabel("x")
.clipPadding(10)
.dimension(dim1)
.excludedOpacity(0.5)
.group(group1);
chart2.width(300)
.height(300)
.x(d3.scaleLinear().domain([0, 20]))
.yAxisLabel("z")
.xAxisLabel("y")
.clipPadding(10)
.dimension(dim2)
.excludedColor('#ddd')
.group(group2);
dc.renderAll();
</script>
</div>
</body>
</html>
A1) That will be pretty difficult because dc.js sets the d of the paths of the not selected symbols in the other chart to d="M0,0". That means no path at all and all the symbols are now in the origin of the chart.
Edit
Looking at the code and after a little experiment I found if you add these then the other dots are visible
.emptySize(3)
.emptyOpacity(0.5)
The name is not very explanatory.
I am trying to make a bar chart using dc.js. Users are able to select a portion of the data by clicking and dragging on a filter. However, the difficulty is that when this happens, on my website, the filter is completely black and the data selected is obscured:
What should happen is, the filter should be partially transparent, as in this example from the home page of dc.js, so that the selected data can still be seen.
Here is the sample code which I am using to generate my page. I am using Crossfilter version 1.3.14, d3.js version 3.5.17 and dc.js 2.1.9.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/dc.css.min"/>
</head>
<body>
<div id="graph"></div>
<script type="text/javascript" src="static/d3.js"></script>
<script type="text/javascript" src="static/crossfilter.js"></script>
<script type="text/javascript" src="static/dc.min.js"></script>
<script type="text/javascript">
var data = "data/page.csv";
d3.csv(data, function(error, records) {
var ndx = crossfilter(records);
var keyDimension = ndx.dimension(function(d) {return d.key;});
var valueGroup = keyDimension.group().reduceCount();
var graph = dc.barChart("#graph");
graph.width(500)
.height(300)
.x(d3.scale.linear().domain([0,15]))
.xUnits(function(){return 50;})
.dimension(keyDimension)
.group(valueGroup);
graph.render();
});
</script>
</body>
I replaced the minified dc files (dc.min.css, dc.min.js, dc.min.js.map) with their full equivalents (dc.css, dc.js, dc.js.map) downloaded from Github, and now the filter displays as normal.
I am learning D3.js, and I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Graphic</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>
I am using Chrome as a browser on my mac. Am I making an obvious mistake? Thank you!
There is nothing really wrong per-se with your code, other than the fact that it will do nothing (and I personally would put the 'script src' tag in the head section). You have simply written a HTML document which then loads in the D3.JS Javascript library.
What you now need to do is start using the library by issuing some D3 commands to create HTML/DOM elements from data. There is plenty to read up on the internet (try dashingd3js.com) but to get you started here is a v.simple starter for 10 expanding on your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Column Chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chartarea"></div>
<script type="text/javascript">
// Some random data
var data = [0.27, 0.5, 0.1, 0.15, 0.3, 0.21, 0.25, 0.94, 0.04, 1.00];
var svg = d3.select('#chartarea')
.selectAll('div')
.data(data)
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function (d) {
return d * 400 + 'px';
});
</script>
</body>
</html>
The above should create a v.simple column chart using HTML DIV's. You can then move on to more advanced implementations to generate SVG components.
Also see example here:
http://bl.ocks.org/jamesleesaunders/260cf482c8a56d49dfa6
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'm using Kartograph.js to load svg map. But I get the following error when page loads:
Uncaught TypeError: Cannot read property 'getAttribute' of undefined
View.fromXML
Kartograph._mapLoaded
j
k.fireWith
x
b
Here is my Code:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="kartograph.js"></script>
<script type="text/javascript">
function loadMap(){
var map = kartograph.map('#map', 600, 0);
map.loadMap('World.svg')
}
</script>
</head>
<body onLoad="loadMap()">
<div id="map"></div>
</body>
</html>
You need to define the metadata on the svg file.
For example:
<metadata><views><view h="604.816027229" padding="0" w="1000"><proj id="laea-usa" lat0="45" lon0="-100"/><bbox h="321.76" w="532.88" x="746.23" y="918.78"/></view></views></metadata>
If you created the svg with kartograph.py, you might need to add the layers added in the svg as follow:
function loadMap(){
var map = kartograph.map('#map', 600, 0);
map.loadMap('World.svg', function() {
map.addLayer('your_first_layer');
map.addLayer('your_second_layer');
});
}
To find the name of the layers to be added:
Open your svg file as text, for exemple in Firefox and use rightclick, page inspector.
On the second line you'll see : svg > g#something > ...
The name of one of the layer is the "something" after "g#". In the code it is the "id" of the "g" element.
Hope this might help you...