lähetän kotisivulle (sonera ei php)3 csv tiedostoa, jotka sisältävät dataa päivä/viikko/kuukausi ajalta ja d3js käppyrät sitten niistä.
kuinka saisin yhdestä, siitä kuukauusi.csv stä tuon päivä datan käyrän, jotta ei tarvitsisi lähettää kuin se suurin elikkä kuukausi.csv
pythonilla tuo hoituu minunkin taidolla mutta javascriptillä en saa onnistumaan
kotisivu on korsteeni.com , mistä näkee tarkemmin kuinka d3js käyrät toteutettu
tällaiseen se seula pitäisi upottaa
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 540 - margin.left - margin.right,
height = 291 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.2f"),
formatCurrency = function(d) { return formatValue(d) + " C°"; };
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.outdoor); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(8)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
d3.csv("day_od.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.outdoor = +d.outdoor;
});
data.sort(function(a, b) {
return a.date - b.date;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
//y.domain(d3.extent(data, function(d) { return d.outdoor; }));
y.domain([
d3.min(data, function(d) { return d.outdoor; })-1,
d3.max(data, function(d) { return d.outdoor; })+1]);
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
/*.attr("transform", "rotate(-90)")*/
.attr("y", -7)
.attr("x", 0)
/*.style("text-anchor", "end")*/
.text("Outside C°");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", "-1");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.outdoor) + ")");
focus.select("text").text(formatCurrency(d.outdoor));
}
});
</script>Mod. korjasi kooditagit!
Katsopa kohdan d3.csv jälkeen tulevaa funktiota. Siinä luetaan päivämäärä ilmeisesti johonkin numeeriseen muotoon ja järjestetään sort-funktiolla data päivämäärän mukaan. Näiden jälkeen voit poistaa datasta ne kohdat, joita et halua käsitellä. Jos tiedät, että viimeisen vuorokauden tai viikon aikana on tietty määrä dataa, voit käyttää splice-funktiota ylimääräisten elementtien poistoon. Muuten joudut käyttämään esimerkiksi filter-funktiota, jotta saat poimittua tiettyä ajankohtaa myöhemmät arvot.
senverran kokeilin filter iä että se toimii datassa, numeroissa, mutta tuo päivämäärä, timestamp on jotenkin hankala kun siinä ei pelaa
pähkäilempä tuon toisen, splice n kanssa seuraavaksi
Pitäisi kyllä toimia esimerkiksi näin:
var t0 = d3.time.monday(new Date()); // Tämän viikon alku
data = data.filter(function(a) {
return a.time > t0;
});En toki testannut, testaa sinä.
kyllä se tällä näyttää toimivan
kiitän ja kumarran,
harrastukseni saa taas uutta eloa
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
..........................
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
.............................antaa päivämäärän kuten pitääkin 2017-03-02 02:10:00
kuinka saisin d3js graafiin tulostettua niin että samaan tolppaan tulisi tunnin arvot (kWh)
sekunnit ovat kaikissa arvoissa jo valmiiksi 0 , mutta jos saisi poimineen tiedot ilman minuutteja tai muuntaneen ne noudettaessa nolliksi
var parseDate = d3.time.format("%Y-%m-%d %H").parse;ei toimi
csv tiedosto on tyypiltään
date, kwh 2017-03-02 02:20:00,0.038 2017-03-02 02:30:00,0.056 2017-03-02 02:40:00,0.08 2017-03-02 02:50:00,0.097
Voit nollata minuutit esim. näin:
d.date = parseDate(d.date.replace(/:.*/, ':00:00'))
Koko tunnin summan laskemiseen sopisi silmukka, jossa summataan myöhemmät tunnin ensimmäiseen arvoon, ja sitten myöhempien filtteröinti pois:
for (var i = 0, j; i < data.length; i = j) {
for (j = i + 1; j < data.length && data[j].date == data[i].date; ++j) {
data[i].kwh += data[j].kwh
data[j].kwh = null // merkitään poistettavaksi
}
}
data = data.filter(function(a) {
return a.kwh !== null
})kiitos ja kumarrus nopeasta vastauksesta, toimii hienosti
täytyy taas todeta, on se helppoa niille, ken osaa, helpottaa elämää taas paljon
Aihe on jo aika vanha, joten et voi enää vastata siihen.