xxxxxxxxxx
<meta charset="utf-8">
<html>
<head>
<style>
.axis {
font-size: 10px;
}
.axis path {
fill: none;
stroke: #000000;
}
.axis .tick line {
stroke: #000;
}
.states {
fill: #ccc;
stroke: #fff;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="scatter.js"></script>
<script src="brush.js"></script>
<script src="symbol_map.js"></script>
<script src="miso.ds.deps.0.4.1.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
var Vis = {};
Vis.data = new Array();
//https://bl.ocks.org/mbostock/4342045
var width = 960,
height = 500;
var data;
var SPREADSHEET_ID = "0Agy_OAo_DS4PdFlrdVR1X2Nub1U3VnE0X0xBemI1eUE";
var SPREADSHEET_TAB = "1";
var json_file = "pics5.json";
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var mapgroup = svg.append("g")
;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([700, 230])
.scale([500]);
var path = d3.geo.path()
.projection(projection);
queue()
.defer(d3.json, "us.json")
.await(ready);
function ready(error, us) {
mapgroup.append("path")
.attr("class", "states")
.datum(topojson.feature(us, us.objects.states))
.attr("d", path);
loadJson(json_file);
//loadGSS(SPREADSHEET_ID, SPREADSHEET_TAB);
}
function createDiagram() {
var sgroup = svg.append("g")
.attr("transform", "translate(50, 0)")
var scatter = d3.chart.scatter()
scatter.data(Vis.data)
scatter(sgroup)
var symbol_map = d3.chart.symbol_map()
symbol_map.data(Vis.data)
symbol_map(mapgroup)
//brush
var bgroup = svg.append("g")
.attr("transform", "translate(100, 430)")
var brush = d3.chart.brush()
brush
.data(Vis.data)
.width(800)
brush(bgroup)
brush.on("filter", function(filtered) {
scatter.data(filtered);
scatter.update();
symbol_map.data(filtered)
symbol_map.update();
})
scatter.on("hover", function(hovered) {
brush.highlight(hovered)
symbol_map.highlight(hovered)
})
symbol_map.on("hover", function(hovered) {
scatter.highlight(hovered)
brush.highlight(hovered)
})
}
function loadJson(file_name) {
d3.json(file_name, function(error, file_data) {
Vis.data = file_data;
Vis.data.forEach(function(d) {
d.created *= 1000;
});
createDiagram();
});
}
function loadGSS(ssid, tab) {
//connect to spreadsheet
var lsheet = new Miso.Dataset({
importer : Miso.Dataset.Importers.GoogleSpreadsheet,
parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
key : ssid,
worksheet : tab
});
//load data from spreadsheet
lsheet.fetch({
success : function() {
this.each(function(row){
Vis.data.push(row);
});
Vis.data.forEach(function(d) {
d.created *= 1000;
});
createDiagram();
},
error : function() {
console.log("Data failed to load from GSS.");
}
});
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
https://d3js.org/d3.v3.js
https://d3js.org/topojson.v1.min.js
https://d3js.org/queue.v1.min.js