Public
Edited
Apr 23
function normalizeData(data) {
let mins = {}, maxs = {};
let values = {};
Object.keys(data[0]).forEach(key => {
values = data.map(d => +d[key]);
mins[key] = Math.min(...values);
maxs[key] = Math.max(...values);
});
let checkDivision = function(v, mi, ma) {
if ((v - mi) == 0 || (ma - mi) == 0) return 0;
else return (v - mi) / (ma - mi);
};
return data.map(row => {
let normalized = {};
Object.keys(data[0]).forEach(key => {
normalized[key] = (row[key] - mins[key]) / (maxs[key] - mins[key]);
});
return normalized;
});
}
function omitClass(data){
return data.map(row => {
let newrow = {...row};
delete newrow["class"];
return newrow;
});
}
dataSinClase = omitClass(data)
datanormalizada = normalizeData(dataSinClase)
D = Object.keys(dataSinClase[0]).length
Dimensiones = Object.keys(dataSinClase[0])
R = 100
import {abs, acos, cos, sin, pi} from "@fil/math"
S = d3.scaleLinear()
.domain([R*cos()])
.range([1,D])
// esto no va
width = 500
SVG_SIDE = width
heightRadviz = 500
{
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const height = heightRadviz - margin.top - margin.bottom;
const widthRadviz = width - margin.left - margin.right;
const margin_percentage = 5
const radius = (SVG_SIDE - ((SVG_SIDE * (margin_percentage / 100) * 2))) / 2
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append('g')
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx',radius* Math.cos((data)-1 * 2*pi / 4))
.attr('cy',50)
.attr('r',10);
return svg.node();
}
//your code
margin = ({ top: 20, right: 30, bottom: 30, left: 40 });
width
heightParalell = 500
anchito = width - margin.left - margin.right;
height = heightParalell - margin.top - margin.bottom;
{
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", anchito + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {
// Extract the list of dimensions we want to keep in the plot. Here I keep all except the column called Species
let dimensions = data.keys(data[0]).filter(function(d) { return d != "Species" })
// For each dimension, I build a linear scale. I store all in a y object
var y = {}
for (let i in dimensions) {
let name = dimensions[i]
y[name] = d3.scaleLinear()
.domain( d3.extent(data, function(d) { return +d[name]; }) )
.range([height, 0])
}
// Build the X scale -> it find the best position for each Y axis
let x = d3.scalePoint()
.range([0, width])
.padding(1)
.domain(dimensions);
// The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
function path(d) {
return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// Draw the lines
svg
.selectAll("myPath")
.data(data)
.enter().append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", "#69b3a2")
.style("opacity", 0.5)
// Draw the axis:
svg.selectAll("myAxis")
// For each dimension of the dataset I add a 'g' element:
.data(dimensions).enter()
.append("g")
// I translate this element to its right position on the x axis
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
// And I build the axis with the call function
.each(function(d) { d3.select(this).call(d3.axisLeft().scale(y[d])); })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; })
.style("fill", "black")
})
return svg.node();
}
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.
