Sundials Project

8/23/2017 - 6:56 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!--<!DOCTYPE html>-->
<html>
<meta charset="UTF-8">
<head>

<!--<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />-->
<!--<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/103327358/leaflet.css" />-->
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/103327358/w2ui-1.2.min.css" />
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/103327358/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/103327358/w2ui-1.2.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/103327358/d3.v3.js"></script>
<script src="https://dl.dropboxusercontent.com/u/103327358/crossfilter.js"></script>

<!--######################################-->
<!--hier der Aufruf der Javascripte      #-->
<!--######################################-->

<script src="Material.js"></script>
<script src="FilterAll.js"></script>
<script src="Datum.js"></script>
<script src="Typ.js"></script>

<style>
<!--svg {
border: solid 1px #ccc;
font: 10px sans-serif;
shape-rendering: crispEdges;
}-->
</style>
</head>
<div id="filter"></div>
<div id="grid" style="width: 100%; height: 250px;"></div>
<div id="layout" style="width: 95%; height: 400px;"></div>

<!--####################################################-->
<!--hier der Aufruf der Identifizierung                #-->
<!--####################################################-->

<div id="typ"></div><div id="typ"></div>
<div id="datum"></div><div id="datum"></div>
<div id="material"></div><div id="material"></div>
<div id="filterTable"></div><div id="filterTable"></div>
<div id="simpleMap"></div><div id="simpleMap"></div>
<div id="filterLogikMaterial"></div><div id="filterLogikMaterial"></div>
<div id="filterLogikDatum"></div><div id="filterLogikDatum"></div>

<!--####################################################-->
<!--Hier das eigentliche Script                        #-->
<!--####################################################-->

<script type="text/javascript">
var data;
/////////////////////////////////
//HIER DIE FIXEN GROESSEN      //
/////////////////////////////////
//############################################
//lade die Daten                             #
//############################################
//d3.json("https://dl.dropboxusercontent.com/u/103327358/sundials.json", function(json) {
d3.json("https://dl.dropboxusercontent.com/u/103327358/Sundials2.json", function(json) {
data=json;

/////////////////////////////////
//HIER DIE DYNAMISCHEN GROESSEN//
/////////////////////////////////
//############################################
//definiere die Filterlogik und die Ausgabe  #
//############################################
datumSelection(data);
materialSelection(data);
typSelection(data);
$(document).ready(function() {

var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 450, style: pstyle, content: '<div id="grid" style="height: 120%"></div>' },
{ type: 'left', size: 450, style: pstyle, content: '<div id="metadata" style="height: 120%"></div>' },
]}); 
});

});

</script>
</html>

Typ.js

function typSelection()
{

//$('#filterTyp').show();
var w = 360,
h = 250
 
//item Typ.1.1
//############################################################
//die naechsten Zeilen sind wichtig fuer die Interaktion     #
//der svg #typ identifiziert die diafacetype Selektion       #
//wenn diese Funktion aufgerufen werden soll, dann muss im   #
//ausfuehrenden Skript die folgende Bedingung gesetzt werden:#
// <div id="typ"></div>                                 #
//############################################################

var svg = d3.select("#typ").append("svg:svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h )
.append("svg:g")
.attr("transform", "translate(10,170)");
 
x = d3.scale.ordinal().rangeRoundBands([0, w-20])
y = d3.scale.linear().range([0, h-20])
z = d3.scale.ordinal().range(["blue"])

//Zwei Spalten (id, Anzahl der Sonnenuhren)

var matrixTyp = [
[ 1, 18.5],
[ 2, 18.2],
[ 3, 1.1],
[4, 9.9]
];

var remapped =["c1"].map(function(dat,i){
return matrixTyp.map(function(d,ii){
return {x: ii, y: d[i+1] };
})
});
var stacked = d3.layout.stack()(remapped)
x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
 

var valgroup = svg.selectAll("g.valgroup")
.data(stacked)
.enter().append("svg:g")
.attr("class", "valgroup")
.style("fill", function(d, i) { return z(i); })
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

var listTyp=["sphere", "cone","cylinder", "plane"];
var label = svg.selectAll("text")
      .data(x.domain())
      .enter().append("svg:text")
      .attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
      .attr("y", 6)
      .attr("text-anchor", "middle")
      .attr("dy", ".71em")
      .text(function(d) {return listTyp[d]});

var typ="None";
var crossdata;
var tag;

d3.json("https://dl.dropboxusercontent.com/u/103327358/crossfilter.json", function(json) 
{
    var checkTyp=[];
    crossdata=json;
    var xf = crossfilter(crossdata);
    var tags = xf.dimension(function(d) {
	    return d.tags});
    
// Add a rect for each date.
    var rect = valgroup.selectAll("rect")
	.data(function(d){return d;})
	.enter().append("svg:rect")
	.on("click", function(d){
	    typ=listTyp[d.x],
	    runTyp(typ)
	    })
	.attr("x", function(d) { return x(d.x); })
	.attr("y", function(d) { return -y(d.y0) - y(d.y); })
	.attr("height", function(d) { return y(d.y); })
	.attr("width", x.rangeBand());
    
    });

    function runTyp() {
	
	checkTyp=[];
	checkID=[];
	for(d=0; d<528 ;d++)
	{
	    if(data[d].dialface_shape==typ) {checkTyp.push(d);}
	    else {checkTyp.push(-1)} 
	    ;}
	filterLogicTyp(checkTyp, data, typ);
    };
};

README.md

Rendered
Source

Klicke auf die Balken im Histogram und diese Eigenschaft wird abgefragt. Die Tabelle erscheint bei erster Abfrage. In diesem Fall werden alle drei Informationen abgefragt. Es erscheinen dann die Objekte in der Tabelle, die diese Eigenschaft erfüllen. Klicken auf die Zeilen der Tabelle erzeugt die Metadaten.

Material.js


function materialSelection(data)
{

$('#filterMaterial').show();
var w = 360,
h = 250
 
//item Material.1.1
//############################################################
//die naechsten Zeilen sind wichtig fuer die Interaktion     #
//der svg #typ identifiziert die diafacetype Selektion       #
//wenn diese Funktion aufgerufen werden soll, dann muss im   #
//ausfuehrenden Skript die folgende Bedingung gesetzt werden:#
// <div id="material"></div>                                 #
//############################################################

var svg = d3.select("#material").append("svg:svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h )
.append("svg:g")
.attr("transform", "translate(10,170)");
 
x = d3.scale.ordinal().rangeRoundBands([0, w-20])
y = d3.scale.linear().range([0, h-20])
z = d3.scale.ordinal().range(["red"])

//Zwei Spalten (id, Anzahl der Sonnenuhren)

var matrix = [
[ 1, 5.2],
[ 2, 22.5],
[ 3, 3.4],
[ 4, 1.4]
];

var remapped =["c1"].map(function(dat,i){
return matrix.map(function(d,ii){
return {x: ii, y: d[i+1] };
})
});
var stacked = d3.layout.stack()(remapped)
x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
 

var valgroup = svg.selectAll("g.valgroup")
.data(stacked)
.enter().append("svg:g")
.attr("class", "valgroup")
.style("fill", function(d, i) { return z(i); })
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

    var listMaterial=["limestone", "marble", "stone","travertine"];
    var label = svg.selectAll("text")
      .data(x.domain())
      .enter().append("svg:text")
      .attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
      .attr("y", 6)
      .attr("text-anchor", "middle")
      .attr("dy", ".71em")
      .text(function(d) {return listMaterial[d]});

    var material="None";
    var crossdata;
    var tag;
    var tags;
    var xf;

    d3.json("https://dl.dropboxusercontent.com/u/103327358/crossfilter.json", function(json) 
	    {
		var checkMaterial=[];
		crossdata=json;
		xf = crossfilter(crossdata);
		tags = xf.dimension(function(e) {
		    return e.tags});
		
		var rect = valgroup.selectAll("rect")
		    .data(function(d){return d;})
		    .enter().append("svg:rect")
		    .on("click", function(d){
			material=listMaterial[d.x],
			runMaterial(material)
			
		    }
		       )
		    .attr("x", function(d) { return x(d.x); })
		    .attr("y", function(d) { return -y(d.y0) - y(d.y); })
		    .attr("height", function(d) { return y(d.y); })
		    .attr("width", x.rangeBand());
		
	    });
    
    function runMaterial() {

	checkMaterial=[];
	checkID=[];
	for(d=0; d<528 ;d++)
	{
	    if(data[d].material==material) {checkMaterial.push(d);}
	    else {checkMaterial.push(-1)}    
	    ;}

	filterLogicMaterial(checkMaterial, data, material);
    };
};

FilterAll.js

var CheckMaterial=[];
var CheckDatum=[];
var CheckTyp=[];
var CheckID=[];
var Material=[];
var Datum=[];
var Typ=[];
var filterdata=[];
var filterDatum=[];
var filterMaterial=[];
var filterTyp=[];
var filterDatumMaterial=[];
var filterDatumTyp=[];
var filterTypMaterial=[];
var activateMat=false;
var activateDat=false;
var activateTyp=false;

function filterLogicMaterial(checkMaterial,checkID, data,material)
{
    var svg = d3.select("#filterLogikMaterial").append("svg:svg");
    CheckMaterial=checkMaterial;
    Material=material;
    filterAll(CheckMaterial);
};

function filterLogicDatum(checkDatum,checkID, data, datum)
{
    var svg = d3.select("#filterLogikDatum").append("svg:svg");
    CheckDatum=checkDatum;
    Datum=datum;
    filterAll(CheckDatum);
};

function filterLogicTyp(checkTyp, checkID, data, typ)
{
    var svg = d3.select("#filterLogikTyp").append("svg:svg");
    CheckTyp=checkTyp;
    Typ=typ;
    filterAll(CheckTyp);
};

function filterAll()
{
    var svg = d3.select("#filterTable").append("svg:svg");
    filterdata=[];
    filterDatum=[];
    filterMaterial=[];
    filterTyp=[];
    filterDatumMaterial=[];
    filterDatumTyp=[];
    filterTypMaterial=[];

    //Filterabfrage#########################
    for(var d=0;d<528; d++)
    {
	//full trigger########################################################################################################################
	if((CheckMaterial[d]>0 && CheckDatum[d]>0 && CheckTyp[d]>0 && data[CheckTyp[d]].dialface_shape!="Null" &&  data[CheckDatum[d]].dating!="Null" && data[CheckMaterial[d]].material!="Null"))
	{
            filterdata.push({recid: data[d].objectsID, typ: data[CheckTyp[d]].dialface_shape, date: data[CheckDatum[d]].dating, material: data[CheckMaterial[d]].material, site: data[d].site});
	    //####################################################################################################################################
	};
    };
    fillAll(filterdata);
};

function fillAll(filterdata){
    $('#grid').w2destroy();
    $('#grid').w2grid({
        name: 'grid',
        header: 'All',
        columns: [
            /*{ field: 'id', caption: 'ID', size: '30%' },*/
	    { field: 'typ', caption: 'Typ', size: '40%' },
	    { field: 'date', caption: 'Datum', size: '40%' },
            { field: 'material', caption: 'Material', size: '40%' },
	    { field: 'site', caption: 'Fundort', size: '40%' },
	],
        records: filterdata,
	onClick: function (target, eventData) {
	    $('#metadata').load('http://www.ancient-astronomy.org/webapplications/sundials/objects.php?objectid='+eventData.recid, function() {});
	    return eventData;
	}
    });
};

Datum.js

function datumSelection()
{

//$('#filterDatum').show();
var w = 360,
h = 250
 
//item Datum.1.1
//############################################################
//die naechsten Zeilen sind wichtig fuer die Interaktion     #
//der svg #typ identifiziert die diafacetype Selektion       #
//wenn diese Funktion aufgerufen werden soll, dann muss im   #
//ausfuehrenden Skript die folgende Bedingung gesetzt werden:#
// <div id="datum"></div>                                 #
//############################################################

var svg = d3.select("#datum").append("svg:svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h )
.append("svg:g")
.attr("transform", "translate(10,170)");
 
x = d3.scale.ordinal().rangeRoundBands([0, w-20])
y = d3.scale.linear().range([0, h-20])
z = d3.scale.ordinal().range(["green"])

//Zwei Spalten (id, Anzahl der Sonnenuhren)

var matrixDatum = [
[ 1, 3.0],
[ 2, 0.5],
[ 3, 0.0],
[4, 0.2]
];

var remapped =["c1"].map(function(dat,i){
return matrixDatum.map(function(d,ii){
return {x: ii, y: d[i+1] };
})
});
var stacked = d3.layout.stack()(remapped)
x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
 

var valgroup = svg.selectAll("g.valgroup")
.data(stacked)
.enter().append("svg:g")
.attr("class", "valgroup")
.style("fill", function(d, i) { return z(i); })
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

var listDatum=["1st cent. CE", "3rd cent. BCE", "2rd cent. BCE","6th cent. CE"];
var label = svg.selectAll("text")
      .data(x.domain())
      .enter().append("svg:text")
      .attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
      .attr("y", 6)
      .attr("text-anchor", "middle")
      .attr("dy", ".71em")
      .text(function(d) {return listDatum[d]});

var datum="None";
var crossdata;
var tag;

d3.json("https://dl.dropboxusercontent.com/u/103327358/crossfilter.json", function(json) 
	
	{
	    var checkDatum=[];
	    crossdata=json;
	    var xf = crossfilter(crossdata);
	    var tags = xf.dimension(function(d) {
		return d.tags});
	    
	    // Add a rect for each date.
	    var rect = valgroup.selectAll("rect")
		.data(function(d){return d;})
		.enter().append("svg:rect")
		.on("click", function(d){
		    datum=listDatum[d.x],
		    runDatum(datum)
		})
		.attr("x", function(d) { return x(d.x); })
		.attr("y", function(d) { return -y(d.y0) - y(d.y); })
		.attr("height", function(d) { return y(d.y); })
		.attr("width", x.rangeBand());
	    
	});
    
    function runDatum() {
	
	checkDatum=[];
	checkID=[];
	for(d=0; d<528 ;d++)
	{
	    if(data[d].dating==datum) {checkDatum.push(d);}
	    else {checkDatum.push(-1)}  

	    ;}
	filterLogicDatum(checkDatum, data, datum);
    };
};

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Sundials Project