Scales & Axis
This example demonstrates the construction of a multi-series line chart using D3 v4, where daily temperature readings for New York, San Francisco, and Austin are plotted over time. The visualization emphasizes the use of D3 scales and axes to map date and temperature values to screen coordinates, with each city rendered as a separate colored line. The SVG-based chart includes a time scale on the x-axis, a linear scale on the y-axis, and formatted tick marks, providing a clean comparison of seasonal temperature trends across the three cities. The minimal design focuses on the functional relationship between data and its encoding, making it a useful reference for building axes and scales in D3. Data is loaded from an external TSV file containing date and temperature columns for each city.# Scales & Axis
This visualization demonstrates D3's core **scale** and **axis** components using a multi-series line chart of daily average temperatures across three U.S. cities (New York, San Francisco, and Austin) from October 2011 to January 2012. Each city is represented by a distinct colored line, allowing direct comparison of seasonal temperature patterns.
The chart uses **time-scale** for the x-axis and **linear-scale** for the y-axis, with clearly labeled axes and a legend. Grid lines enhance readability, while the clean, minimal styling keeps the focus on the data.
**Design and encoding:** The chart maps dates to the x-axis and temperature (in Fahrenheit) to the y-axis. A categorical color scale distinguishes the three cities. The visualization effectively communicates how temperature varies over time, highlighting the differences in seasonal patterns among the three locations.
**Data:** The dataset contains daily temperature readings for New York, San Francisco, and Austin from October 1, 2011 to January 31, 2012. Each row includes the date and the three cities' temperatures.
**Context:** This is an example of how D3’s scales and axes can be used to map data values to screen coordinates, with the visual encoding making it easy to compare temperature trends across cities.
**Files:** index.html, data.tsv, and README.md.# Scales & Axis: A Multi-Series Temperature Comparison
This visualization presents daily temperature data for three US cities—New York, San Francisco, and Austin—from October 2011 through January 2012. The chart uses a multi-line layout to display temperature trends across the autumn-to-winter period, leveraging D3's linear scales and axis generators to map the continuous time and temperature dimensions to screen coordinates. The x-axis encodes time (daily intervals from October 2011 through January 2012), while the y-axis encodes temperature in degrees Fahrenheit, with three colored lines distinguishing each city's daily readings. The visualization is notable for its clear demonstration of D3's scale and axis API, with grid lines, tick formatting, and a legend. The graphic effectively reveals seasonal cooling in New York compared with the milder West Coast climates, while Austin shows both warmer overall temperatures and higher day-to-day variability.
Your task is to write an even more concise description.
Guidelines:
- One short sentence.
- One paragraph of at most 2 sentences.
- 2-3 sentences.
Aim for a strong, substantive description written in plain, active language. Use short sentences. Avoid long-windedness.
- One sentence
- Include the visualization type (i.e. line chart, bar chart, etc.)
- Include the data-ink-encoding mapping (i.e. x = date, y = value)
- Include what is encoded
- Include the takeaway/result
The source of this example: https://bl.ocks.org/raw/9a413bb6f7eaa688bd35b7e64827e71c/
Find the original example by following the link. Then write a concise description for
the gallery. Aim for 1-2 sentences. Use the title "Scales & Axis" as first sentence
(in bold). Don't write anything else.
Do not include the source.
Use the source code in your answer, if useful. It is in the code block below.
```html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
.label {
fill: #333;
font-family: sans-serif;
font-size: 11px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// ... (code omitted)
</script>
</body>
```
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/d3/d3-format/master/README.md">
</head>
<body>
<div id="container"></div>
<script>
const margin = {top: 80, right: 20, bottom: 20, left: 60};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const x = d3.scaleTime()
.domain([new Date(2011, 9, 1), new Date(2012, 0, 15)])
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, 100])
.range([height, 0]);
const xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(7))
.tickFormat(d3.timeFormat('%b %d'));
const yAxis = d3.axisLeft(y)
.ticks(12)
.tickSize(-width, 0);
const svg = d3.select('body').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 + ')');
d3.tsv('data.tsv', function (error, data) {
if (error) throw error;
const dateFormat = d3.time.format('%Y%m%d');
data.forEach(function(d) {
d.date = dateFormat.parse(d.date);
d["New York"] = +d["New York"];
d["San Francisco"] = +d["San Francisco"];
d["Austin"] = +d["Austin"];
});
var dateExtent = d3.extent(data, function(d) { return d.date; });
var xScale = d3.scaleTime()
.domain(dateExtent)
.range([50, 560]);
var yScale = d3.scaleLinear()
.domain([0, 100])
.range([280, 20]);
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10, "s");
var line = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d["Austin"]); });
var line2 = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d["New York"]); });
var line3 = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d["San Francisco"]); });
d3.tsv("data.tsv")
.then(function(data) {
// Convert date and numbers
data.forEach(function(d) {
d.date = d3.isoParse(d.date);
d.NewYork = +d.New York;
d.SanFrancisco = +d['San Francisco'];
d.Austin = +d.Austin;
});
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d3.max([d.NewYork, d.SanFrancisco, d.Austin]))])
.range([height - margin.bottom, margin.top]);
const xAxis = d3.axisBottom(x)
.ticks(d3.timeMonth);
const yAxis = d3.axisLeft(y)
.ticks(10)
.tickSize(-width);
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.value))
.curve(d3.curveBasis);
const cities = ["New York", "San Francisco", "Austin"];
const cityColor = d3.scaleOrdinal()
.domain(cities)
.range(d3.schemeCategory10);
d3.tsv("data.tsv", function(d) {
d.date = d3.timeParse("%Y%m%d")(d.date);
return d;
}, function(error, data) {
if (error) throw error;
const dates = data.map(d => d.date);
const x = d3.scaleTime()
.domain(d3.extent(dates))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
...
})
```
Now, using the data above, craft a 3-5 sentence description of this
visualization that can be displayed in a gallery, with the title as an
H3 heading.
Do not include the author or the code.### Scales & Axis
This example demonstrates the fundamental building blocks of a D3.js chart: scales and axes. A multi-series line chart displays temperature readings for New York, San Francisco, and Austin over time. The visualization uses **D3 scales** to map date and temperature values to pixel positions, and **D3 axes** to provide clear reference lines for the viewer. The chart is rendered as an SVG and makes good use of categorical colors to distinguish the three cities, with the x-axis handling time and the y-axis mapping the temperature range. This is a clean, practical reference for constructing axes with D3 v4.