Display Map with D3 - javascript

I am trying to display a map on my webpage using D3. The geo data is present in a geojson file. I am using the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<!--<LINK rel="stylesheet" href="style.css" type="text/css">-->
<script type="text/javascript" src="../jslibs/d3_source/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
</script>
</head>
<body>
<script type="text/javascript">
d3.select("body")
.append("p")
.text("D3 is working");
//Variables
var map_width = 960;
var map_height = 1160;
//Append svg
var svg = d3.select("body").append("svg") /*D3 is async. Do this in head to avoid page reorganisation when map arrives*/
.attr("width", map_width)
.attr("height", map_height);
var projection = d3.geo.mercator()
.scale((map_width + 1) / 2 / Math.PI)
.translate([map_width / 2, map_height / 2])
.precision(.1); //Define projection
var path = d3.geo.path().projection(projection); //Define path generator
var g = svg.append("g");
d3.json("./data/MyGeoJSON.geojson", function(error, ug) {
if (error) return console.error(error);
console.log(ug);
g.selectAll("path")
.data(ug.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
</html>
I am just getting a blank SVG element on my page. No map is getting rendered. I have checked the validity of my GeoJSON file on http://geojsonlint.com/ and http://geojson.io/. Also, I can see the geojson object on the developer console.
I have looked at a few tutorials online and also on StackOverflow and I am not sure where I am going wrong.

Related

D3 - How can I put an SVG into a DIV via a function?

To reuse code I want to put my SVG into a function and call it as needed. Once I select the DIV what is the appropriate construct to render the SVG inside it?
...
if (intLocations.includes(comm.location)) {
const intActivities = d3.select('div#intActivities')
intActivities.append(Pill(comm))
} else {
const extActivities = d3.select('div#extActivities')
actActivities.append(Pill(comm))
}
...
function Pill(comm) {
const svgNode = d3.create('svg')
svgNode
.attr('width', 100)
.attr('height', 100)
.append('g')
// More code to draw the figure using comm data.
return svgNode;
}
intActivities.append(() => Pill(comm).node()) should do the trick. Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<div id="my-div"></div>
<script>
d3.select('#my-div').append(() => square().node());
function square() {
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100);
svg.append('rect')
.attr('width', 100)
.attr('height', 100)
.attr('fill', 'navy');
return svg;
}
</script>
</body>
</html>
Alternatively, you could pass your Pill function the div selection that you want to add it to.

Trying to convert Stacked BarPlot from D3 to Aframe

As the title suggests, I am trying to convert a Stacked BarPlot from D3 (version 4) to Aframe (using the AR.js library).
The D3 example I am using can be found here:
https://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html
When I run the code in the browser, I can see 4 boxes (squares), stacked on top of the other corresponding boxes, however in a weird, layered fashion. I believe this is due to my 'scale' and 'position' attributes which are incorrectly reading in the data and rendering like they should. Or perhaps it's how I appended the "a-entity" and then "a-box" to my "a-scene". Or perhaps it's neither / both (?)
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-
ar.min.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-
extras.loaders.min.js"></script>
<script>
THREEx.ArToolkitContext.baseURL =
'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
</script>
<script src="https://unpkg.com/aframe-animation-component#3.2.5/dist/aframe-
animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-randomizer-components#3.0.2/dist/aframe-
randomizer-components.min.js"></script>
<script src="https://unpkg.com/aframe-entity-generator-component#3.0.1/dist/aframe-
entity-generator-component.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-
component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<div id="data_by_age"></div>
<a-scene vr-mode-ui="enabled: false" embedded arjs='sourceType: webcam;
sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;
debugUIEnabled: false;'>
<a-entity gps-entity-place="longitude: -73.766327; latitude: 41.032730;">
<a-cursor fuse="true" color="yellow"></a-cursor>
</a-entity>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
<script type="text/javascript">
byAge();
function byAge() {
var scene = d3.select("a-scene");
d3.csv("../static/sample.csv", function(data) {
var subgroups = data.columns.slice(1)
var groups = d3.map(data, function(d){return(d.group)}).keys()
var color = d3.scaleOrdinal()
.domain(subgroups)
.range(['#011f4b','#03396c','#005b96', '#6497b1', '#b3cde0'])
var stackedData = d3.stack()
.keys(subgroups)
(data)
var data_scle = [];
var data_pos = [];
scene
.append("a-entity")
.selectAll("a-entity")
.data(stackedData)
.enter()
.append('a-entity')
.attr("fill", function(d) { return color(d.key); })
.selectAll("a-box")
.data(function(d) { return d; })
.enter().append("a-box")
.attr('rotation', '0 180 0')
.attr('scale', function (d,i) {
return d + " " + d + " " + d;
})
// .attr('scale', function (d,i) {
// var x = i * 10;
// var y = d;
// var z = d;
// data_scle[i] = {"x": x, "y": y, "z": z};
// return x+" "+y+" "+z;
// })
.attr('position', function(d,i) {
var x = i * 175;
// var y = 0;
var y = d;
var z = -500;
data_pos[i] = {"x": x, "y": y, "z": z};
return x+" "+y+" "+z;
})
})
};
</script>
</body>
</html>
Here is my csv file:
group, stronglyAgree, somewhatAgree, stronglyDisagree, notSureNoOpinion
eighteen, 21, 22, 11, 18, 28
thirtyfive, 33, 29, 11, 5, 22
fortyfive, 36, 23, 9, 8, 24
sixtyfive, 42, 24, 7, 10, 17
I've also seen github repos tailored specifically for making stacked bar chart components in Aframe, however I couldn't seem to get it to work properly.
https://github.com/fran-aguilar/a-framedc/tree/master/src/components/barchartstack
Any help would be immensely appreciated.

using simpleheat.js for a geoheatmap with D3

Trying to layer a geo-heatmap using simpleheat.js and D3.
Working off an example (https://bl.ocks.org/patricksurry/803a131d4c34fde54b9fbb074341daa5). I am Successful at drawing the map but not the points as heatmap. No error on console.log.
I get one rainbow colored blob (I overdid the radius) on the upper left corner next to the map.
Could not find many examples and documentation on simpleheat is scant. Would appreciate any insight into this.
Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
#container svg, #container canvas {
position: absolute;
top: 0;
}
</style>
<meta charset="utf-8">
<title>D3 Map Example</title>
</head>
<body>
<div id= "container">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src = "node_modules/simpleheat/simpleheat.js"></script>
<script>
//Width and height
var w = 960;
var h = 600;
div = d3.select("#container")
mapLayer = div.append('svg')
.attr("id","map")
.attr("width",w)
.attr("height",h)
canvasLayer = div.append('canvas').attr('id', 'heatmap').attr('width', w).attr('height', h);
var canvas = canvasLayer.node(),
context = canvas.getContext("2d");
//Define map projection
var projection = d3.geoMercator()
.center([ -120, 37 ])
.translate([ w/2, h/2 ])
.scale([ 2600 ]);
//Define path generator
var path = d3.geoPath()
.projection(projection)
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
// read data in
d3.queue()
.defer(d3.json,"ca.json")
.defer(d3.csv, "heatCAN.csv")
.await(main)
function main (err, ca, heatCAN) {
console.log(heatCAN)
mapLayer
.append('svg')
.selectAll("path")
.data(ca.features)
.enter()
.append("path")
.attr("d",path)
.attr("stroke","#000000")
.attr("fill","#ffffff")
//add heatmap
simpleheat(canvas).data(heatCAN.map(x=>[x.LON,x.LAT,x.cMort_90d])).radius(100,100).draw(0.05);
}
</script>
</body>
</html>

Simple Bar Plot with dimple.js and d3.js

I'm working on a very basic bar plot with dimple.js. When I render in the browser, it shows only the axes and axis labels, but no bars. Any help appreciated. I am using python to create a localhost.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
</head>
<body>
<h2> Rise of the Machines: R&D on Unmanned Aerial Aircrafts</h2>
<script src="index.js"></script>
</body>
</html>
index.js
function draw(data) {
/*
D3.js setup code
*/
var margin = 75;
var width = 1400 - margin;
var height = 600 - margin;
/* Find body tag, append svg, and add chart group tag*/
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append("g")
.attr("class","chart");
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
x = myChart.addCategoryAxis("x", "");
y = myChart.addMeasureAxis("y", "Share of Global Spending (%)");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
};
d3.csv("data.csv", draw);
You'd not tell to dimple where to get the data:
x = myChart.addCategoryAxis("x", ""); //<---- X values
y = myChart.addMeasureAxis("y", "Share of Global Spending (%)"); // <--- Y values
example
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
another example
var data = [
{ "data1":"Hello", "data2":2000 },
{ "data1":"World", "data2":3000 }
];
chart.addCategoryAxis("x", "data1");
chart.addMeasureAxis("y", "data2");
You must point to data origin, from csv column name. With your csv:
Xdata, Yvalue
1,10
2,20
3,30
4,20
Your code:
chart.addCategoryAxis("x", "Xdata");
chart.addMeasureAxis("y", "Yvalue");
On the dimple website, it seems to be recommended procedure to use .tsv (tab seperated values) as opposed to comma seperated values.
Here is a sample (vertical) bar chart code taken from the site
<html>
<div id="chartContainer">
<script src="/lib/d3.v3.4.8.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 330)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(65, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>
</html>
Hopefully, this will guide you in the right direction.

Blank web page without any error while loading json file

I am running this below simple code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;1
var h = 300;
//Define default path generator
var path = d3.geo.path();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("india.json", function(error,json) {
console.log(json);
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
</html>
When i run it, i am getting the blank web page without any error. india.json file is a valid json file, i verified it in http://jsonlint.com/
I am new to javascript. Any help would be greatly appreciated.
Thanks,
Finally, after many trails, i found the solution an it was problem with projection, so i have used the below code and it worked.
//Width and height
var w = 960
var h = 1000
//Define map projection
var projection = d3.geo.mercator()
.translate([w/2,h/2])
.scale(5000);
//Define path generator
var path = d3.geo.path()
.projection(projection);

Categories

Resources