2d:null 2e:["$","title",null,{"children":"Makeover monday week 16 2019 | Joakim Dalen | Observable"}] 33:T3374,chart = { const svg = d3.select(DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom)); ///Creating a background with color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", backgroundColor) .attr('opacity',1) svg.append("text") .attr("x", d => margin.left+plot.width/2) .attr("y", d => margin.top-110) .text(function(d){return "RJ Andrews's "}) .style('fill','#ffaf67') .style("font", "30px 'Cabin'") .style('font-weight','00') .style('text-anchor','middle') .append('tspan') .text('INFO ') .style("font", "40px 'Francois One'") .append('tspan') .text('we ') .style("font", "35px 'Francois One'") .append('tspan') .text('Trust ') .style("font", "40px 'Francois One'") svg.append("text") .attr("x", d => margin.left+plot.width/2) .attr("y", d => margin.top-80) .text(function(d){return "Top 12 Words and Where They Occur"}) .style('fill','#ffaf67') .style("font", "19px 'Cabin'") .style('font-weight','300') .style('text-anchor','middle') /* const serie = svg.append("g") .selectAll("g") .data(nest) .enter().append("g") .attr("transform", (d,i) => `translate(0,100)`); */ ///calling xAxis var xAxisElements= svg.append("g") .call(xAxis) .attr('class','xAxis') .attr('transform', 'translate('+(margin.left)+','+(margin.top)+')') .style("color", axisColor) .style("font", "14px 'Open Sans'") .style('stroke-width',0.6) .style('stroke-opacity',1) xAxisElements.selectAll(".domain").remove() xAxisElements.selectAll("text").remove() xAxisElements.selectAll(".line").remove() .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi var xAxisElements2= svg.append("g") .call(xAxis2) .attr('class','xAxis') .attr('transform', 'translate('+(margin.left)+','+(margin.top+plot.height)+')') .style("color", 'darkgray') .style("font", "12px 'Open Sans'") .style('stroke-width',0.6) .style('stroke-opacity',0) xAxisElements2.selectAll(".domain").remove() // xAxisElements2.selectAll("text").remove() xAxisElements2.selectAll(".line").remove() .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi svg.append("g") .selectAll("circle") .data(data) .enter().append("circle") .attr("cx", d => margin.left + xScale(d.page)) .attr("cy", d => margin.top+(d.id)*trench+d.place*(radius*2)+1) .attr("r", radius) .style('fill','#ffaf67') .attr("class", function(d) { return "word-"+ d.id+" page-"+ d.page+" chapter-"+ d.id+" circle" }) .on("mouseover", function(d) { d3.selectAll(".circle") .transition()//Set transition .delay(0) .duration(100) .style("r", 1) .style("opacity", 0.3) d3.selectAll(".page-" +d.page+".circle") .transition()//Set transition .delay(0) .duration(100) .style("opacity", 1) }) .on("mouseout", function(d) { d3.selectAll(".circle") .transition()//Set transition .delay(0) .duration(100) .style("r", 1) .style("opacity", 1) }) svg.append("g") .selectAll("text") .data(data3) .enter().append("text") .attr("x", d => margin.left-80) .attr("y", d => margin.top+(d.id)*trench+5) .text(function(d){return d.wordForm3}) .style('fill','darkgray') .style("font", "12px 'Cabin Condensed'") .on("mouseover", function(d) { d3.selectAll(".circle") .transition()//Set transition .delay(0) .duration(100) .style("r", 1) .style("opacity", 0.3) d3.selectAll(".word-" +d.id+".circle") .transition()//Set transition .delay(0) .duration(100) .style("opacity", 1) }) .on("mouseout", function(d) { d3.selectAll(".circle") .transition()//Set transition .delay(0) .duration(100) .style("r", 1) .style("opacity", 1) }) svg.append("text") .attr("x", d => margin.left+plot.width/2) .attr("y", d => margin.top+plot.height+40) .text(function(d){return 'Page Number'}) .style('fill','darkgray') .style("font", "13px 'Cabin'") .style('font-weight','500') .style('text-anchor','middle') svg.append("text") .attr("x", d => margin.left+plot.width/2) .attr("y", d => margin.top-40) .text(function(d){return 'Chapter'}) .style('fill','darkgray') .style("font", "13px 'Cabin'") .style('font-weight','500') .style('text-anchor','middle') svg.append("text") .attr("x", margin.left+xScale(7.5)) .attr("y", margin.top-15) .text(function(d){return 'The Goal of'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('our Craft') .attr("x", margin.left+xScale(7.5)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(18)) .attr("y", margin.top-15) .text(function(d){return 'Data'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Shadows') .attr("x", margin.left+xScale(18)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(29)) .attr("y", margin.top-15) .text(function(d){return 'Information'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Murmors') .attr("x", margin.left+xScale(29)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(40)) .attr("y", margin.top-15) .text(function(d){return 'Embedded'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Encoding') .attr("x", margin.left+xScale(40)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(51)) .attr("y", margin.top-15) .text(function(d){return 'Counting'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Time') .attr("x", margin.left+xScale(51)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(62)) .attr("y", margin.top-15) .text(function(d){return 'World'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Building') .attr("x", margin.left+xScale(62)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(73)) .attr("y", margin.top-15) .text(function(d){return 'Infuse'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Meaning') .attr("x", margin.left+xScale(73)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(84)) .attr("y", margin.top-15) .text(function(d){return 'True'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Colors') .attr("x", margin.left+xScale(84)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(94)) .attr("y", margin.top-15) .text(function(d){return 'Explore to'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Create') .attr("x", margin.left+xScale(94)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(105)) .attr("y", margin.top-15) .text(function(d){return 'Create to'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Explore') .attr("x", margin.left+xScale(105)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(118)) .attr("y", margin.top-15) .text(function(d){return 'Uncertain'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Honesty') .attr("x", margin.left+xScale(118)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(129)) .attr("y", margin.top-9) .text(function(d){return 'Encounter'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') svg.append("text") .attr("x", margin.left+xScale(138)) .attr("y", margin.top-9) .text(function(d){return 'Listen'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') svg.append("text") .attr("x", margin.left+xScale(147)) .attr("y", margin.top-9) .text(function(d){return 'Freeze'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') svg.append("text") .attr("x", margin.left+xScale(154)) .attr("y", margin.top-9) .text(function(d){return 'Connect'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') svg.append("text") .attr("x", margin.left+xScale(162)) .attr("y", margin.top-9) .text(function(d){return 'Make'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') svg.append("text") .attr("x", margin.left+xScale(171)) .attr("y", margin.top-15) .text(function(d){return 'Inspire'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Trust') .attr("x", margin.left+xScale(171)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(180)) .attr("y", margin.top-15) .text(function(d){return 'Imagination'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('to Imagine') .attr("x", margin.left+xScale(180)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(191)) .attr("y", margin.top-15) .text(function(d){return 'Focus'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Attention') .attr("x", margin.left+xScale(191)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(200)) .attr("y", margin.top-15) .text(function(d){return 'Creative'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Routines') .attr("x", margin.left+xScale(200)) .attr("y", margin.top-3) svg.append("text") .attr("x", margin.left+xScale(209)) .attr("y", margin.top-15) .text(function(d){return 'Beautiful'}) .style('fill','darkgray') .style("font", "10px 'Cabin Condensed'") .style('font-weight','400') .style('text-anchor','middle') .append('tspan') .text('Tomorrow') .attr("x", margin.left+xScale(209)) .attr("y", margin.top-3) ///Creating footer part 1 svg.append("text") .attr("transform", "translate("+(margin.left+plot.width-50)+","+(plot.height+margin.top+margin.bottom-10)+")") .text("Design: @JoakimDalen || Data Source: RJ Andrews") .style("font", "9px 'Muli'") .attr('text-anchor','end') .attr('class','footer') .style("fill",'darkgray') .attr('opacity',0.7) return svg.node(); }34:[] 31:{"id":"9ff2a13b591c7c1d","slug":"makeover-monday-week-16-2019","title":"Makeover monday week 16 2019","thumbnail":"56b51e01ce8bf62da34c8c5a53a7e0201e388c79aab254274aec79b9742609c7","access_level":"public","create_time":"$D2020-01-19T13:25:06.338Z","update_time":"$D2023-12-21T10:32:21.530Z","view_time":null,"first_public_time":"$D2020-01-21T10:31:45.128Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":"starter_2024"},"version":739,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc05f11c6819093b","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":null}],"members":[{"type":"individual","id":"dc05f11c6819093b","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Makeover monday week 16 2019","cells":[{"id":1,"value":"md`# Makeover monday week 16 2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"\nfullscreen = {\n const button = html`