This is driving me nuts. Iv followed tutorials and I cant get this thing to do the simplest of actions.
Im just trying to get started. Iv got a skeleton page, a bare bones JSON file and the D3 V3 library loaded.
I can see from the inspector that everything loads fine. The JSON loads fine, but nothing happes. Im just trying to print some words into a few li elements, but i get nothing. I can see that the ul is appended to the page, but nothing else.
There's no JS errors, or anything to guide me. Just a blank page.
What am I doing wrong here?!
My Markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/vendor/d3.v3.min.js"></script>
<style>
path {
stroke: #fff;
fill-rule: evenodd;
}
</style>
<script>
function draw(data){
"use strict";
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function(d) {
return 'Cant even see this message';
});
}
</script>
<script>d3.json("json/status.json", draw);</script>
</head>
<body>
</body>
</html>
and my JSON file
{
"status": "OK",
"name": "TEST A"
}
Your var data is not in correct format. D3.js assumes you will pass list to it but you provide an object. One simple fix to get you started would be to change status.json to:
[{
"status": "OK",
"name": "TEST A"
}]
From the API docs: https://github.com/mbostock/d3/wiki/Selections#wiki-data
selection.data([values[, key]])
Joins the specified array of data with the current selection. The
specified values is an array of data values, such as an array of
numbers or objects, or a function that returns an array of values.
Related
I seem to have a very specific problem where something is missing and I just can't see it.
From and index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="./js/a1.js"></script>
<script language="javascript" type="text/javascript" src="./js/a2.js"></script>
<style>
</style>
</head>
<body onLoad="javascript:Scan()">
<div id = "TheDiv">?
</div>
</body>
</html>
From onLoad, I call Scan()
function Scan()
{
divResultado = document.getElementById('TheDiv');
//instanciamos el objetoAjax
ajaxScan=objetoAjax();
ajaxScan.open("GET", "myscan.php", true);
DBScan = setTimeout(Scan,15000 );
ajaxScan.onreadystatechange=function()
{
if (ajaxScan.readyState==4)
{
//mostrar resultados en esta capa
divResultado = ajaxScan.responseText;
}
};
ajaxScan.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxScan.send( );
}
myscan gets data from a database and in debug, I see that information is properly transfered to divResultado above.
But the data doesn't appear in the div with id = "TheDiv"
I've done this hundreds of times before, but something somwhere has made itself
invisible to me.
In the raw data HTML, I think it appears below and outside of the context.
What am I not seeing
Because you're not writing the data to the page, you're just assigning it to a variable:
divResultado = ajaxScan.responseText;
Which means divResultado no longer refers to the element on the page, it now refers to the text from the AJAX response.
To set the text to that element, try:
divResultado.innerText = ajaxScan.responseText;
Or, if the result is HTML:
divResultado.innerHTML = ajaxScan.responseText;
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'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.
ticket-item demo page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ticket-item demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../ticket-item.html">
<script>
window.addEventListener('WebComponentsReady', function() {
let element = document.getElementById('ticket-item');
element.test = 'test';
});
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic ticket-item demo</h3>
<demo-snippet>
<template>
<ticket-item id="ticket-item"></ticket-item>
</template>
</demo-snippet>
</div>
</body>
</html>
ticket-item element
<dom-module id="ticket-item">
<template>
<style include="my-theme">
:host {
display: block;
}
</style>
<div>test: [[test]]</div>
</template>
<script>
class TicketItem extends Polymer.Element {
static get is() { return 'TicketItem'; }
static get properties() {
return {
test: String
};
}
}
window.customElements.define(TicketItem.is, TicketItem);
</script>
</dom-module>
The first thing:
Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.
So, you must change the name of "item" element.
Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.
Plnkr link: works both in Firefox and Chrome.
The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.
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...