- Chart Gallery
- Sankey Diagram
- Titanic Survivors
Titanic Survivors
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "sankey",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 17,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#997f89",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"width": null,
"height": null,
"align": "center",
"text": "<span style = \"color: #2b2b2b; font-size:20px;\">Titanic Survivors</span><br/><span style=\"color:#00bfa5; font-size: 16px;\">(by gender, age, ticket class)</span>",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#745c65",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#dacfd3",
"opacity": 0.8
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 40,
"top": 20,
"bottom": 20,
"right": 40
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"data": [
{
"from": "First Class",
"to": "Child",
"value": 6
},
{
"from": "Second Class",
"to": "Child",
"value": 24
},
{
"from": "Third Class",
"to": "Child",
"value": 79
},
{
"from": "Crew",
"to": "Child",
"value": 0
},
{
"from": "First Class",
"to": "Adult",
"value": 319
},
{
"from": "Second Class",
"to": "Adult",
"value": 261
},
{
"from": "Third Class",
"to": "Adult",
"value": 627
},
{
"from": "Crew",
"to": "Adult",
"value": 885
},
{
"from": "Child",
"to": "Female",
"value": 45
},
{
"from": "Child",
"to": "Male",
"value": 64
},
{
"from": "Adult",
"to": "Female",
"value": 425
},
{
"from": "Adult",
"to": "Male",
"value": 1667
},
{
"from": "Female",
"to": "Survived",
"value": 344
},
{
"from": "Female",
"to": "Perished",
"value": 126
},
{
"from": "Male",
"to": "Survived",
"value": 367
},
{
"from": "Male",
"to": "Perished",
"value": 1364
}
],
"palette": {
"type": "distinct",
"items": [
"#f5dc50",
"#e1a03c",
"#c87d5a",
"#fff0c8",
"#aa96b4",
"#6e5a7d",
"#e19196",
"#419bd2",
"#46afaa",
"#5a5050"
]
},
"dropoff": {
"tooltip": {},
"normal": {
"fill": {
"keys": [
{
"offset": 0,
"color": "red"
},
{
"offset": 1,
"color": "white"
}
],
"angle": -90,
"mode": false,
"opacity": 1
},
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": false
}
},
"hovered": {
"labels": {
"enabled": true
}
}
},
"flow": {
"tooltip": {},
"normal": {
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": false
}
},
"hovered": {
"labels": {
"enabled": true
}
}
},
"node": {
"tooltip": {},
"normal": {
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": true,
"fontSize": 14,
"useHtml": true,
"format": "<span style=\"font-weight:bold\">{%name}</span><br>{%value}"
}
},
"hovered": {
"labels": {}
}
},
"nodeWidth": "40%",
"nodePadding": 30,
"curveFactor": 0.33
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/light_provence.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('lightProvence');
// add data
var data = [
{from: 'First Class', to: 'Child', value: 6},
{from: 'Second Class', to: 'Child', value: 24},
{from: 'Third Class', to: 'Child', value: 79},
{from: 'Crew', to: 'Child', value: 0},
{from: 'First Class', to: 'Adult', value: 319},
{from: 'Second Class', to: 'Adult', value: 261},
{from: 'Third Class', to: 'Adult', value: 627},
{from: 'Crew', to: 'Adult', value: 885},
{from: 'Child', to: 'Female', value: 45},
{from: 'Child', to: 'Male', value: 64},
{from: 'Adult', to: 'Female', value: 425},
{from: 'Adult', to: 'Male', value: 1667},
{from: 'Female', to: 'Survived', value: 344},
{from: 'Female', to: 'Perished', value: 126},
{from: 'Male', to: 'Survived', value: 367},
{from: 'Male', to: 'Perished', value: 1364}
];
// create a sankey diagram instance
var chart = anychart.sankey();
// load the data to the sankey diagram instance
chart.data(data);
// set the chart's padding
chart.padding(20, 40);
// configure a custom color palette
chart.palette([
'#f5dc50',
'#e1a03c',
'#c87d5a',
'#fff0c8',
'#aa96b4',
'#6e5a7d',
'#e19196',
'#419bd2',
'#46afaa',
'#5a5050'
]);
// customize the nodes:
// set the width
chart.nodeWidth('40%');
// set the padding
chart.nodePadding(30);
// customize the labels
chart.node().normal().labels().fontSize(14);
chart.node().labels().useHtml(true);
chart
.node()
.labels()
.format('<span style="font-weight:bold">{%name}</span><br>{%value}');
// customize the links
chart.flow({
normal: {
fill: function () {
return anychart.color.lighten(this.sourceColor, 0.5) + ' ' + 0.3;
}
},
hovered: {
fill: function () {
return this.sourceColor + ' ' + 0.8;
}
}
});
// add a title and customize it
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #2b2b2b; font-size:20px;">Titanic Survivors</span>' +
'<br/><span style="color:#00bfa5; font-size: 16px;">(by gender, age, ticket class)</span>'
);
// set the chart container id
chart.container('container');
// draw the chart
chart.draw();
});
</script>
</body>
</html>
This is an interactive JS Sankey diagram visualizing who of the Titanic's crew and passengers survived and perished — by gender, age, and ticket class. Features custom colors, nodes, links, and title. Data is taken from the Titanic dataset on Kaggle.
Check out how this JavaScript chart was built step-by-step in this Sankey Diagram Tutorial.