wahengjavascript: 3月 2015

2015年3月15日星期日

Create a Basic Google Map

http://www.w3schools.com/googleapi/google_maps_basic.asp

2015年3月10日星期二

d3.Scales

In addition to linear scales (discussed earlier), D3 has several other built-in scale methods:

sqrt: A square root scale.
pow: A power scale (good for the gym, er, I mean, useful when working with exponential series of values, as in “to the power of” some exponent).
log: A logarithmic scale.
quantize: A linear scale with discrete values for its output range, for when you want to sort data into “buckets.”
quantile: Similar to quantize, but with discrete values for its input domain (when you already have “buckets”).
ordinal: Ordinal scales use nonquantitative values (like category names) for output; perfect for comparing apples and oranges.
d3.scale.category10(), d3.scale.category20(), d3.scale.category20b(), andd3.scale.category20c(): Handy preset ordinal scales that output either 10 or 20 categorical colors.
d3.time.scale(): A scale method for date and time values, with special handling of ticks for dates.

google font

google online font
http://www.strathviewconsultants.co.uk/support:import-fonts

2015年3月9日星期一

d3.js bar chart manually / automatically

<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

===================

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });

2015年3月6日星期五

d3.js : array function

we have to use i,d as parameters

data is one of the property of

var theData = [ 1, 2, 3 ]

var p = d3.select("body").selectAll("p")
  .data(theData)
  .enter()
  .append("p")
  .text(function (d,i) {
    return "i = " + i + " d = "+d;
});