viewof primary = colorPicker("#FF4E50 ")
Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
width = 2300
height = 2300
margin = ({"left":10, "right":10, "top":10, "bottom":10})
exampleButton = svgDownloadButton(svg_node)
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;
}
x.step()
import { serialize, download_icon } from '@kelleyvanevert/little-things'
links_groups
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
nodes
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
}
viewof arc_height_divider = Inputs.range([1, 100], {value: 2, step: 0.5, label: "arc height divider"})
viewof nodes_dist = Inputs.range([5, 200], {value: 150, step: 1, label: "Nodes_distance"})
viewof cornerR = Inputs.range([0, 60], {value: 25, step: 1, label: "Corner Radius"})
viewof innerRadius = Inputs.range([5, 300], {value: 90, step: 1, label: "Inner Radius"})
viewof outerRadius = Inputs.range([30, width/2], {value: 250, step: 1, label: "Outer Radius"})
viewof auth_dist = Inputs.range([5, 300], {value: 215, step: 1, label: "Inner Radius"})
viewof pi_deficit = Inputs.range([-1, 5], {value: 0.25, step: 0.05, label: "Angle Deficit"})
y = d3.scaleLinear().domain([0, 1]).range([innerRadius, outerRadius])
x = d3.scaleBand().domain(data.map(d => d.Title)).range([0.174533, (2*Math.PI) - 0.174533])
JSON.stringify(data.map(d => d['Title']))
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"]
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())
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'))
data1 = FileAttachment("DVS_dataisplural_gender.json").json()
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
}
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
char_gender = FileAttachment("char_gender.json").json()
nodes_groups = d3.group(nodes, d=>d.Title)
nodes = FileAttachment("nodes.json").json()
viewof secondary = colorPicker("#E1F5C4")
viewof c2 = colorPicker("#FC913A")
viewof c3 = colorPicker("#EDE574")
viewof c4 = colorPicker("#F9D423")
import {colorPicker} from "@shaunlebron/color-picker"
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.
