The avatar for @bea92
bea92
Public
ShapingAI
Edited
Mar 5, 2024
Fork of Input + Chart
4
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
style = html`
<style>

.toolTip {
position: absolute;
display: none;
min-width: 30px;
max-width: 350px;
border-radius: 4px;
overflow-wrap: break-word;
height: auto;
background: rgba(250,250,250, 0.9);
border: 1px solid #DDD;
padding: 4px 8px;
font-size: .85rem;
font-family: 'Epilogue';
text-align: left;
text-transform:capitalise;
z-index: 1000;
}

.toolTip h4{
font-family: 'DM Sans', sans-serif;
line-height:1rem;
margin-top:0.85rem;
}
</style>
`
Insert cell
changeColor = function(d) {if(colorButton === "tweets") {return myColor2(d.n_tweets)} else {return colorDisa(d.disagreement)}}
Insert cell
tweetsScale = (d)=>myColor2(d.n_tweets)
Insert cell
disagreementScale = (d)=>colorDisa(d.disagreement)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y = d3.scaleLinear()
.domain([d3.min(data, d=>d.y),d3.max(data, d=>d.y)])
.range([height - margin.bottom, margin.top])
Insert cell
x = d3.scaleLinear()
.domain([d3.min(data, d=>d.x),d3.max(data, d=>d.x)])
.range([margin.left, width - margin.right])
Insert cell
colorRange = ['#291A21','#F5F5F5']
Insert cell
myColor = d3.scaleSequentialLog()
.domain([d3.min(data, d=>d.n_tweets),d3.max(data, d=>d.n_tweets)]);
Insert cell
myColor2 = d3.scaleLog()
.interpolate(d3.interpolateHcl)
.range([d3.hcl(colorRange[1]), d3.hcl(colorRange[0])])
.domain([d3.min(data, d=>d.n_tweets),d3.max(data, d=>d.n_tweets)]);
Insert cell
colorDisa = d3.scaleOrdinal()
.range(['#f5f5f5','#bfa6bf','#874a85'])
.domain(['0', '1', '2']);
Insert cell
colorScale = d3.scaleQuantile()
.range(myColor)
.domain(d3.extent(data)) // pass only the extreme values to a scaleQuantize’s domain
Insert cell
maxTweet = d3.max(data, d=> (d.complete_tree))
Insert cell
margin = ({top: 25, right: 20, bottom: 50, left: 40})
Insert cell
height = 600
Insert cell
import {select} from "@jashkenas/inputs"
Insert cell
import {viewof dd} from "@jashkenas/inputs"
Insert cell
d3 = require("d3@6", "d3-array@2")
Insert cell
Insert cell
import {parseFont} from "caebc9c04c1cc12c"
Insert cell
import {swatches} from "@d3/color-legend"
Insert cell
import {serialize, rasterize} from "@mbostock/saving-svg"
Insert cell
import {Swatches} from "@d3/color-legend"
Insert cell
html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${parseFont}:ital@0;1&display=swap">

<style>
body, svg {
font-family: '${selectedFont}', serif;
/* font-size: 48px; */
}
</style>
`
Insert cell

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.
Learn more