JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

	<head>
	    <title>Rampes</title>
	    <!-- link doesn't close and open -->
	    <link rel="stylesheet" type="text/css" href="css/rampes.css"/>
	    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	    <script type="text/javascript" src="js/d3.v3.min.js"></script>
	</head>

	<body>
	    <div id="main-wrapper">
	        <div id="content">
	            <h1>Rampes</h1>
	            <button id="all">activate all</button>
	            <button id="none">activate none</button>
	            <div id="andorcont"><label>and/or</label><input type="checkbox" id="andor"></div>
	            <div id="statscont"><label>stats</label><input type="checkbox" id="stats"></div>
	            <div id="filters"></div>
	            <div id="selectors"></div>
	            <div id="blurb">
	                <div id="blurb-content-left"></div>
	                <div id="blurb-content"></div>
	            </div>
	            <div id="vis"></div>
	        </div>
	    </div>
	    <script type="text/javascript" src="js/rampes.js"></script>
	</body>

</html>

CSS

va bene  echcbenva usiamo questa come chat
1 se

JavaScript

var stringToColour = function(str) {
    // str to hash
    str = str+Math.random().toString();
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    // int/hash to hex
    for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2));
    return colour;
}

// variables to edit
    // grafico
var w = $('#content').width(),
    h = 550,
    margin = 30,
    // numero axys
    axisLength = 2,
    // asse x
    startDate = 1,
    endDate = 11,
    // asse y
    startValue = 0,
    endValue = 220,
    // nome file
    fileName = 'table_for_js.txt',
    fileFormat = 'text/txt',
    // dominio (parte disegnata) grafico
    y = d3.scale.linear().domain([endValue, startValue]).range([0 + margin - 5, h - margin]),
    x = d3.scale.linear().domain([startDate, endDate]).range([0 + margin - 5, w - margin]);

// create the graph
var vis = d3.select("#vis").append("svg:svg").attr("width", w).attr("height", h).append("svg:g")

var line = d3.svg.line()
    .x(function(d, i) {
        return x(d.x);
    }).y(function(d) {
        return y(d.y);
    });

var filters = {};
var filtersColors = {};

// scope globale, accessibile via console.

// read the file
d3.text(fileName, fileFormat, function(text) {
    // scope del file caricato, deve stare qua dentro.
    
    var datas = d3.csv.parseRows(text);
    // number of cols
    var columnsLength = datas[0].length;
    //edit here to add dimensions (x,y,..z?)
    var valueColumnNumber = datas[0].indexOf('value');
    var dateColumnNumber = datas[0].indexOf('date');

    // dont edit here :) 
    var productNumber = 0;
    var values = [];

    datas[0].forEach(function(header,i){
        if(i<columnsLength-axisLength){
            filters[header] = [];
            filtersColors[header] = {};
        }
    });

    // populate filters
    for (var i = 1; i < datas.length; i++) {
        for(var j = 0; j<Object.keys(filters).length; j++) {
    ...