Skip to content

Jaw.clarify definitions and layout #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Jaw.clarify definitions and layout #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3eb1bb4
add some docs to explain translation
jawspeak Aug 30, 2015
32d638d
Merge pull request #1 from jawspeak/jaw.clarify-svg-math
jawspeak Aug 30, 2015
8de6393
clean up layout and some of the definitions
jawspeak Aug 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/examples/axes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% include examples/data.js %}

var x = d3.time.scale()
.range([50, 250])
.range([50, 300])
.domain(d3.extent(data, function(d) { return new Date(d.date); }));

{% include examples/axes.js %}
Expand Down
4 changes: 2 additions & 2 deletions _includes/examples/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ var xAxis = d3.svg.axis()

var svg = d3.select('body')
.append('svg') // create an <svg> element
.attr('width', 300) // set its dimentions
.attr('height', 150);
.attr('width', 350) // set its dimentions
.attr('height', 50);

svg.append('g') // create a <g> element
.attr('class', 'x axis') // specify classes
Expand Down
77 changes: 69 additions & 8 deletions _includes/examples/scatterplot.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 14 additions & 13 deletions z02-parts-of-a-graph.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,15 @@ We'll need to manually write out each point. Transform attributes are inherited
by child elements, so we can use `<g>` tags to move entire groups, such as the
axes, or even offset the entire graph by a margin.

<div class="example-row-2">
<div class="example-row-1">
<div class="example">
{% include examples/scatterplot.svg %}
</div>
<div class="example">
{% highlight html %}
{% include examples/scatterplot.svg %}
{% endhighlight %}
</div>
<div class="example">
{% include examples/scatterplot.svg %}
</div>
</div>

Man! All that work for such a simple graph? SVG is a lot of work!
Expand All @@ -130,6 +130,8 @@ often the data is homogenous arrays.
{% include examples/data.js %}
d3.min(numbers);
// 1
d3.extent(numbers);
Copy link
Collaborator

@zachmargolis zachmargolis Aug 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extent is used an an example a few lines below. Should we remove that to move it up here?

// [1, 10]
{% endhighlight %}
</div>
</div>
Expand All @@ -155,8 +157,8 @@ d3.extent(numbers);

D3 has objects called scales that help map values across coordinate systems.
There are different kinds of scales (linear, logarithmic, linear for time).
Scales are configured with a domain and a range, they map from the data to
the approprate part of the screen (screen space).
Scales are configured with a Domain (the raw data) and a Range (pixel plot size),
Copy link
Collaborator

@zachmargolis zachmargolis Aug 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not capitalize "Domain" and "Range" here, they're not proper nouns.

Would this sentence reflect the clarification you're trying to make?

Scale are configured with a domain (the raw data) and a range (the pixels to output to). As functions, they map this raw data to the appropriate part of the screen (screen space).

they map from the data to the approprate part of the screen (screen space).

Here is how we set up the y-scale for the above money example:

Expand Down Expand Up @@ -224,19 +226,18 @@ We'll come across more scales later.

In our example, up top, we have these nice labels and tick marks. This is
something D3 can do for us. We can build an axis, and apply it to a scale. We
say, "hey, I want to build an axis that".
say, "hey, I want to build an axis that labels the plot".
Copy link
Collaborator

@zachmargolis zachmargolis Aug 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

derp, good catch. I think I meant "an axis that describes the range of data that I have"


<div class="example-row-2">
<div class="example-row-1">
Copy link
Collaborator

@zachmargolis zachmargolis Aug 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The style of this tutorial is to have code on the left side, result on the right side. What is the goal of the single column layout?

<iframe class="example"
height="50"
src="{{ "/examples/axes" | prepend: site.baseurl }}">
</iframe>
<div class="example">
{% highlight javascript %}
{% include examples/axes.js %}
{% endhighlight %}
</div>

<iframe class="example"
height="180"
src="{{ "/examples/axes" | prepend: site.baseurl }}">
</iframe>
</div>

D3's axes are really powerful! Notice how we built it using <kbd>Date</kbd>
Expand Down