Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
md`# Barchart Stack Example`
buildvis = {
let view = md`${container("")}`
let barMat = new dc.BarChart(view.querySelector("#bar-mat"))
.width(600)
.height(500)
.x(escala)
.xUnits(dc.units.ordinal)
.margins({top: 50, right: 10, bottom: 25, left: 25})
.dimension(dimStack)
.group(typeByGroup, "Nitrogen")
.valueAccessor( function(d) {
return d.value.Nitrogen;
})
.stack(typeByGroup, "normal", function (d) {
return d.value.normal;
})
.stack(typeByGroup, "stress", function (d) {
return d.value.stress;
})
.elasticY(true)
// .colorAccessor(function(d) {return +d.key[0]; })
.brushOn(false)
dc.renderAll()
return view
}
function container() {
return `
<main role="main" class="container">
<div id='bar-mat'>
<h5>Graph</h5>
</div>
</main>
`;
}
data = d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv") //Extraído do código
escala = d3.scaleOrdinal().domain(["banana", "poacee", "sorgho", "triticum"])
margin = 600//Extraído do código
dimStack = facts.dimension(d => d.group)
typeByGroup = dimStack.group().reduce(
function (p, v) {
p.Nitrogen += +v.Nitrogen;
p.normal += +v.normal;
p.stress += +v.stress;
return p;
},
function (p, v) {
p.Nitrogen -= +v.Nitrogen;
p.normal -= +v.normal;
p.stress -= +v.stress;
return p;
},
function () {
return {
Nitrogen: 0,
normal: 0,
stress: 0
};
}
);
typeByGroup.top(1)
facts = crossfilter(data)
dc = require('dc')
d3 = require("d3@5")//Extraído do código
bootstrap = require('bootstrap')
crossfilter = require('crossfilter2')
dimensions = ({
height:400,
width:600,
margin: {
top: 10,
right: 30,
bottom: 20,
left: 50,
}
})
html`<code>css</code> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@4/dist/style/dc.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<style>
#mapid {
width: 650px;
height: 480px;
}
</style>`
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.
