d3 slider to change csv column - javascript

I have a d3 slider with a range from 2001 to 2016 and a csv file with columns name and no_2001 to no_2016. The csv is called in a d3.queue together with a json file to build a choropleth map changing over the years.
My problem is to change the column of the csv file by dragging the slider. Can anyone help? Thanks!
This is what I have so far. In the queue function "+d.no_2015" has to be changed, but my defined "column" does not work if I replace it with "+d.no_2015".
<h2>Year: <span id="year">2016</span></h2>
<div id="slider"></div>
<script>
function csvColumn(data){
column = "no_" + data;
return column // this does not work
};
d3.select('#slider').call(d3.slider()
.min(2001)
.max(2016)
.value(2016)
.step(1)
.axis(d3.svg.axis().tickFormat(d3.format(".0f")).ticks(16))
.on("slide", function(evt, value) {
d3.select('#year').text(value);
csvColumn(value);
}));
var rateById = d3.map();
d3_queue.queue()
.defer(d3.json, "de_landkreis.json")
.defer(d3.csv, "maserndaten.csv", function(d) {rateById.set(d.name, +d.no_2015);}) //here the slider has to act. +d.column does not work.
.await(showData);
function showData(error, de_landkreis) { ... }
</script>

Ok, if I got it right, you should change your code so the column defined by your slider is used instead to populate your map. This I think would do the trick:
<h2>Year: <span id="year">2016</span></h2>
<div id="slider"></div>
<script>
// This is the default value
var selectedColumn = "no_2014";
function csvColumn(data){
return "no_" + data;
};
d3.select('#slider').call(
d3.slider()
.min(2001)
.max(2016)
.value(2016)
.step(1)
.axis(d3.svg.axis().tickFormat(d3.format(".0f")).ticks(16))
.on("slide", function(evt, value) {
d3.select('#year').text(value);
selectedColumn = csvColumn(value);
})
);
var rateById = d3.map();
d3_queue.queue()
.defer(d3.json, "de_landkreis.json")
.defer(d3.csv, "maserndaten.csv", function(d) {
rateById.set(d.name, +d[csvColumn(selectedValue)]);
})
.await(showData);
function showData(error, de_landkreis) { ... }
</script>
Of course, you would need to wire it in a way that changing the slider triggers the redrawing of the data using a different column as source. But the first part is solved.

Related

Chartist.js - Pass Label Value into Bar Click

I am using the Chartist.js graph api to create a graph and I need each bar to click to a location. This is easy enough, but I also need to pass the corresponding label value if possible.
var graph = new Chartist.Bar('.ct-chart', {
labels : ['L1','L2','L3'],
series : [1,2,3]
});
So, I have added an onclick method to each bar, but need it to get the corresponding label value to pass to the location page. Example:
graph.on('created', function() {
$('.ct-bar').click(function () {
var val = $(this).attr('ct:value');
if (val > 0) {
window.location = 'location/?label=BAR LABEL HERE (eg: L1)';
}
});
});
Would anyone know if this is possible?
Many thanks.

How to execute code in epoch js,as i am new to this, i want to execute some sample charts,can anyone help in finding the result

<div id="chart" class="styles1"></div>
<button id="toggle">Switch Styles</button>
<script src="https://cdn.jsdelivr.net/npm/epoch-charting#0.8.4/dist/js/epoch.min.js"></script>
<script>
var chart = $('#chart').epoch({
type: 'time.area',
data: []
});
// The button swtiches the chart's class from styles1 to styles2 and back
$('#toggle').click(function (e) {
// This switches the class names...
var className = $('#chart').attr('class');
var newClassName = className === 'styles1' ? 'styles2' : 'styles1';
$('#chart').removeClass(className).addClass(newClassName);
// And this is required to see the updated styles...
chart.redraw();
});
</script>
This is the code I am using when I am executing this, I am not able to see anything, I don't know how to run even

d3 interaction on click event

I have a map with d3 circles showing the site locations, as well as a linechart showing the time trend for each of the site. I am trying to make a particular line highlight when a corresponding circle is clicked. Here is the code. I can't seem to connect the siteIDs with the following function:
function highlightLine(id) {
lineGroup.classed("g-highlight", function(d) {
return d.siteID == id.siteID;
});
};
Insert a console.log as shown below, and it should become clearer:
function highlightLine(id) {
lineGroup.classed("g-highlight", function(d) {
console.log(d);
return d.siteID == id.siteID;
});
};
Because you're binding to data that you've run through d3.nest, the id of d that you're interested in is actually d.key not d.siteID, which does not exist on that level. So the boolean inside classed should be
return d.key == id.siteID
That will cause the appropriate trendline's <g> to have a "g-highlight" class, however it still will not visibly color the line. I believe that's because your css rule .g-highlight { stroke:... } applies the stroke to the containing <g> instead of the <path> inside it. You can change that css rule to be .g-highlight path { ... } and that will color the path as you'd like.
To bind the click event in d3 you should select the object with that class and bind the click:
d3.selectAll(".g-highlight").on("click", function(d) {
return d.siteID == id.siteID;
});

How are enter() and exit() detecting updated data in D3?

I am building a small UI where the user has to select a point on each of the two SVGs shown.
These points coordinates are then shown under the SVGs. I would like to achieve this using D3's data-binding with the enter() and exit() methods. However it seems that D3 doesn't always update the part where I display the points coordinates, even if I call the enter() method on the bound elements. When removing data, the exit() methods works however.
Here is the main code :
function showPoints() {
var coordinatesElements = d3.select('#coordinates').selectAll('.point').data(points);
coordinatesElements.enter().append('div').classed('point', true)
.text(function (d) {
var textParts = [];
if (d.firstSvg) { textParts.push('first : '+JSON.stringify(d.firstSvg)); }
if (d.secondSvg) { textParts.push('second : '+JSON.stringify(d.secondSvg)); }
return textParts.join(' - ');
})
.append("span")
.classed('removeCalibrationPoint', true)
.html(" X")
.on('click', function(d, i) {
points.splice(i, 1);
showPoints();
});
coordinatesElements.exit().remove();
}
I have created a JSBin fiddle that demonstrates the problem.
The first problem is that you have an empty div of class point in your HTML. This will be selected by the .selectAll('.point') and cause the first element in your data not to show up.
The second problem is that you're not handling the update selection -- in some cases, you're not adding new data, but modifying existing data. The following code updates the text for the data in the update selection.
coordinatesElements.text(function (d) {
var textParts = [];
if (d.firstSvg) { textParts.push('first : '+JSON.stringify(d.firstSvg)); }
if (d.secondSvg) { textParts.push('second : '+JSON.stringify(d.secondSvg)); }
return textParts.join(' - ');
});
Complete demo here. Notice I've simplified the code slightly by setting the text only on the update selection -- elements added from the enter selection merge into the update selection, so there's no need to do it twice.

Required Help in Hiding Table Rows - dc.js

I'm using dc.js to plot chart and show data tables.
Everything runs quite good. And for the table i've created a dimension and also a group. Passing the group variable to dynatable records.
Problem is when I do some selection in the chart. The data table value are of course getting changed. But the there are few records which are supposed to hidden instead they come with 0 value.
I wanted to hide those rows.
Below are the functions I'm using.
Table Dimension :
var tableDim = ndx.dimension(function(d) { return d.label; })
Table Group: var tableGroup = tableDim.group().reduceSum(function(d) { return d.count; })
Dyna Table:
var dynatable = $('.data-table').dynatable({
features: {
pushState: false
},
dataset: {
records: tableGroup.top(Infinity),
perPageDefault: 10,
perPageOptions: [10, 20, 100, 500, 1000]
}
}).data('dynatable');
Refresh the table on chart selection :
function RefreshTable() {
dc.events.trigger(function () {
dynatable.settings.dataset.originalRecords = tableGroup.top(Infinity);
dynatable.process();
});
$('.data-table tr').each(function() {
if ($(this).find('td:nth-child(2)').text() < 1) {
$(this).addClass('zero-value');
}
})
};
I've written jquery codes to assign a class for the rows with zero-value. And it gets assigns only for the first 10 records as I've given the perPageDefault: 10. But I want to it run for the entire table records.
Some one please help me in hiding those rows with values 0.
Before assigning the records in the dynaTable initialization and RefreshTable, you can copy the data and remove records that have value 0.
Dynatable is acting on the records that you pass it, so you can change that data in any way you see fit.

Categories