D3 Tutorial Bar Chart

<script>
function parseData() {

    var pathToCSVFile = "temperaturSeenSchweiz.csv";
    
    d3.csv(pathToCSVFile, function (dataset) {
        drawBarChart(dataset);
    });
    
}

    
function drawBarChart(dataset) {
    
    //Width and height of SVG Element
    var w = 500;
    var h = 100;
    var barPadding = 0.15;
    
    //define yScale
    var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) { return d.Wassertemperatur })])
        .range([0, h]);
    
    //define xScale
    var xScale = d3.scale.ordinal()
        .domain(dataset.map(function(d) { return d.Gewaesser }))
        .rangeRoundBands([0,w], barPadding);

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .attr("id", "svgElement");

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", function(d) { return xScale(d.Gewaesser)})
       .attr("y", function(d) { return h - yScale(d.Wassertemperatur)})
       .attr("height", function(d) { return yScale(d.Wassertemperatur)})
       .attr("width", xScale.rangeBand())
       .attr("fill", function(d) {
            return "rgb(0, 0, " + (d.Wassertemperatur * 15) + ")";
       });

}
</script>
        

Verwendete Links

Erweiterte Version des Bar Charts: http://bar-chart-extended.opendata.iwi.unibe.ch/

Weitere Links in Erklärung

Beispieldaten:

- Temperatur Seen Schweiz im Winter: temperaturSeenSchweiz.csv

- Luftqualitätsmessung in Zürich (Feinstaub): ugz_luftqualitaetsmessungen.csv

- Wohnungsbestand in diversen Städten 2011: wohnungsbestand_2011.csv

- Sehr viele weitere Datensätze im Opendata Portal der Schweiz: http://central-ckan.liip.ch.chbar1.nine.ch/