Old school D3 from simpler times

All examples By author By category About

apyeh

Full window Github gist

Top Baseball Hall of Fame Candidates

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Open in new window to see the chart scale.

forked from asielen's block: Reusable Responsive Multiline Chart

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="multiline.css">
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
    
</head>
<body>
<div class="chart-wrapper" id="chart-line1"></div>

<script type="text/javascript">
    d3.csv('top6_hof_career.csv', function(error, data) {
    data.forEach(function (d) {
        d.yearID = +d.yearID;
        d.AdrianBeltre = +d.AdrianBeltre;
        d.AlbertPujols = +d.AlbertPujols;
        d.AlexRodriguez = +d.AlexRodriguez;
        d.BrianMcCann = +d.BrianMcCann;
        d.IchiroSuzuki = +d.IchiroSuzuki;
        d.MiguelCabrera = +d.MiguelCabrera;
    });

var chart = makeLineChart(data, 'yearID', {
        'Adrian Beltre': {column: 'AdrianBeltre'},
        'Albert Pujols': {column: 'AlbertPujols'},
        'Alex Rodriguez': {column: 'AlexRodriguez'},
        'Brian McCann': {column: 'BrianMcCann'},
        'Ichiro Suzuki': {column: 'IchiroSuzuki'},
        'Miguel Cabrera': {column: 'MiguelCabrera'}
    }, {xAxis: 'Year', yAxis: 'Hall of Fame Probability'});
    chart.bind("#chart-line1");
    chart.render();

});
</script>
<script src="multiline.js" charset="utf-8"></script>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="multiline.css">
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
    <!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
</head>
<body>
<div class="chart-wrapper" id="chart-line1"></div>
​
<script type="text/javascript">
    d3.csv('top6_hof_career.csv', function(error, data) {
    data.forEach(function (d) {
        d.yearID = +d.yearID;
        d.AdrianBeltre = +d.AdrianBeltre;
        d.AlbertPujols = +d.AlbertPujols;
        d.AlexRodriguez = +d.AlexRodriguez;
        d.BrianMcCann = +d.BrianMcCann;
        d.IchiroSuzuki = +d.IchiroSuzuki;
        d.MiguelCabrera = +d.MiguelCabrera;
    });
​
    var chart = makeLineChart(data, 'yearID', {
        'Adrian Beltre': {column: 'AdrianBeltre'},
        'Albert Pujols': {column: 'AlbertPujols'},
        'Alex Rodriguez': {column: 'AlexRodriguez'},
        'Brian McCann': {column: 'BrianMcCann'},
        'Ichiro Suzuki': {column: 'IchiroSuzuki'},
        'Miguel Cabrera': {column: 'MiguelCabrera'}
    }, {xAxis: 'Year', yAxis: 'Hall of Fame Probability'});
    chart.bind("#chart-line1");
    chart.render();
​
});
</script>
<script src="multiline.js" charset="utf-8"></script>
</body>
</html>
    

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.js

https://d3js.org/d3.v3.min.js