Party Votes

(This chart is a part of the d3-charts collection available here.)

This chart is for displaying something as simple as the share of votes as per cent for political parties over time.

The example thumbnail.png shows the graph with the proper historical data for the Danish political parties according to the data by meningsmaalinger.dk, whereas the included data is arbitrary.

Usage

All parameters are in the top of the script under // Config. If we use the example script:

var dataset = "data.csv",
    parseDate = d3.time.format("%Y/%m").parse,
    yAxisTitle = "Votes (%)",
    dateValue = "Date",
    showDots = true,
    electionDate = "";  // "2014/11"

parseDate refers to the date format---in this case YYYY/MM.
electionDate refers to the date of the election, if known. This will change the maximum on the x-axis to said date to contextualize the trends.

The other parameters should be self-explanatory.

The Data

The chart thumbnail.png is based on the data from the September data from at meningsmalinger.dk (translates to polls.dk, ND).

The voter data is not included in the source code out of respect for the work that went into gathering it; I merely transcribed it from the site for personal use and to gauge the usefulness of charts based on it. Instead, placeholder data has been included in this project.

Credits

meningsmaalinger.dk for the data.
The code was based on Mike Bostock's Multi-Series Line Chart.

Bugs

Subticks don't show.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            body {
                font: 10px sans-serif;
            }

svg {
                margin-left: auto; margin-right: auto;
                display: block;
            }

line,
            rect {
                shape-rendering: crispEdges;
            }

.axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }

.x.axis path {
                display: none;
            }

.line {
                fill: none;
                stroke-width: 1.5px;
            }

circle.dot {
                fill: #FFF !important;
                stroke-width: 1.5px !important;
            }

/** Grid lines BEGIN */
        /** https://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html */
            .grid .tick {
                stroke: lightgrey;
                opacity: 0.7;
            }
            .grid path {
                 stroke-width: 0;
            }
        /** Grid lines END */
        </style>
    </head>
    <body>
        
        <script src="d3.min.js?v=3.2.8"></script>
        <script type="text/javascript"charset="utf-8">
            // Settings
            var width = 440,
                height = 400,
                padding = 30;

var margin = {
                'top': 30,
                'right': 35,
                'bottom': 30,
                'left': 30
            };

margin.hor = margin.left + margin.right;
            margin.ver = margin.top + margin.bottom;

// Config
            var dataset = "data.csv",
                parseDate = d3.time.format("%Y/%m").parse,
                yAxisTitle = "Votes (%)",
                dateValue = "Date",
                showDots = true,
                electionDate = "";  // "2014/11"

var x = d3.time.scale()
                .range([0, width]);

var y = d3.scale.linear()
                .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(7)
                .tickSubdivide(2);

var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(function(d) { return d + "%"; });

var svg = d3.select("body").append("svg")
                .attr({
                    "width": width + margin.left + margin.right,
                    "height": height + margin.top + margin.bottom
                })
                .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv(dataset, function(error, data) {
                color.domain(
                    d3.keys(data[0])
                    .filter(function(key) {
                        return key !== dateValue;
                    }));

data.forEach(function(d) {
                    d.date = parseDate(d[dateValue]);
                });

// Append x axis
                svg.append("g")
                    .attr({
                        "class": "x axis",
                        "transform": "translate(0," + height + ")"
                    })
                    .call(xAxis);

// Append y axis
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                        .attr({
                            "transform": "rotate(-90)",
                            "y": 6,
                            "dy": ".71em"
                        })
                        .style("text-anchor", "end")
                        .text(yAxisTitle);

// Gridlines
                //
                // https://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html
                 svg.append("g")
                    .attr({
                        "class": "grid",
                        "transform": "translate(0," + height + ")"
                    })
                    .call(xAxis
                        .tickSize(-height, 0, 0)
                        .tickFormat("")
                        .ticks(d3.time.months, 1)
                    );

// Graph

// Create graph
                var graph = svg.selectAll(".graph")
                    // ?
                    .data(valueColumns)
                    .enter().append("g")
                        .attr("class", "graph");

// "Connect the dots"
                graph.append("path")
                    .attr({
                        "class": "line",
                        "d": function(d) { return line(d.values); }
                    })
                    .style("stroke", function(d) { return color(d.name); });

if (showDots === true) {
                // Add dots
                var dots = svg.selectAll(".dot")
                    .data(valueColumns).enter()

// Added graph label
                graph.append("text")
                    .datum(function(d) {
                        counter = 1;
                        while (isNaN(d.values[d.values.length - counter].dataValue)) {
                            counter++;
                        }
                        return {
                            name: d.name,
                            value: d.values[d.values.length - counter]
                        };
                    })
                    .attr("transform", function(d) {
                        return "translate(" + x(d.value.date) + "," + y(d.value.dataValue) + ")"; })
                    .attr({
                        "x": 10,
                        "dy": ".35em",
                        "class": "label",
                        "id": function(d) { return d.name.toLowerCase(); }
                    })
                    .text(function(d) { return d.name; });
            });
        </script>
    </body>
</html>

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

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