Published
Edited
Nov 21, 2020
1 fork
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.selectAll("rect")
.data(bins)
.join("rect")
.attr("class", d => d.believe ? "rect-believers" : "rect-deniers")
//.attr("transform", "translate(50,0)")
.attr("width", d => x(d.x1) - x(d.x0))
.attr("y", halfBandwidth + margin.top)
.attr("x", d => x(d.x0))
.style("fill", "#f2cc37")
.style("fill-opacity", d => d.believe ? 1 : 0.5)
.transition()
.duration(500)
.delay((d, i) => i % binThresholds.length * 100)
.attr("height", d => d.believe ?
halfBandwidth + margin.top - believers.scale(d.length):
deniers.scale(-d.length) - (halfBandwidth + margin.top))
.attr("y", d => d.believe ? believers.scale(d.length) : halfBandwidth + margin.top);
svg.append("g")
.call(xAxis);
return svg.node();
}
bins.map (d => d.believe ?
halfBandwidth + margin.top - believers.scale(d.length):
deniers.scale(-d.length) - (halfBandwidth + margin.top))
bins.map(d => d.believe ? believers.scale(d.length) : halfBandwidth + margin.top)
bins = d3.merge([
believers.bins.map(d => ({x0: d.x0, x1: d.x1, length: d.length, believe: true})),
deniers.bins.map(d => ({x0: d.x0, x1: d.x1, length: d.length, believe: false}))
])
believers = createHistogram(data.filter(d => d.existence == 'Yes' || d.existence == 'Y').map(d => d['existence.confidence']), binThresholds, x, y);
deniers = createHistogram(data.filter(d => d.existence == 'No' || d.existence == 'N').map(d => d['existence.confidence']), binThresholds, x, y);
data = Object.assign(d3.csvParse(await FileAttachment("1377884570_tweet_global_warming.csv").text(), d3.autoType))
function createHistogram(data, binThresholds, xScale, yScale) {
// general histogram
const histogram = d3.histogram()
.domain(xScale.domain())
.thresholds(binThresholds);
const bins = histogram(data);
// create scale
const maxBinLength = d3.max(bins.map(d => d.length));
const violinScale = d3.scaleLinear()
.range([height - margin.bottom, margin.top])
.domain([-1448, 1448]); //max lenght for the highest bar
return {
bins: bins,
scale: violinScale
}
}
binThresholds = x.ticks(50)
halfBandwidth = y.bandwidth() / 2
d3.extent(data, d => d['existence.confidence'])
x = d3.scaleLinear()
.domain([0.3, 1.01]).nice() // d3.extent(data, d => d['existence.confidence'])
.range([margin.left, width - margin.right])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0))
y = d3.scaleBand()
.range([height - margin.bottom, margin.top])
.domain(["pseudo"])
//.paddingOuter(0.1)
y.bandwidth()
width
height = 500
margin = ({top: 20, right: 20, bottom: 30, left: 40})
radius = 3
d3 = require("d3@^6.2.0")
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.
