Chapter 26: Example 1 Data
What is “Example 1 Data”?
Example 1 Data = a very small, synthetic (made-up) dataset created just for the first TensorFlow.js tutorial.
It has two parts:
- xs = input values (features / independent variable) → the “x” values
- ys = output values (labels / target / dependent variable) → the “y” values
The relationship we want the model to discover:
y ≈ 2 × x (with a tiny bit of random-looking noise so it’s not perfectly straight — that’s realistic)
Typical values used in most tutorials (including official docs):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Inputs (xs) — 10 examples, each with 1 feature const xs = tf.tensor2d( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [10, 1] // shape: 10 rows × 1 column ); // Outputs (ys) — corresponding target values const ys = tf.tensor2d( [2.1, 4.3, 5.9, 8.2, 10.1, 12.4, 14.0, 16.3, 18.2, 20.1], [10, 1] ); |
Why These Exact Numbers?
Let’s look at the pattern:
| x (input) | y (target) | Exact 2×x | Difference (noise) |
|---|---|---|---|
| 1 | 2.1 | 2.0 | +0.1 |
| 2 | 4.3 | 4.0 | +0.3 |
| 3 | 5.9 | 6.0 | -0.1 |
| 4 | 8.2 | 8.0 | +0.2 |
| 5 | 10.1 | 10.0 | +0.1 |
| 6 | 12.4 | 12.0 | +0.4 |
| 7 | 14.0 | 14.0 | 0.0 |
| 8 | 16.3 | 16.0 | +0.3 |
| 9 | 18.2 | 18.0 | +0.2 |
| 10 | 20.1 | 20.0 | +0.1 |
You can see:
- y is roughly twice x
- There is small random noise (±0.1 to ±0.4) — this makes it realistic (real-world data is never perfect)
- The noise is not too big — so a simple model can learn the pattern easily
This is intentional:
- Too perfect (y = exactly 2x) → model learns instantly, boring
- Too noisy → model struggles, frustrating for beginners
- Just right → loss drops nicely, prediction for x=15 is ≈30
Visual Picture of the Data (Imagine This Scatter Plot)
If you plot these 10 points:
- X-axis: input values (1 to 10)
- Y-axis: target values (≈2 to ≈20)
- You see 10 blue dots forming a nearly straight line with slope ≈ 2
- The line passes close to all points — that’s why linear regression works perfectly here
In real tutorials, people often add this plot with tfjs-vis:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
tfvis.render.scatterplot( {name: 'Example 1 Data', tab: 'Data'}, {values: [ {x:1, y:2.1}, {x:2, y:4.3}, /* ... all 10 points */ ]}, {xLabel: 'Input (x)', yLabel: 'Target (y)'} ); |
Why So Few Examples (Only 10)?
- For learning: 10 is enough to see the concept
- For browser speed: small data → trains in 1–3 seconds
- In real projects: you use thousands/millions — but the idea is the same
Full Example 1 with Data Visualization (Bonus)
Add this inside the <script> after loading tfjs-vis:
|
0 1 2 3 4 5 6 |
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@latest"></script> |
Then inside runExample1() — before training:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Show the data points const dataPoints = []; for (let i = 0; i < 10; i++) { dataPoints.push({x: i+1, y: [2.1,4.3,5.9,8.2,10.1,12.4,14.0,16.3,18.2,20.1][i]}); } tfvis.render.scatterplot( {name: 'Training Data – y ≈ 2x', tab: 'Data Viz'}, {values: dataPoints}, { xLabel: 'Input x', yLabel: 'Target y', height: 300, width: 500 } ); |
Now when you run → a nice scatter plot appears in the Visor!
Final Teacher Summary
Example 1 Data = the tiny, synthetic dataset used in the very first TensorFlow.js tutorial:
- 10 examples
- xs = [1, 2, 3, …, 10] (shape [10, 1])
- ys ≈ [2, 4, 6, …, 20] with small noise (shape [10, 1])
- Goal → teach the model the pattern y ≈ 2x
It’s intentionally simple so you focus on:
- How data is turned into tensors
- Model creation
- Training loop
- Prediction on new data
In Hyderabad 2026 this tiny dataset is still the starting line for every beginner — because once you understand this data + training cycle, you can scale up to real problems (flat prices, image classification, fraud detection).
Got it completely? 🌟
Want next?
- Add live loss graph with tfjs-vis to this exact data?
- Change the data to something Hyderabad-style (flat size vs price)?
- How to make the noise random in code?
Just tell me — next class is ready! 🚀
