Code and stories for ABC News and other experiments online
Published
Edited
Apr 22, 2019
1 fork
4 stars
{
const svg = DOM.svg(width, 500);
const data = d3.csvParse(monthlyTemperatureAnomaly);
const height = 500;
const blockHeight = height / 12;
const blockWidth = width / 110;
const colorScale = d3
.scaleLinear()
.domain([-3, 0, 3])
.range(["#1f5cdf", "#dddddd", "#f00f53"]);
let months = [];
data.forEach(year => {
for (const x in year) {
if (x === "Year") continue;
months.push(year[x]);
}
});
d3.select(svg)
.selectAll("rect")
.data(months)
.enter()
.append("rect")
.attrs({
fill: function(d) {
return colorScale(d);
},
x: function(d, i) {
const rowIndex = Math.floor(i / 12);
return rowIndex * blockWidth;
},
y: function(d, i) {
const colIndex = i % 12;
return colIndex * blockHeight;
},
width: blockWidth,
height: blockHeight
});
return svg;
}
{
const colorScale = d3
.scaleLinear()
.domain([14, 20, 38])
.range(["#1f5cdf", "#dddddd", "#f00f53"]);
const normalData = {};
sydneyDaily
.filter(d => d.Temp > 3) // Removes 0 data
.forEach(element => {
const key = element.Year;
if (element.Year === "2019") return;
if (normalData[key] == null) normalData[key] = [];
else {
normalData[key].push(element.Temp); // TODO: make it a map
}
});
// Divide the global width with however many keys we have
const individualWidth = Math.min(
(width * 0.999) / Object.keys(normalData).length
);
return html`
${Object.keys(normalData).map((key, iteration) => {
const gradientString = normalData[key]
.map(d => {
return colorScale(d);
})
.join(",");
const styleGradient = `linear-gradient(${gradientString})`;
return `<div
style="display: inline-block;
width: ${individualWidth}px;
height: 600px;
background-image: ${styleGradient}"
></div>`;
})}
`;
}
{
const height = 700;
const blockHeight = height / 100;
const blockWidth = 10;
const svg = DOM.svg(width, height);
const data = d3.csvParse(dataHighProjection);
const colorScale = d3
.scaleLinear()
.domain([0, 1.5, 3])
.range(["#68CAB6","#eeeeee","#CA7068"]);
d3.select(svg)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attrs({
fill: function(d) {
return colorScale(d.Temp);
},
y: function(d, i) {
return i * blockHeight;
},
width: (d, i) => {
return d.Temp * width * 0.15;
},
height: blockHeight
});
return svg;
}
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.
