Hi. I'm Nicolas Lambert, research engineer in geographic information science at CNRS (France). My job is to draw maps and teach cartography at the university. I am a geographer 🌎, and not really a developer 🖥️
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style('background-color', col1);
// Defs
var defs = svg.append("defs");
const pattern = defs
.append("pattern")
.attr("id", "hatch")
.attr("patternUnits", "userSpaceOnUse")
.attr("width", 6)
.attr("height", 6);
pattern
.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 6)
.attr("y1", 6)
.attr("stroke", col2)
.attr("stroke-width", 1)
.attr("stroke-opacity", 0.4);
svg
.append("rect")
.attr("fill-opacity", 0.4)
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr('fill', "url('#hatch')");
let title = "#30DayMapChallenge by @neocartocnrs";
svg
.append("text")
.attr("y", 48)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("fill", col2)
.style("font-size", "33px")
.text(title);
svg
.append("text")
.attr("y", 72)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("fill", col3)
.style("font-size", "17px")
.text(
"The length of the bars is proportional to the number of like and RT"
);
svg
.append("png:image")
.attr("x", 20)
.attr("y", 20)
.attr("width", 100)
.attr(
"xlink:href",
"https://www.nicepng.com/png/full/927-9274906_ideon-branding-consultancy-nyc-twitter-logo-twitter-round.png"
);
svg
.append("png:image")
.attr("x", width - 120)
.attr("y", 20)
.attr("width", 100)
.attr(
"xlink:href",
" https://www.nicepng.com/png/full/927-9274906_ideon-branding-consultancy-nyc-twitter-logo-twitter-round.png"
);
for (let i = 0; i < 30; i++) {
let dd = 25;
let y = 100;
svg
.append("text")
.attr("y", y + i * dd)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("fill", col2)
.style("font-size", "12px")
.text("Day " + (i + 1) + ": " + data[i]["name"]);
svg
.append("a")
.append("rect")
.attr("x", width / 2 - (data[i]["value"] * k) / 2)
.attr("y", y + 5 + i * dd)
.attr("width", data[i]["value"] * k)
.attr("height", 8)
.attr("fill", col3)
.on("mouseover", function() {
d3.select(this)
.attr("fill", "#cc1458")
.style("cursor", "pointer");
})
.on("mouseout", function() {
d3.select(this).attr("fill", col3);
})
.on('click', function() {
console.log('open tab');
window.open(
data[i]["url"],
'_blank' //
);
});
svg
.append("text")
.attr("y", y + 12.5 + i * dd)
.attr("x", width / 2 + (data[i]["value"] * k) / 2 + 3)
.attr("text-anchor", "left")
.attr("font-family", "sans-serif")
.attr("fill", col3)
.style("font-size", "10px")
.text(data[i]["value"]);
}
// TOTAL
svg
.append("text")
.attr("y", 888)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("fill", col3)
.style("font-size", "35px")
.text("- Total -");
svg
.append("text")
.attr("y", 911)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("fill", col3)
.style("font-size", "18px")
.text(format(d3.sum(data, d => d.value)) + " likes and RT");
svg
.append("text")
.attr("y", 930)
.attr("x", width / 2)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("fill", col3)
.style("font-size", "10px")
.text("Last Update: " + date);
let size = 50;
svg
.append("svg:image")
.attr("x", width - size - 10)
.attr("y", height - 30)
.attr("width", size)
.attr(
"xlink:href",
"https://nlambert.gitpages.huma-num.fr/resources/images/signature_yellow.svg"
);
return svg.node();
}
md`# Parameters`
col1 = "#08182b"
col2 = "#f4f4f4"
col3 = "#fbd14b"
md`# Data Handling`
format = d3.format(",.0f")
date = d3.text(
"https://nlambert.gitpages.huma-num.fr/resources/datasets/30daymapchallenge/update.txt"
)
k = (width - 100) / d3.max(data, d => d.value)
tweets = d3.csv(
"https://nlambert.gitpages.huma-num.fr/resources/datasets/30daymapchallenge/30dmc2020.csv"
)
data = tweets.map(d => {
const day = d.day;
const theme = d.theme;
const favorite_count = d.favorite_count;
const retweet_count = d.retweet_count;
return {
day,
name: theme,
title: 1,
value: +retweet_count + +favorite_count,
url: "https://twitter.com/neocartocnrs/status/" + d.status_id
};
})
width = 932
height = 950
d3 = require("d3@6")
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.
