Social development practitioner. Trying to understand our world.
Published
Edited
Mar 31, 2018
2 forks
2 stars
Esri 2020 Land CoverPrintable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]Brush SnappingMermaid.jsVis.jsBuilding an Interactive Timeline with Vis.jsInteractive Tree Diagram (D3v3)Learning about Dagre ChartsSankey Diagram, D3v5Data-Driven SVG Faucet with D3 v4Provinces in IndonesiaSankey DiagramD3 Real Time Chart with Multiple Data StreamsPoint-Along-Path InterpolationToggle Data Views in Google MapsLeaflet referencing GeoJSON and In-Line PolygonsDataMapsDataTablesReal-time multi-series time series chart data (D3v3)Learning JavaScript (and Observable) by Converting a Fiddle
Learning C3.js Donut Charts in Observable
Also listed in…
Learning By Doing
d3 = require("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js")
c3 = require("https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js")
css = {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css";
return document.getElementsByTagName("head")[0].appendChild(link);
}
institution_chart = {
//Alternative means of re-formatting donut title
// per example at http://plnkr.co/edit/6eOJnMh6DE4mZejmPzc2?p=preview
c3.generate({
bindto: '#cao-cases-by-institition',
data: {
columns: [
["IFC", 86],
["MIGA", 4],
["IFC/MIGA", 10],
],
type: 'donut'
},
donut: {
title: "Cases by Instituion"
}
});
var label = d3.select('text.c3-chart-arcs-title');
//label.html(''); // remove existant text
//label.insert('tspan').text('Cases by Instituion').attr('dy', -10).attr('x', 0);
//label.insert('tspan').text('FY17').attr('dy', 20).attr('x', 0);
// More info on <tspan>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
}
region_chart = {
//Alternative means of re-formatting donut title
// per example at http://plnkr.co/edit/6eOJnMh6DE4mZejmPzc2?p=preview
c3.generate({
bindto: '#regions-chart',
data: {
columns: [
["Latin America and Caribbean", 25],
["Sub-Saharan Africa", 23],
["Europe and Central Asia", 16],
["South Asia", 12],
["East Asia and the Pacific", 14],
["Middle East and North Africa", 8],
["World", 2], ],
type: 'donut'
},
donut: {
title: "Cases by Region"
}
});
var label = d3.select('text.c3-chart-arcs-title');
//label.html(''); // remove existant text
//label.insert('tspan').text('Cases by Region').attr('dy', -10).attr('x', 0);
//label.insert('tspan').text('FY17').attr('dy', 20).attr('x', 0);
// More info on <tspan>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
}
sector_chart = {
//Alternative means of re-formatting donut title
// per example at http://plnkr.co/edit/6eOJnMh6DE4mZejmPzc2?p=preview
c3.generate({
bindto: '#cao-cases-by-sector',
data: {
columns: [
["Infrastructure", 29],
["Oil, Gas, Mining and Chemicals", 25],
["Manufactoring", 16],
["Agribusiness", 14],
["Financial Markets", 14],
["Advisory Services", 2],
],
type: 'donut'
},
donut: {
title: "Cases by Sector"
}
});
var label = d3.select('text.c3-chart-arcs-title');
//label.html(''); // remove existant text
//label.insert('tspan').text('Cases by Sector').attr('dy', -10).attr('x', 0);
//label.insert('tspan').text('FY17').attr('dy', 20).attr('x', 0);
// More info on <tspan>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
