Skip to content
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

Add example for diverging color #1591

Merged
merged 4 commits into from
Oct 19, 2016
Merged

Add example for diverging color #1591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbfe6de
add one example for diverging color
YuhanLu Oct 17, 2016
5a63c34
fixed description of the example and the doc
YuhanLu Oct 18, 2016
29e33b7
Change description.
kanitw Oct 19, 2016
63ae0e1
Update scale.md
kanitw Oct 19, 2016
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
17 changes: 17 additions & 0 deletions examples/specs/diverging_color_points.vl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"description": "A bubbleplot showing horsepower on x, miles per gallons on y, and weight with a diverging color scale.",
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower","type": "quantitative"},
"y": {"field": "Miles_per_Gallon","type": "quantitative"},
"color": {
"field": "Weight_in_lbs",
"type": "linear",
"scale": {
"domain": [1000,2750,4500],
"range": ["#ff7f0e","#e7ba52","#17becf"]
}
}
}
}
7 changes: 7 additions & 0 deletions site/docs/scale.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,13 @@ For ordinal, quantitative, and time fields, `range` can be a two-element array d

<div class="vl-example" data-name="scatter_color_ordinal_custom"></div>

### Piecewise Scale Example: Diverging Color Scale

We can also create diverging color graph by specify `range` with multiple elements. Number of elements of `range` should match with the number of elements in `domain`. Though continuous scale normally contains 2 elements in both `domain` and `range`, having 3 or more elements will create a piecewise scale. For more detail about a piecewise scale, please refer to [D3 documentation](https://github.com/d3/d3-scale#continuous_domain).

<div class="vl-example" data-name="diverging_color_points"></div>


## Other Scale Properties

### General Scale Properties
Expand Down