Public
Edited
Aug 4, 2023
1 fork
2 stars
Insert cell
Insert cell
width = 2300
Insert cell
height = 2300
Insert cell
margin = ({"left":10, "right":10, "top":10, "bottom":10})
Insert cell
exampleButton = svgDownloadButton(svg_node)
Insert cell


function svgDownloadButton(svgnode, filename = 'download.svg') {
const downloadButton = html`<a class="download" download="${filename}" href="#" style="display: flex; align-items: center;">${download_icon.outerHTML} Save ${filename}</a>`;

downloadButton.onclick = function(e) {
var url = (downloadButton.href = URL.createObjectURL(serialize(svgnode)));
setTimeout(function() {
URL.revokeObjectURL(url);
}, 50);
};

return downloadButton;
}


Insert cell
x.step()
Insert cell
import { serialize, download_icon } from '@kelleyvanevert/little-things'
Insert cell
links_groups
Insert cell
innerHeight = height - margin.top - margin.bottom
Insert cell
innerWidth = width - margin.left - margin.right
Insert cell
nodes
Insert cell
Insert cell
Insert cell
source_map = {
let dict_map = {}
let g = [... links_groups.keys()]
g.forEach(d => {
links_groups.get(d).forEach((v, idx) => {
dict_map[v.Source] = idx
})
})
return dict_map
}

Insert cell
viewof arc_height_divider = Inputs.range([1, 100], {value: 2, step: 0.5, label: "arc height divider"})
Insert cell
viewof nodes_dist = Inputs.range([5, 200], {value: 150, step: 1, label: "Nodes_distance"})
Insert cell
viewof cornerR = Inputs.range([0, 60], {value: 25, step: 1, label: "Corner Radius"})
Insert cell
viewof innerRadius = Inputs.range([5, 300], {value: 90, step: 1, label: "Inner Radius"})
Insert cell
viewof outerRadius = Inputs.range([30, width/2], {value: 250, step: 1, label: "Outer Radius"})
Insert cell
viewof auth_dist = Inputs.range([5, 300], {value: 215, step: 1, label: "Inner Radius"})
Insert cell
viewof pi_deficit = Inputs.range([-1, 5], {value: 0.25, step: 0.05, label: "Angle Deficit"})
Insert cell
y = d3.scaleLinear().domain([0, 1]).range([innerRadius, outerRadius])
Insert cell
x = d3.scaleBand().domain(data.map(d => d.Title)).range([0.174533, (2*Math.PI) - 0.174533])
Insert cell
JSON.stringify(data.map(d => d['Title']))
Insert cell
final=["Anne Of Green Gables","Sense and Sensibility","Northanger Abbey","Pride and Prejudice","Howards End","Emma","Night and Day","Persuasion","The Awakening","A Room With A View","Daisy Miller","Mansfield Park","Where Angels Fear to Tread","Alice’s Adventures in Wonderland","The Age of Innocence","The Gambler","A Handful Of Dust","Hard Times","The Sport of the Gods","A Passage to India","The Sun Also Rises","Oliver Twist","The Mysterious Affair At Styles","The Picture Of Dorian Gray","The Sign of the Four","The Invisible Man","Winnie-The-Pooh","The Man Who Was Thursday"]
Insert cell
xAxis = g => g
.call(d3.axisBottom(x))
.call(g => g.selectAll('.tick text').remove())
.call(g => g.selectAll('.domain').remove())
// .call(g => g.selectAll('.tick line').remove())
Insert cell
yAxis = g => g
.call(d3.axisLeft(y))
// .call(g => g.select('.text').remove())
// .call(g => g.append('text')
// .attr('x', 0)
// .attr('y', 0)
// .attr('font-weight', 'bold')
// .attr('font-size', "0.87rem")
// .attr('fill', 'white')
// .attr('text-anchor', 'start') B195   F67280   C06C84   6C5B7B   355C7D
// .text('50% Pick Rate'))
Insert cell
data1 = FileAttachment("DVS_dataisplural_gender.json").json()
Insert cell
author_gender = {

let gs = data1.sort((a,b) => {
if (a.Author < b.Author) {
return -1
} else if (a.Author > b.Author) {
return 1
} else
{return 0}
})
return gs
}
Insert cell
data = {
let gs = data1.sort((a,b) => {
if (a.Author < b.Author) {
return -1
} else if (a.Author > b.Author) {
return 1
} else
{return 0}
})

let gs1 = gs.sort((a,b) => {
return b.F - a.F
})

return gs1.map(d => ({ ...d, links: links_groups.get(d.Title) }))

} // E1F5C4 EDE574 F9D423 FC913A FF4E50
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
char_gender = FileAttachment("char_gender.json").json()
Insert cell
nodes_groups = d3.group(nodes, d=>d.Title)
Insert cell
nodes = FileAttachment("nodes.json").json()
Insert cell
Insert cell
viewof secondary = colorPicker("#E1F5C4")
Insert cell
viewof c2 = colorPicker("#FC913A")
Insert cell
viewof c3 = colorPicker("#EDE574")
Insert cell

viewof c4 = colorPicker("#F9D423")
Insert cell
viewof primary = colorPicker("#FF4E50 ")
Insert cell
import {colorPicker} from "@shaunlebron/color-picker"
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