javascript - Updating or deleting d3.slider with variation of visualization -
i want visualize data on map on time , per day. therefore got 2 functions plotting points on day , remove after day has passed
var showone = function (){ var slider = d3.slider() .axis(true).min(mindate).max(maxdate) .on("slide", function(evt, value) { sliderdate = moment(value,"x").utc().format("yyyy-mm-dd"); newdatas = site_datas.features.filter(function(d){ datadate = d.properties.date; if (datadate == sliderdate) { return dps(datadate); } }); displaysitess(newdatas); }) d3.select('#slider3').call(slider); } and have function shows incidents on time
var showtwo = function (){ d3.select('#slider3').call(d3.slider() .axis(true).min(mindate).max(maxdate) .on("slide", function(evt, value) { sliderdate = moment(value,"x").utc().format("yyyy-mm-dd"); newdatas = site_datas.features.filter(function(d){ return dps(d.properties.date) < new date(value); }); displaysitess(newdatas); }) ); } i want update slider button
<!doctype html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/d3.slider.css" /> <link rel="stylesheet" href="css/temp.css" /> <link rel="stylesheet" href="css/main.css" /> <script type="text/javascript" src="library/d3.v3.min.js"></script> <script type="text/javascript" src="library/topojson.v1.min.js"></script> <script type="text/javascript" src="library/underscore-min.js"></script> <script type="text/javascript" src="library/d3.slider.js"></script> <script type="text/javascript" src="library/socket.io-0.9.10.min.js"></script> <script type="text/javascript" src="library/caress-0.1.0.js"></script> <script type="text/javascript" src="library/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="library/d3.tip.js"></script> <script type="text/javascript" src="library/moment.min.js"></script> <script src="https://riccardoscalco.github.io/textures/textures.min.js" charset="utf-8"></script> <script src="//d3js.org/queue.v1.min.js"></script> </head> <body> <!-- <script> $(function() { window.client = new caress.client({ host: 'localhost', port: 5000 }); client.connect(); }); </script> --> <div id="slider3"></div> <script type="text/javascript" src="js/04map.js"></script> <div class="chart"></div> <!-- <script type="text/javascript" src="js/streamgraphtexture.js"></script> --> <button>zeige alle</button> <script> showone(); $(document).ready(function(){ $("button").click(showtwo); }); </script> </body>but slider added right beneath old slider. have ideas how update slider can used other visualization? data here
edit1:
var width = 1020, height = 500; var projection = d3.geo.mercator() .translate([width / 2, height / 2]) .scale((width - 1) / 2 / math.pi); var zoom = d3.behavior.zoom() .scaleextent([3, 200]) .on("zoom", zoomed); var path = d3.geo.path() .projection(projection); var tip = d3.tip() .attr('class', 'd3-tip') .html(function(d) { return d.properties.description }) .offset([0, 3]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g"); svg.call(tip) var g = svg.append("g"); var sites = svg.append("g"); var graph = svg.append("g"); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); svg.call(zoom) .call(zoom.event); d3.json("mapdata/worldfill.json", function(error, world) { if (error) throw error; var countries = topojson.feature(world, world.objects.countries_fill).features; g.append("path") .datum({type: "sphere"}) .attr("class", "sphere") .attr("d", path); g.append("path") .datum(topojson.merge(world, world.objects.countries_fill.geometries)) .attr("class", "land") .attr("d", path); g.append("path") .datum(topojson.mesh(world, world.objects.countries_fill, function(a, b) { return !== b; })) .attr("class", "boundary") .attr("d", path); //_______________________________________________________________________________________________________________________________________ //________________________________________________________________________________________________________________________________________ d3.json("mapdata/germany.json", function(error, ger){ if (error) throw error; var states = topojson.feature(ger, ger.objects.states_germany), cities = topojson.feature(ger, ger.objects.cities_germany); g.selectall(".states") .data(states.features) .enter() .append("path") .attr("class", "state") .attr("class", function(d) { return "state " + d.id; }) .attr("d", path) .style("fill", function(d) { return z(d.id); }); g.append("path") .datum(cities) .attr("d", path.pointradius('0.35')) .style("opacity", 0.5) .style("fill", "blue") .attr("class", "city"); g.selectall(".german-place-label") .data(cities.features) .enter().append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.properties.name; }); }); d3.json("mapdata/syria.json", function(error, syr){ if (error) throw error; var states = topojson.feature(syr, syr.objects.states_syria), cities = topojson.feature(syr, syr.objects.cities_syria); g.selectall(".states") .data(states.features) .enter() .append("path") .attr("class", "state") .attr("class", function(d) { return "state " + d.id; }) .attr("d", path) .style("fill", "orange"); // g.append("path") // .datum(cities) // .attr("d", path.pointradius('0.15')) // .attr("class", "city"); // g.selectall(".syrian-place-label") // .data(cities.features) // .enter().append("text") // .attr("class", "place-label") // .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) // .attr("dy", ".35em") // .text(function(d) { return d.properties.name; }); }); }); function zoomed() { g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); //console.log(sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")); } d3.json("data/vorfaelle.json", function(error, data){ window.site_datag = data; }); d3.json("data/syria05.json", function(error, data){ window.site_datas = data; }); d3.json("data/deathineurope.json", function(error, data){ window.site_dataw = data; }); d3.json("data/isil.en.json", function(error, data){ window.site_datab = data; console.log("loaded"); }); var displaysitesg = function(data) { var sitedata = sites.selectall(".siteg") .data(data); sitedata .enter() .append("circle") .attr("class", "siteg") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .on("click", tip.show) .on('mouseout', tip.hide) .attr("r", 1.25) .transition().duration(70) .attr("r", 5); // .on("mouseover", tip.show); // .on("mouseover", function(d) { // div.transition() // .duration(200) // .style("opacity", 0.9); // // div.html("test") // // .style("left", (d3.event.pagex) + "px") // // .style("top", (d3.event.pagey - 28) + "px"); // }) // .on("mouseout", function(d) { // div.transition() // .duration(500) // .style("opacity", 0); // }); sitedata.exit()//remove selection removed dataset //.transition().duration(200) .attr("r",0) .remove(); }; var displaysitess = function(data) { var radscale = d3.scale.linear() // .domain([0,d3.max(data, function (d) { // return d.properties.value // })]) .domain(d3.extent(data, function(d){ return d.properties.value })) .range([0.1,.5]); var sitedatas = sites.selectall(".sites") .data(data); sitedatas .enter() .append("circle") .attr("class", "sites") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .attr("r", function(d){ return 1.75 * radscale(d.properties.value) }) .transition().duration(70) .attr("r", function(d){ return radscale(d.properties.value) }); sitedatas.exit()//remove selection removed dataset .transition().duration(10) .attr("r",0) .remove(); }; var displaysitesw = function(data) { var sitedataw = sites.selectall(".sitew") .data(data); sitedataw .enter() .append("circle") .attr("class", "sitew") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .attr("r", 10) .transition().duration(70) .attr("r", 20); sitedataw.exit()//remove selection removed dataset .transition().duration(500).delay(1000) .attr("r",0) .style("opacity", 0.5) .remove(); }; var displaysitesb = function(data) { var radscale = d3.scale.linear() // .domain([0,d3.max(data, function (d) { // return d.properties.value // })]) .domain(d3.extent(data, function(d){ return d.properties.attacks })) .range([1,4]); var sitedatab = sites.selectall(".siteb") .data(data); sitedatab .enter() .append("circle") .attr("class", "siteb") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .attr("r", 2) .transition().duration(70) .attr("r", function(d){ return radscale(d.properties.attacks) }); sitedatab.exit()//remove selection removed dataset .transition().duration(500) .attr("r",0) .style("opacity", 0.5) .remove(); }; dpg = d3.time.format("%d.%m.%y").parse; dps = d3.time.format("%y-%m-%d").parse; var mindate = dpg("01.01.2015"); var maxdate = dpg("31.12.2015"); var secondsinday = 60 * 60 * 24; var slider = d3.slider() .axis(true).min(mindate).max(maxdate) .on("slide", function(evt, value) { sliderdate = moment(value,"x").utc().format("yyyy-mm-dd"); newdatas = site_datas.features.filter(function(d){ datadate = d.properties.date; if (datadate == sliderdate) { return dps(datadate); } }); displaysitess(newdatas); }) d3.select('#slider3').call(slider); var showone = function (){ slider = d3.slider() .axis(true).min(mindate).max(maxdate) .on("slide", function(evt, value) { sliderdate = moment(value,"x").utc().format("yyyy-mm-dd"); newdatas = site_datas.features.filter(function(d){ datadate = d.properties.date; if (datadate == sliderdate) { return dps(datadate); } }); //______________________________________________________________________________ //______________________________________________________________________________ // newdataw = site_dataw.features.filter(function(d){ // datadate = d.properties.date; // if (datadate == sliderdate) { // //console.log(dps(datadate)); // //console.log(dps(datadate)); // return dps(datadate); // } // }); //______________________________________________________________________________ //______________________________________________________________________________ // // newdatab = site_datab.features.filter(function(d){ // datadate = d.properties.date; // if (datadate == sliderdate) { // //console.log(dps(datadate)); // //console.log(dps(datadate)); // return dps(datadate); // } // }); //______________________________________________________________________________ //______________________________________________________________________________ displaysitess(newdatas); //displaysitesw(newdataw); //displaysitesb(newdatab); }) d3.select('#slider3').call(slider); } var showtwo = function (){ console.log("showtwonow"); d3.select('#slider3').remove(slider); slider = d3.slider() //.axis(true).min(mindate).max(maxdate) .on("slide", function(evt, value) { sliderdate = moment(value,"x").utc().format("yyyy-mm-dd"); newdatas = site_datas.features.filter(function(d){ return dps(d.properties.date) < new date(value); }); displaysitess(newdatas); }) d3.select('#slider3').call(slider); } i may remove slider of course dom element removed too. how can call slider new new filter-function if can't update it?
i calling slider once inside slider let variable decide filter-function should use. whole code looks then
// var sitedataw, // sitedatas, // sitedatag; var tip = d3.tip() .attr('class', 'd3-tip') .html(function(d) { return d.properties.description }) .offset([0, 3]); svg.call(tip) function zoomed() { g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); var translate = zoom.translate(); var translatex = translate[0]/zoom.scale(); var translatey = translate[1]/zoom.scale(); // console.log(translate[0]/zoom.scale() + " " + translate[1]/zoom.scale()); // console.log(zoom.scale()); if (zoom.scale()<minzoomtresholdcountry) { //console.log("welt"); zoomcheck = 0; // if( sitedatag ){ // sitedateg.remove(); // } // if(sitedatas){ // sitedatas.remove(); // } } else if(zoom.scale() >= minzoomtresholdcountry && translatex< minxg && translatex > maxxg && translatey<minyg && translatey>maxyg){ //console.log("de"); zoomcheck = 1; } else if(zoom.scale() >= minzoomtresholdcountry && translatex> minxs && translatex < maxxs && translatey<minys && translatey>maxys){ //console.log("syr"); zoomcheck = 2; } else{ zoomcheck = 0; } console.log(zoomcheck) } d3.json("data/vorfaelle.json", function(error, data){ window.site_datag = data; }); d3.json("data/syria05.json", function(error, data){ window.site_datas = data; }); d3.json("data/deathineurope.json", function(error, data){ window.site_dataw = data; }); d3.json("data/isil.en.json", function(error, data){ window.site_datab = data; }); dpg = d3.time.format("%d.%m.%y").parse; dps = d3.time.format("%y-%m-%d").parse; dps = function(){ d3.time.parse; } dpstimestamp = +dps; var mindate = dpg("01.01.2015"); var maxdate = dpg("31.12.2015"); var slider = d3.slider() .axis(true).min(mindate).max(maxdate).step(60 * 60 * 24) .on("slide", function(evt, value) { sliderdate = moment(value,"x").utc().format("yyyy-mm-dd"); console.log(sliderdate); if( filtercheck == 0 ){ if( zoomcheck == 0 ){ newdataw = site_dataw.features.filter(function(d){ datadate = d.properties.date; if (datadate == sliderdate) { return dps(datadate); } }); showworldsite(newdataw) } else if( zoomcheck == 1 ){ sliderdate = moment(value,"x").utc().format("mm.dd.yyyy"); newdatag = site_datag.features.filter(function(d){ datadate = d.properties.date; if (datadate == sliderdate) { console.log(dpg(datadate)) return dpg(datadate) } }) showgermansite(newdatag); } else if( zoomcheck == 2 ){ newdatas = site_datas.features.filter(function(d){ datadate = d.properties.date; if (datadate == sliderdate) { return dps(datadate); } }); showsyriansite(newdatas); } } //================================================================================================ //================================================================================================ //================================================================================================ else if( filtercheck == 1 ) { if( zoomcheck == 0 ){ newdataw = site_dataw.features.filter(function(d){ return dps(d.properties.date) < new date(value); }); showworldsite(newdataw) } else if( zoomcheck == 1 ){ newdatag = site_datag.features.filter(function(d){ datadate = d.properties.date; return dps(datadate) < dps(sliderdate); }) console.log(newdatag.length); console.log(new date(value)); showgermansite(newdatag); } else if( zoomcheck == 2 ){ newdatas = site_datas.features.filter(function(d){ return dps(d.properties.date) < new date(value); }); showsyriansite(newdatas); } } }); d3.select('#slider3').call(slider); function showworldsite(data){ var sitedataw = sites.selectall(".sitew") .data(data); sitedataw .enter() .append("circle") .attr("class", "sitew") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .attr("r", 20) .transition().duration(70) .attr("r", 10); sitedataw.exit()//remove selection removed dataset .transition().duration(500).delay(1000) .attr("r",0) .style("opacity", 0.5) .remove(); } function showgermansite(data){ var sitedatag = sites.selectall(".siteg") .data(data); sitedatag .enter() .append("circle") .attr("class", "siteg") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .on("click", tip.show) .on('mouseout', tip.hide) .attr("r", 1.25) .transition().duration(70) .attr("r", 0.25); sitedatag.exit()//remove selection removed dataset //.transition().duration(200) .attr("r",0) .remove(); } function showsyriansite(data){ var radscale = d3.scale.linear() .domain(d3.extent(data, function(d){ return d.properties.value })) .range([0.1,.5]); var sitedatas = sites.selectall(".sites") .data(data); sitedatas .enter() .append("circle") .attr("class", "sites") .attr("cx", function(d) { var p = projection(d.geometry.coordinates); return p[0]; }) .attr("cy", function(d) { var p = projection(d.geometry.coordinates); return p[1] }) .attr("r", function(d){ return 1.75 * radscale(d.properties.value) }) .transition().duration(70) .attr("r", function(d){ return radscale(d.properties.value) }); sitedatas.exit()//remove selection removed dataset .transition().duration(10) .attr("r",0) .remove(); }
Comments
Post a Comment