d3/examples/bar/bar.html

<html>
  <head>
    <title>Bar Chart</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

body {
  font: 10px sans-serif;
}

svg {
  shape-rendering: crispEdges;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var data = d3.range(10).map(Math.random);

var w = 430,
    h = 230,
    x = d3.scale.linear().domain([0, 1]).range([0, w]),
    y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2);

var vis = d3.select("body")
  .append("svg:svg")
    .attr("width", w + 40)
    .attr("height", h + 20)
  .append("svg:g")
    .attr("transform", "translate(20,0)");

var bars = vis.selectAll("g.bar")
    .data(data)
  .enter().append("svg:g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

bars.append("svg:rect")
    .attr("fill", "steelblue")
    .attr("width", x)
    .attr("height", y.rangeBand());

bars.append("svg:text")
    .attr("x", x)
    .attr("y", y.rangeBand() / 2)
    .attr("dx", -6)
    .attr("dy", ".35em")
    .attr("fill", "white")
    .attr("text-anchor", "end")
    .text(x.tickFormat(100));

bars.append("svg:text")
    .attr("x", 0)
    .attr("y", y.rangeBand() / 2)
    .attr("dx", -6)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(function(d, i) { return String.fromCharCode(65 + i); });

var rules = vis.selectAll("g.rule")
    .data(x.ticks(10))
  .enter().append("svg:g")
    .attr("class", "rule")
    .attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });

rules.append("svg:line")
    .attr("y1", h)
    .attr("y2", h + 6)
    .attr("stroke", "black");

rules.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("stroke", "white")
    .attr("stroke-opacity", .3);

rules.append("svg:text")
    .attr("y", h + 9)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

vis.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("stroke", "black");

    </script>
  </body>
</html>
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`<html>`
			`<head>`
			`<title>Bar Chart</title>`
Simplify data join. Add insert & empty. The data join is now specified as a single function of data, as with all other properties. This allows the key to be computed on the previously-bound data, rather than requiring the key to be serialized into the DOM (say, as an attribute). In the case that there is no previously-bound data, it is still possible to access the associated node as the `this` context. The `enter` operator no longer performs an append. For symmetry with the `exit` operator, you must call `append` after obtaining the entering selection. This requires a tiny bit more code, but should make the code more clear. Also, it provides an opportunity to use a different instantiation operator, such as the new `insert` operator. This takes a second argument, which is a selector for the insert-before reference element. For example, the selector ":first-child" will prepend nodes. The `empty` operator allows you to query whether a selection is empty (i.e., contains zero matching nodes). 2011-01-31 22:00:35 +03:00			`<script type="text/javascript" src="../../d3.js"></script>`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`<style type="text/css">`

			`body {`
			`font: 10px sans-serif;`
			`}`

			`svg {`
			`shape-rendering: crispEdges;`
			`}`

			`</style>`
			`</head>`
			`<body>`
			`<script type="text/javascript">`

Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`var data = d3.range(10).map(Math.random);`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`var w = 430,`
			`h = 230,`
Break d3 into {core,scale,svg} modules. Also enable ADVANCED_OPTIMIZATIONS for the Google compiler. 2010-10-31 02:30:10 +04:00			`x = d3.scale.linear().domain([0, 1]).range([0, w]),`
			`y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2);`
First pass at scale functions. This includes only the quantitative scale functions, which is primarily the linear scale. Also included are `log` and `pow` scales, which are simple transforms of linear scales. All the scale functions use the existing interpolator logic, so you can specify an output range of numbers, colors, fonts, paths... pretty much anything. 2010-10-20 22:07:42 +04:00
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`var vis = d3.select("body")`
Rename add -> append. 2010-10-02 22:00:31 +04:00			`.append("svg:svg")`
First pass at ticks for linear scale. 2010-10-22 23:55:50 +04:00			`.attr("width", w + 40)`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("height", h + 20)`
Rename add -> append. 2010-10-02 22:00:31 +04:00			`.append("svg:g")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("transform", "translate(20,0)");`

			`var bars = vis.selectAll("g.bar")`
			`.data(data)`
Simplify data join. Add insert & empty. The data join is now specified as a single function of data, as with all other properties. This allows the key to be computed on the previously-bound data, rather than requiring the key to be serialized into the DOM (say, as an attribute). In the case that there is no previously-bound data, it is still possible to access the associated node as the `this` context. The `enter` operator no longer performs an append. For symmetry with the `exit` operator, you must call `append` after obtaining the entering selection. This requires a tiny bit more code, but should make the code more clear. Also, it provides an opportunity to use a different instantiation operator, such as the new `insert` operator. This takes a second argument, which is a selector for the insert-before reference element. For example, the selector ":first-child" will prepend nodes. The `empty` operator allows you to query whether a selection is empty (i.e., contains zero matching nodes). 2011-01-31 22:00:35 +03:00			`.enter().append("svg:g")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("class", "bar")`
Checkpoint immediate-mode implementation. 2010-10-24 07:32:16 +04:00			`.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Rename add -> append. 2010-10-02 22:00:31 +04:00			`bars.append("svg:rect")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("fill", "steelblue")`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("width", x)`
			`.attr("height", y.rangeBand());`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Rename add -> append. 2010-10-02 22:00:31 +04:00			`bars.append("svg:text")`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("x", x)`
			`.attr("y", y.rangeBand() / 2)`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("dx", -6)`
			`.attr("dy", ".35em")`
			`.attr("fill", "white")`
			`.attr("text-anchor", "end")`
Export a tickFormat function. The tick format function doesn't have to be used with ticks, though. It's also for convenient for determining an appropriate precision for any value label. 2010-10-23 00:36:48 +04:00			`.text(x.tickFormat(100));`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Rename add -> append. 2010-10-02 22:00:31 +04:00			`bars.append("svg:text")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("x", 0)`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("y", y.rangeBand() / 2)`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("dx", -6)`
			`.attr("dy", ".35em")`
			`.attr("text-anchor", "end")`
Checkpoint immediate-mode implementation. 2010-10-24 07:32:16 +04:00			`.text(function(d, i) { return String.fromCharCode(65 + i); });`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
			`var rules = vis.selectAll("g.rule")`
First pass at ticks for linear scale. 2010-10-22 23:55:50 +04:00			`.data(x.ticks(10))`
Simplify data join. Add insert & empty. The data join is now specified as a single function of data, as with all other properties. This allows the key to be computed on the previously-bound data, rather than requiring the key to be serialized into the DOM (say, as an attribute). In the case that there is no previously-bound data, it is still possible to access the associated node as the `this` context. The `enter` operator no longer performs an append. For symmetry with the `exit` operator, you must call `append` after obtaining the entering selection. This requires a tiny bit more code, but should make the code more clear. Also, it provides an opportunity to use a different instantiation operator, such as the new `insert` operator. This takes a second argument, which is a selector for the insert-before reference element. For example, the selector ":first-child" will prepend nodes. The `empty` operator allows you to query whether a selection is empty (i.e., contains zero matching nodes). 2011-01-31 22:00:35 +03:00			`.enter().append("svg:g")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("class", "rule")`
Export a tickFormat function. The tick format function doesn't have to be used with ticks, though. It's also for convenient for determining an appropriate precision for any value label. 2010-10-23 00:36:48 +04:00			`.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Rename add -> append. 2010-10-02 22:00:31 +04:00			`rules.append("svg:line")`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("y1", h)`
			`.attr("y2", h + 6)`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("stroke", "black");`

Rename add -> append. 2010-10-02 22:00:31 +04:00			`rules.append("svg:line")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("y1", 0)`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("y2", h)`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("stroke", "white")`
			`.attr("stroke-opacity", .3);`

Rename add -> append. 2010-10-02 22:00:31 +04:00			`rules.append("svg:text")`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("y", h + 9)`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("dy", ".71em")`
			`.attr("text-anchor", "middle")`
Export a tickFormat function. The tick format function doesn't have to be used with ticks, though. It's also for convenient for determining an appropriate precision for any value label. 2010-10-23 00:36:48 +04:00			`.text(x.tickFormat(10));`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Rename add -> append. 2010-10-02 22:00:31 +04:00			`vis.append("svg:line")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("y1", 0)`
Add ordinal scale, range. 2010-10-21 02:22:22 +04:00			`.attr("y2", h)`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("stroke", "black");`

			`</script>`
			`</body>`
			`</html>`