d3 - geomaps hover option - javascript

I am creating a geographical map of USA using d3 geomaps.
I want a state to be highlighted when I hover over the state. Is that possible?
Here's my current code:
<html>
<head>
<meta charset="utf-8">
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
var map = d3.geomap.choropleth()
.geofile('d3-geomap/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv('data.csv', function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>

Yes you can, check out this JSFiddle I've made : http://jsfiddle.net/b6huwcd7/1/
All i've done is adding this CSS code to the example code :
path.unit:hover{
fill:red;
}

based on #black0ut 's response, here's the answer:
<html>
<head>
<meta charset="utf-8">
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<style>
path.unit:hover{
fill:red;
}
</style>
<body>
<div id="map"></div>
</body>
</html>
<script>
var map = d3.geomap.choropleth()
.geofile('d3-geomap/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv('data.csv', function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>

Related

Print or Export Cesium Map Loading Division

It prints with this code but, the code is actually unable to get contents of the div where the map actually loads. I'm using toDataURL() in order to fulfill the need.
My HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
My CSS is as follows:
body
{
background-color: wheat;
}
canvas
{
border:1px solid red;
width: 100%;
height: 100px;
}
#cesiumContainer
{
width: 100%;
height: 500px;
}
My JavaScript is as follows:
$(function()
{
var viewer = document.getElementById("cesiumContainer");
function print_voucher()
{
var win = window.open();
win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
});
See the Output what I get with this above code.
Click here to visit the GitHub Project Link.
The problem was because by the time you're taking the screenshot, the WebGL drawing buffer has already been swapped out. This happens for performance reasons, you can read more about it here:
https://stackoverflow.com/a/32641456/1278023
The issue has been fixed by changing some lines of codes as follows:
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
Here is the full set of HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX';
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
</script>
</body>
</html>
Find the updated GitHub project Link

d3.geomap is undefined in Grails application

I am using d3.geomap in Grails to create a map of the US.
As said in https://d3-geomap.github.io/ my gsp look like:
<html>
<head>
<meta name="layout" content="main" charset="utf-8">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'd3.geomap.css')}" type="text/css">
<g:javascript src="d3.geomap.dependencies.min.js" />
<g:javascript src="d3.geomap.min.js" />
</head>
<body>
<script>
var map = d3.geomap.choropleth()
.geofile('/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv("mapusa", function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>
<div id="map"></div>
</body>
</html>
The css file d3.geomap.css is under web-app/css.
The js files d3.geomap.dependencies.min.js and d3.geomap.min.js are under web-app/js.
Under grails-app/views/ I have the topojson folder.
When I run the page it gives me:
Uncaught TypeError: Cannot read property 'choropleth' of undefined
d3.geomap is undefined.
Any ideas?
Thanks in advance.
In my main.gsp I have:
<script src="http://d3js.org/d3.v3.min.js"></script>
When I remove this, then d3.geomap has value and show the US map. I am not sure why they enter in conflict.
Try this code below, you will get your desired output of world map. Similarly, you can do it for US maps.
<head>
<meta charset="utf-8">
<link href="https://d3-geomap.github.io//d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="https://d3-geomap.github.io//d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="https://d3-geomap.github.io//d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap().geofile('https://d3-geomap.github.io//d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>

Changing Pie chart proportions using jChartFX

any ideas how to change the chart proportions relative to its parent chart div?
Currently it looks like this
... and it should look something like this
The code used as a base for this example can be found here
http://support.softwarefx.com/jChartFX/article/2501235#27182674-0690-e211-84a5-0019b9e6b500
HTML
<!DOCTYPE html>
<html>
<head>
<title>Customized Tooltips</title>
<link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>
<link rel="stylesheet" type="text/css" href="sample.css"/>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector3d.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>
</body>
</html>
var chart1;
function onLoadDoc() {
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
chart1.getAnimations().getLoad().setEnabled(true);
var pie = chart1.getGalleryAttributes();
pie.setExplodingMode(cfx.ExplodingMode.First);
chart1.getView3D().setEnabled(true);
chart1.getLegendBox().setVisible(true);
//...
}
You can use the margin properties:
chart1.getPlotAreaMargin().setTop(0);
chart1.getPlotAreaMargin().setBottom(0);
chart1.getPlotAreaMargin().setRight(0);
chart1.getPlotAreaMargin().setLeft(0);

Google maps with JQuery Mobile and jquery-ui-map

I'm using the jQuery UI Map libary (https://code.google.com/p/jquery-ui-map/) to display a map on my html5 mobile website, however i'm only getting a grey square no matter what i try.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>test</title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="https://local url/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://local url/js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="content">
<p>
TEST SITE
</p>
<p>
<canvas id="map_canvas" style="width:50%;height:50%"></canvas>
</p>
</div>
</div>
<script>
$(document).ready(function()
{
$('#map_canvas').gmap();
$('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });
$('#map_canvas').gmap({ 'zoom': 8 });
$('#map_canvas').gmap('refresh');
});
</script>
</body>
</html>
The result i get is this:
http://upload.mattie-systems.nl/uploads/28217-knipsel.png
Any help would be greatley appreciated!
Solution
Map can't be shown on canvas element, it must be DIV like this:
<div id="map_canvas"></div>
Also don't use percentages for map height, ether use px, em or use css like in my example to fill working page.
Working HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<style>
#map_canvas {
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<script>
$(document).on('pageshow', '#main', function() {
$('#map_canvas').gmap();
$('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });
$('#map_canvas').gmap({ 'zoom': 8 });
$('#map_canvas').gmap('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="content">
<p>
TEST SITE
</p>
<p>
<div id="map_canvas"></div>
</p>
</div>
</div>
</body>
</html>
If you want to find more about this topic + examples then take a look at this ARTICLE.

jQuery works in jsfiddle, but not in html file?

I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.

Categories