Demo: Creating Datawrapper visualizations from a template!

You can send visitors to Datawrapper providing a preset dataset and chart options from which they can start creating a new visualization!

Plain HTML version:

Visualization Type type

Title title

Description description

ARIA Description aria_description

Notes notes

Source source_name

Source URL source_url

Byline byline

External Data URL external_data

Dataset data

Quarter;iPhone;iPad;Mac;iPod
    Q3 2000;;;1.1;
    Q4 2000;;;0.6;
    Q1 2001;;;0.7;
    Q2 2001;;;0.8;
    Q3 2001;;;0.8;
    Q4 2001;;;0.7;
    Q1 2002;;;0.8;
    Q2 2002;;;0.8;
    Q3 2002;;;0.7;
    Q4 2002;;;0.7;
    Q1 2003;;;0.7;
    Q2 2003;;;0.8;
    Q3 2003;;;0.8;0.3
    Q4 2003;;;0.8;0.7
    Q1 2004;;;0.7;0.8
    Q2 2004;;;0.9;0.9
    Q3 2004;;;0.8;2
    Q4 2004;;;1;4.6
    Q1 2005;;;1.1;5.3
    Q2 2005;;;1.2;6.2
    Q3 2005;;;1.2;6.4
    Q4 2005;;;1.3;14
    Q1 2006;;;1.1;8.5
    Q2 2006;;;1.3;8.1
    Q3 2006;;;1.6;8.7
    Q4 2006;;;1.6;21
    Q1 2007;;;1.5;10.5
    Q2 2007;;;1.7;9.9
    Q3 2007;1.1;;2.2;10.2
    Q4 2007;2.3;;2.3;22.1
    Q1 2008;1.7;;2.3;10.6
    Q2 2008;0.7;;2.5;11
    Q3 2008;6.9;;2.6;11
    Q4 2008;4.4;;2.5;22.7
    Q1 2009;3.8;;2.2;11
    Q2 2009;5.2;;2.6;10.2
    Q3 2009;7.4;;3;10.2
    Q4 2009;8.7;;3.4;20.1
    Q1 2010;8.7;;2.9;10.9
    Q2 2010;8.4;3.3;3.5;9.4
    Q3 2010;14.1;4.2;3.9;9
    Q4 2010;16.2;7.3;4.1;19.4
    Q1 2011;18.7;4.7;3.8;9
    Q2 2011;20.3;9.2;3.9;7.5
    Q3 2011;17.1;11.1;4.9;6.6
    Q4 2011;37.044;15.4;5.2;15.4
    Q1 2012;35.064;11.8;4;7.7
    Q2 2012;26.028;17;4;6.7
    Q3 2012;26.91;14;4.9;5.3
    Q4 2012;47.789;22.9;4;12.7
    Q1 2013;37.43;19.5;4;5.6
    Q2 2013;31.241;14.6;3.8;4.6
    Q3 2013;33.797;14;4.6;3.5
    Q4 2013;51.025;26;4.8;6
    Q1 2014;43.719;16.3;4.1;2.8
    Q2 2014;35.203;13.3;4.4;2.9
    Q3 2014;39.272;12.3;5.5;2.6
    Q4 2014;74.468;21.4;5.2;3.6
    Q1 2015;61.17;12.6;4.6;
    Q2 2015;47.534;10.9;4.8;
    Q3 2015;48.046;9.9;5.7;
    Q4 2015;74.779;16.1;5.3;
    Q1 2016;51.193;10.2;4;
    Q2 2016;40.399;9.95;4.25;
    Q3 2016;45.513;9.3;4.9;
    Q4 2016;78.29;13.1;5.4;
    Q1 2017;50.763;8.9;4.2;
    Q2 2017;41.03;11.4;4.3;
    Q3 2017;46.7;10.3;5.4;
    Q4 2017;77.3;13.2;5.1;

Show source code

<form method="POST" target="_blank" action="https://app.datawrapper.de/create/">
    <input type="text" name="type" value="d3-lines" />
    <input name="title" type="text" value="This is the chart title" />
    <input name="description" type="text" value="Some more text to go below the headline" />
    <input name="source_name" type="text" value="ACME Inc." />
    <input type="submit" value="Create chart" />
    <textarea name="data">Quarter;iPhone;iPad;Mac;iPod
Q3 2000;;;1.1;
Q4 2000;;;0.6;
Q1 2001;;;0.7;
Q2 2001;;;0.8;
Q3 2001;;;0.8;
Q4 2001;;;0.7;
Q1 2002;;;0.8;
Q2 2002;;;0.8;
Q3 2002;;;0.7;
Q4 2002;;;0.7;
    </textarea>
</form>

JavaScript version:

JSON payload

Show source code

function openInDatawrapper(payload) {
    const form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("target", "_blank");
    form.setAttribute("action", "https://app.datawrapper.de/create/");
    Object.keys(payload).forEach((key) => {
        const input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", key);
        input.setAttribute("value",
            key === "metadata"
                ? JSON.stringify(payload[key])
                : payload[key]
        );
        form.appendChild(input);
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

More JS demos

show source code

openInDatawrapper({
    type: 'd3-maps-choropleth',
    title: 'Covid19 indicence per state',
    description: 'Maps can have descriptions, too',
    metadata: {
        axes: {
            keys: 'state',
            values: 'indicence'
        },
        visualize: {
            basemap: "germany-states"
        }
    },
    data: 'state,indicence\nNordrhein-Westfalen,187\nBaden-Württemberg,196\nHessen,180\nBremen,158\nNiedersachsen,119\nThüringen,227\nHamburg,105\nSchleswig-Holstein,74\nRheinland-Pfalz,143\nSaarland,143\nBayern,179\nBerlin,138\nSachsen-Anhalt,180\nSachsen,232\nBrandenburg,128\nMecklenburg-Vorpommern,139'
})

show source code

openInDatawrapper({
    type: 'd3-lines',
    title: 'Confirmed COVID–19 cases in <b style="border-bottom:3px solid #000000;">Europe</b>, per day',
    notes: 'Seven day rolling average of the number of people confirmed to have COVID-19, compared with the number of people who die and recover, per day (not including today). This chart gets updated once per day with data by Johns Hopkins. Johns Hopkins university didn\'t provide reliable data for March 12 and March 13.',
    source_name: 'Johns Hopkins CSSE',
    source_url: 'https://github.com/CSSEGISandData/COVID-19',
    external_data: 'htt
})