StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMaking a calendar with d3
text
Body
copied!<p>i am trying to build a plugin to display a year view of the events on a google calendar account, i am trying to build this view using D3 and fetching the data from the google calendar API (this part sounds easy so far), but i'm stuck trying to actually build the view in d3, here is what i have so far:</p> <p>My code :</p> <pre><code>var margin = {top: 40, right: 40, bottom: 40, left: 40}, width = 960, height = 500; var x = d3.time.scale() .domain([new Date(2013, 0, 1), new Date(2014, 0, 1)]) .range([0, width]) var y = d3.time.scale() .domain([new Date(2013,0,1), new Date(2013, 0,31)]) .range([0, height]) var xAxis = d3.svg.axis() .scale(x) .orient("top") var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(d3.time.days, 1) .tickFormat(d3.time.format('%e')) var svg = d3.select(".container").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 makeXaxis() { return d3.svg.axis() .scale(x) .orient("top") } function makeYaxis() { return d3.svg.axis() .scale(y) .orient("left") .ticks(d3.time.days, 1) .tickFormat(d3.time.format('%e')) } svg.append("g") .attr("class", "x axis") // .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(0,0)") .call(yAxis); svg.append("g") .attr("class", "grid") .call(makeYaxis() .tickSize(-width, 0, 0) .tickFormat("") .tickPadding(8) ) svg.append("g") .attr("class", "grid") .call(makeXaxis() .tickSize(-height, 0, 0) .tickFormat("") ) </code></pre> <p>What it renders: <a href="http://i45.tinypic.com/j9n5gi.png" rel="nofollow noreferrer">actual view calendar</a></p> <p><img src="https://i.stack.imgur.com/UdKby.png" alt="enter image description here"></p> <p>What i want to achieve: <a href="http://i48.tinypic.com/2yob8th.jpg" rel="nofollow noreferrer">goal calendar</a></p> <p><img src="https://i.stack.imgur.com/7b5q5.png" alt="enter image description here"></p> <p>There are a few problem with my code, </p> <ul> <li><p>the first being that my y domain is an arbitrary month of 31 days, i don't know if my data will place itself on the graph well if it is a time scale, should i use a linear scale of 31 ?</p></li> <li><p>How can i just render January...December without the 2013 and 2014</p></li> <li><p>How can i display the months in the middle top of each row instead of displaying them on every tick ?</p></li> <li><p>Well , i am not going to ask for more considering i am already asking for alot.</p></li> </ul> <p>Thanks everyone, i am totally new to d3, i have read lots of tuts tho.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload