data = d3.csv("https://raw.githubusercontent.com/tanvirrazin/Machine-Learning-A-Z-Udemy/master/data_files/Salary_Data.csv")
function splitTrainingAndTest(arr, percentage) {
const training = [...arr];
const test = [];
let testSize = Math.floor(arr.length * percentage);
for (let i = 0; i < testSize; i++) {
let index = Math.floor(Math.random() * training.length);
let value = training.splice(index, 1);
test.push(value[0]);
}
return { training, test };
}
obj = splitTrainingAndTest(data, 1/3);
result = regression.linear(trainingData.map((item) => (
[parseFloat(item.YearsExperience), parseFloat(item.Salary)]
)));
gradient = result.equation[0];
yIntercept = result.equation[1];
predictions = testData.map((item) => {
return (gradient * item.YearsExperience) + yIntercept;
});
testDataValues = testData.map((item) => parseFloat(item.Salary));
differences = predictions.map((prediction, index) => (
prediction - testDataValues[index]
))
differencesChart = {
const svg = d3.select(DOM.svg(width, height));
// set background
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#EEEEEE");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const colorMapping = [
{
name: "Training",
color: "blue"
},
{
name: "Test",
color: "orange"
}
];
// draw training points
svg.append("g")
.attr("stroke", "blue")
.attr("fill", "blue")
.selectAll("circle")
.data(trainingData)
.join("circle")
.attr("cx", d => x(d.YearsExperience))
.attr("cy", d => y(d.Salary))
.attr("r", 2);
// draw test points
svg.append("g")
.attr("stroke", "orange")
.attr("fill", "orange")
.selectAll("circle")
.data(testData)
.join("circle")
.attr("cx", d => x(d.YearsExperience))
.attr("cy", d => y(d.Salary))
.attr("r", 2);
const xAxisMin = d3.min(trainingData, d => Math.floor(d.YearsExperience));
const xAxisMax = d3.max(trainingData, d => Math.floor(d.YearsExperience));
// draw regression line
svg.append('line')
.attr('x1',x(xAxisMin))
.attr('x2',x(xAxisMax))
.attr('y1',y(gradient * xAxisMin + yIntercept))
.attr('y2',y(gradient * xAxisMax + yIntercept))
.attr("stroke", "darkgrey")
// draw legend
var legend = svg.selectAll(".legend")
.data(colorMapping)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-10," + ((i * 20) + 10) + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", d => d.color);
// draw legend text
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d.name;})
// add title
svg.append("g")
.append("text")
.attr("x", width/2)
.attr("y", 50)
.attr("font-size", "1.5em")
.attr("font-weight", "300")
.style("text-anchor", "middle")
.text("Salary from Years Experience");
return svg.node();
}
// Machine-Learning A-Z Dataset
// https://github.com/tanvirrazin/Machine-Learning-A-Z-Udemy/tree/master/data_files
// Regression-JS
// https://github.com/Tom-Alexander/regression-js
// D3 Scatterplot Example
// http://bl.ocks.org/weiglemc/6185069
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
