2c:null 2d:["$","title",null,{"children":"D3 Workshop: Creating Data Visuals that Sparkle | Amber Hoak | Observable"}] 32:T5cd,{ const svgContainer = d3.select(animationSvg()) const rectangle = svgContainer.select(".rect-selector") const duration = durationSelection || 200 const delay = delaySelection || 0 // MOVE d3.select("#move").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("x", 250); // New Position }) // RESIZE d3.select("#resizeT").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("width", 100) // New Width .attr("height", 100); // New Height }) // OPACITY d3.select("#opacityT").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("opacity", 0.5) }); // OPACITY d3.select("#colorT").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("fill", "blue") }) // RESET d3.select("#reset").on("click", function () { rectangle .transition() .duration(duration) .delay(delay) .attr("x", 50) // Old Position .attr("width", 50) .attr("height", 50) .attr("opacity", 1) .attr("fill", "black") }) return svgContainer.node() }33:T5a9,primitiveSvg = { // ---- constants ---- const height = 600 const lineData = [{ x: 100, y: 10 }, { x: 200, y: 100 }, { x: 200, y: 100 }, { x: 300, y: 100 }] // ---- d3 GENERATOR functions ---- const line = d3.line() .x((d) => d.x) // set the x values for the line generator .y((d) => d.y) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line const arc = d3.arc() //generator functions .innerRadius(200) .outerRadius(240) .startAngle(0) // ---- ---- const svg = d3.select(DOM.svg(width, height)) svg.selectAll(".dynamic-circle").remove() svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("height", 50) .attr("width", 50) .style("fill", "#dcf5f5") .attr("stroke", "blue") .attr("stroke-width", 1) svg .append("circle") .attr("class", "first-circle") .attr("cx", 75) .attr("cy", 75) .attr("r", 10) svg .append("text") .attr("x", 70) .attr("y", 60) .style("font-size", "16px") .text("Yay! Drawing text with svg!") svg.append("g") // g is a group of elements .append("path") .attr("d", line(lineData)) .attr("fill", "none") // not so pretty with fill .attr("stroke-width", 2) .attr("stroke", "grey") svg.append("path") .datum({ endAngle: 2 * Math.PI }) .style("fill", "#ddd") .attr("d", arc) .attr("transform", "rotate(0)translate(0,375)") // x,y translation from (0, 0) return svg.node() } 34:T5e7,{ // PATTERN 1 (.join) let alpha = "abcdefghijklmnopqrstuvwxyz".split("") const WIDTH = width const height = 200 const svg = d3.select(DOM.svg(WIDTH, height)) update(alpha) setInterval(() => { update(shuffled(alpha)) }, 2000) function update(arr) { const t = svg.transition().duration(500) const t2 = svg.transition().duration(1000) svg .selectAll(".alpha-text") .data(arr, (d, i) => d) // KEY: Bind your data elements .join( enter => enter.append("text") .text((d) => d) .attr("fill", "green") .attr("y", 40) .attr("x", (d, i) => -100) .call(enter => enter.transition(t) .attr("x", (d, i) => i * 15 + 100) .attr("y", 100) ), update => update .attr("fill", "blue") .call(update => update.transition(t2) .attr("x", (d, i) => i * 15 + 100), ), exit => exit .attr("fill", "red") .call(exit => exit.transition(t) .attr("x", 500) .attr("y", 30) .remove() ) ) .attr("class", "alpha-text") } return svg.node() }35:T43b,updateFruit2 = (svg, data) => { // STEP 1: DATA JOIN const node = svg .selectAll("image") .data(data, (d, i) => d.key) // KEY: Bind your data elements // STEP 2: ENTER / MERGE const nodeEnter = node .enter() .append("image") .attr("class", "imgs") .attr("href", (d) => `${imgRoot}${d.key}.svg`) .attr("x", 0) .attr("y", 0) .attr("width", (d) => 10) .attr("height", (d) => 10) // UPDATE const update = nodeEnter.merge(node) // anytime node updates so does nodeEnter update .transition() .duration(750) // duration of the animation .delay((d, i) => 100 * i) // stagger delay animation start .attr("x", (d, i) => 10 + i * 100) .attr("y", 50) .attr("width", 100) .attr("height", 100) // add an exit transition all exiting nodes will animate // STEP 3: REMOVE const nodeExit = node.exit() .transition() .duration(750) .attr("height", 10) .remove() return svg.node() }36:T6be,{ const HEIGHT = 100 const WIDTH = width const dynamic = false // change to true for dynamic data const testData = [15, 45, 75] const allDatas = [12, 8, 15, 45, 75, 33, 100, 190] const transitionDuration = 1000 const svg = d3.select(DOM.svg(WIDTH, HEIGHT)) // Fill in update function const update = (data) => { // =========== Step 1: Data Join ============ const node = [`fill in`] // =========== Step 2: Enter / Merge ============ const nodeEnter = [`fill in`] // [`fill in`].merge([`fill in`]) // .transition() // .duration(transitionDuration) // duration of the animation // .delay((d, i) => 100 * i) // stagger delay animation start //fill in new positions // =========== Step 3: Exit / Remove ============ const nodeExit = ['fill in'] } if(dynamic) { const interval = d3.interval((t) => { if (t > 1500 * 10) { // stop after 10 times interval.stop() return } let endIndex = Math.floor(Math.random() * allDatas.length - 1) if (endIndex < 1) { endIndex = 1 } update(d3.shuffle([...allDatas]).slice(0, endIndex).sort()) }, 1500) } else { update(testData) } return svg.node() } // ========== common pitfall ========== // const circles = svg // .selectAll('circle') // .data(data) // .enter() // .append('circle') // .attr('r', MIN_RADIUS) // what is the difference from above? // circles // .attr('cx', 50) // .style('fill', 'grey') // .attr('cy', 50) // // exit is not defined? // circles.exit().remove(); 37:T497,{ const HEIGHT = 300 const WIDTH = 400 const MARGIN = 80 const svg = d3.select(DOM.svg(WIDTH, HEIGHT)) // --- linear scale --- const linearscale = d3.scaleLinear().domain([0, 20]).range([MARGIN, WIDTH - MARGIN]) const yscale = d3.scaleLinear().domain([0, 30]).range([MARGIN, HEIGHT - MARGIN]) // --- time scale --- const timescale = d3.scaleTime() .domain([new Date("2011-12-17T03:24:00"), new Date()]).range([MARGIN, WIDTH - MARGIN]) // -- point scale --- const pointScale = d3.scalePoint() .domain(["a", "b", "c", "d"]) .range([MARGIN, WIDTH - MARGIN]) const selectedScale = scaleType === "linear" ? linearscale : (scaleType === "time" ? timescale : pointScale) const xaxis = d3.axisBottom().scale(selectedScale) const xaxis_container = svg.append("g") .attr("class", "xaxis") .attr("transform", `translate(0, ${HEIGHT - MARGIN})`) .call(xaxis) const yaxis = d3.axisLeft().scale(yscale) const yaxis_container = svg.append("g") .attr("class", "yaxis") .attr("transform", `translate(${MARGIN}, 0)`) .call(yaxis) return svg.node() }38:T5dc,{ // --- constants ---- const HEIGHT = 200 const WIDTH = 400 const MIN_RADIUS = 3 const MAX_RADIUS = 12 const circleData = [ { weight: 30, name: "apple" }, { weight: 10, name: "pear" }, { weight: 100, name: "watermelon" } ] const names = circleData.map((o) => o.name) const svg = d3.select(DOM.svg(WIDTH, HEIGHT)) // --- setup radius scale --- const maxWeight = d3.max(circleData, (d) => d.weight) // d3 finds the max for us! const rscale = d3.scaleLinear() .domain([0, maxWeight]) .range([MIN_RADIUS, MAX_RADIUS]) // --- setup color scale --- const brewerscale = d3.scaleOrdinal().domain(names).range(d3.schemeCategory10) const scale = d3.scaleLinear().domain([0, maxWeight]).range([0, 1]) const rainbow = (d) => d3.interpolateRainbow(scale(d)) const blueSeq = (d) => d3.interpolateBlues(scale(d)) const checkScaleType = (d, selection) => { if(selection === "Brewer"){ return brewerscale(d.name) } else { return selection === "Rainbow" ? rainbow(d.weight) : blueSeq(d.weight) } } svg .selectAll(".circleNodes") .data(circleData) .join("circle") .attr("class", "circleNode") .attr("r", (d) => rscale(d.weight)) // map weights to rscale .attr("cx", (d,i) => i * 20 + 20 ) .attr("cy", (d,i) => i * 20 + 20 ) .attr("fill", (d) => checkScaleType(d, colorSelection)) // use colorscale of selection return svg.node() }39:T847,{ const bars = d3.range(0, 100) const scale = d3.scaleLinear().domain([0, bars.length]).range([0, 1]) const xScale = d3.scaleLinear().domain([0, 100]).range([0, 300]) const diverging = (d) => d3.interpolateRdYlBu(scale(d)) const sequential = (d) => d3.interpolatePurples(scale(d)) const sequentialMultiHue = (d) => d3.interpolateViridis(scale(d)) const cyclical = (d) => d3.interpolateSinebow(scale(d)) const svg = d3.select(DOM.svg(400, 250)) svg.selectAll('.diverging') .data(bars) .enter() .append('rect') .attr('x', (d) => (xScale(d)) +5) .attr('y', 30) .attr('height', 20) .attr('width', 5) .attr('class', 'diverging') .attr('fill', (d) => diverging(d)) svg.append('text') .attr('x', 5) .attr('text-anchor', 'start') .attr('y', 15) .attr('fill', '#777777') .text('diverging') svg.selectAll('.sequential') .data(bars) .enter() .append('rect') .attr('x', (d) => (xScale(d)) +5) .attr('y', 80) .attr('height', 20) .attr('width', 5) .attr('class','sequential') .attr('fill', (d) => sequential(d)) svg.append('text') .attr('x', 5) .attr('text-anchor', 'start') .attr('y', 70) .attr('fill', '#777777') .text('sequential') svg.selectAll('.sequentialMultiHue') .data(bars) .enter() .append('rect') .attr('x', (d) => (xScale(d)) +5) .attr('y', 130) .attr('height', 20) .attr('width', 5) .attr('class','sequentialMultiHue') .attr('fill', (d) => sequentialMultiHue(d)) svg.append('text') .attr('x', 5) .attr('text-anchor', 'start') .attr('y', 120) .attr('fill', '#777777') .text('sequential-MultiHue') svg.selectAll('.cyclical') .data(bars) .enter() .append('rect') .attr('x', (d) => (xScale(d)) +5) .attr('y', 180) .attr('height', 20) .attr('width', 5) .attr('class','cyclical') .attr('fill', (d) => cyclical(d)) svg.append('text') .attr('x', 5) .attr('text-anchor', 'start') .attr('y', 170) .attr('fill', '#777777') .text('cyclical') return svg.node() }3a:T8a2,chart = { const dimensions = {height: 700, width} const PADDING = 10 const TRANSLATE_AXIS = 100 const filter = candyViewSelector const svg = d3.select(DOM.svg(dimensions.width, dimensions.height)) const rawData = barData const handleTypeChange = (type) => { update(svg, rawData, dimensions, filter, type) } // ====== Create chart Title ====== svg.append("text") .attr("class", "chart-title") .attr("x", (dimensions.width / 2) - (PADDING /2) ) .attr("y", PADDING * 2 ) .style("font-size", "20pt") .style("font-family", "Segoe UI, Tahoma, Geneva, Verdana, sans-serif") .text("Candy Preferences") // ====== Create types Legend ====== svg.append("rect") .attr("width", legendOptions.width) .attr("height", legendOptions.height) .attr("fill", "#aaa") .attr("opacity", 0.1) .attr("stroke", "grey") .attr("stroke-width", 2) .attr("transform", "translate(10, 0)") const legend = svg.selectAll(".legend") .data((Object.keys(legendOptions.types))) legend .enter() .append("rect") .attr("class", "legend") .attr("width", legendOptions.rWidth) .attr("height", legendOptions.rHeight) .attr("fill", (d) => legendOptions.colors[d]) .attr("opacity", 0.7) .attr("transform", (d, i) => `translate(${PADDING}, ${PADDING + legendOptions.rHeight *2* i})`) legend .enter() .append("text") .text((d) => d) .attr("font-size", 10) .attr("text-anchor", "start") .style("font-family", "Segoe UI, Tahoma, Geneva, Verdana, sans-serif") .attr('transform', (d, i) => `translate(${legendOptions.rWidth + PADDING * 2}, ${legendOptions.rHeight * (3/4) + PADDING + legendOptions.rHeight*2* i })`) .attr('cursor', 'pointer') .on('mouseover', (d, i, n) => d3.select(n[i]) .attr('fill', 'yellow') ) .on('mouseout', (d, i, n) => d3.select(n[i]) .attr('fill', 'black') ) .on('click', (d) => handleTypeChange(d)) // initialize axis svg.append("g") .attr("class", "yAxis") svg.append("g") .attr("class", "xAxis") // update with data update(svg,rawData, dimensions, filter) return svg.node() }3b:T932,update = (svg, rawData, dimensions, filter, type) => { const padding = 100 const margin = { top: 100, bottom: 100, left: 50, right: 50 } const paddingLeft = 50 const data = handleData(type, rawData, filter) const t = svg.transition().duration(750) // define our bands for bars const x = d3.scaleBand() .rangeRound([0, dimensions.width - margin.left]) .padding(0.1) x.domain([...data].map((d) => d.name)) // update xAxis selector to have the updated axis const xaxis = svg.selectAll(".xAxis") .attr("opacity", 0.5) .attr("transform", `translate(${margin.left}, ${(dimensions.height - margin.top)})`) .call(d3.axisBottom(x)) const y = d3.scaleLinear() .domain([0, 100]) .rangeRound([dimensions.height - margin.bottom, margin.top]) // margin value allows us to avoid getting "cut off" // remove any existing data const bars = svg.selectAll(".bar") .data(data, (d, i) => (d.name + i)) .join( enter => enter.append("rect") .attr("y", dimensions.height - margin.top) .attr("x", (d) => x(d.name)) .attr("label", (d) => `${d.name}, ${d[filter]}`) .attr("width", () => x.bandwidth()) .attr("height", 0) // calculate new height relative to top .attr("transform", `translate(${margin.left}, 0)`) .attr("fill", (d) => d.color) .call(enter => enter.transition(t) .attr("y", (d) => y(d[filter])) .attr("height", (d) => dimensions.height - y(d[filter]) - margin.top) ), update => update .call(update => update.transition(t) .attr("fill", (d) => d.color) // update color to reflect type .attr("stroke", (d) => d.color) ), exit => exit .call(exit => exit.transition(t) .attr("height", 0) .attr("fill", "grey") .remove() ) ) .attr("class", "bar") .attr("fill-opacity", 0.5) // use fill-opacity instead of opacity to get stroke opacity changed .attr("stroke-width", 2) .attr("stroke-opacity", 0.7) // update yAxis and text svg.selectAll(".yaxis-text") .remove() svg.selectAll(".yAxis") // selectAll on the axis will update them from prev .call(d3.axisLeft(y)) .attr("transform", `translate(${margin.left},0)`) .attr("opacity", 0.5) return svg.node() }3c:T892,{ const height = 700 const margin = ({top: 100, right: 10, bottom: 100, left: 40}) const colors = {"males": "#63a2cd", "females": "#e293ac"} const data = processNamesData(unisexSelector) const svg = d3.select(DOM.svg(width, height)) const columns = Object.keys(unisexNames[0]).slice(2) const series = d3.stack().keys(columns)(data) const yMax = d3.max(series, d => d3.max(d, d => d[1])) // Data Format: // seriesData = [seriesDataItem[], key: males | females, index: number] // seriesDataItem = [yEnd: number, yStart: number, {data: {name: string, rank: number, males: number, females: number}}] // ====== Create chart Title ====== svg.append("text") .attr("class", "chart-title") .attr("x", (width / 2) - (margin.left /2) ) .attr("y", margin.right * 2 ) .style("font-size", "20pt") .style("font-family", "Segoe UI, Tahoma, Geneva, Verdana, sans-serif") .text("Top Unisex Names") // create x scale which domain is the name in data, and range accounts for margin const x = d3.scaleBand() // .domain(//fill-in) // .range([//fill-in, //fill-in]) .padding(0.1) // // create y scale which domain is from 0 to yMax and range accounts for margin const y = d3.scaleLinear() // .domain([//fill-in, //fill-in]) // .rangeRound([//fill-in, //fill-in]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s")) .call(g => g.selectAll(".domain").remove()) // fill in enter() function so that you are appending a rectangle that is aligned on the x axis based on the name and aligns on the y-axis based on the yStart value. Dont forget to add a height and width to your rectangle svg .selectAll("g") .data(series) .enter().append("g") .attr("fill", (d, i) => colors[d.key]) .selectAll("rect") .data(d => d) .enter() //fill-in // Add XAxis to the svg // Add YAxis to the svg return svg.node() }3d:T13a4,{ // ====== Constants ====== const MARGIN = 40 const MIN_RADIUS = 5 const MAX_RADIUS = 20 const dimensions = {height: 700, width} let state = { selected: [], linkSelection: [] } const nodes = forcedirected.nodes const links = forcedirected.links const svg = d3.select(DOM.svg(width, dimensions.height)) // scale for link strength const weightScale = d3.scaleLinear() .domain(d3.extent(links, (d) => d.weight)) .range([.1, 1]) // set layout for graph const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links) .id(d => d.id) .distance(200) // distance for link length .strength((d) => weightScale(d.weight)) // strength between 0.1 -1.0 ) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, dimensions.height / 2)) // find min/max of groupids for coloring const groupsIdHash = nodes.reduce((hash, curr) => { if (!hash[curr.groupid]) { hash[curr.groupid] = curr.group } return hash }, {}) const uniqueGroups = Object.keys(groupsIdHash) const groupMax = d3.max(uniqueGroups) const groupMin = d3.min(uniqueGroups) // color scale const brewerscale = d3.scaleOrdinal().domain([groupMin, groupMax]).range(d3.schemeCategory10) const sceneMax = d3.max(links, (d) => d.sceneid) const sceneMin = d3.min(links, (d) => d.sceneid) const textscale = d3.scaleLinear().domain([sceneMin, sceneMax]).range([0, 0.8]) const sequentialColor = (d) => d3.interpolateViridis(textscale(d)) // get weights for each node const { wmax, wmin, weightMap } = findNodeWeight(nodes, links) // radius scale const rscale = d3.scaleLinear() .domain([wmin, wmax]) .range([MIN_RADIUS, MAX_RADIUS]) const link = svg .selectAll('.link') .data(links) .enter() .append("g") .attr('class', 'link') .append("path") // use paths instead of lines, we can add curves .attr("stroke", "#999") .attr('fill', 'none') .attr("stroke-opacity", 0.6) .attr('id', (d) => `link-${d.index}`) .attr("stroke-width", d => Math.sqrt(d.weight)) const linktext = svg.selectAll("g.linklabelholder").data(links) // Uncomment below to add link text, things get messy real fast // linktext.enter() // .append("g") // .attr("class", "linklabelholder") // .append("text") // .attr("class", "linklabel") // .attr("dx", 1) // .attr("dy", ".35em") // .attr("text-anchor", "middle") // .attr("fill", (d) =>d.sceneid ? sequentialColor(d.sceneid) : null) // .attr("opacity", 0.7) // .text((d) => d.scene.length ? d.scene : null) // ====== Create Legend ====== this will always be the same so no need to update const keyheight = 100 const keywidth = 120 const legend = svg .selectAll('.legend') .data(uniqueGroups) .enter() const legendRadius = 5 // Tip: lower opacity to draw attention from legend legend .append("circle") .attr("cx", 10) .attr("cy", (d, i) => i * 20 + 10) .attr("r", legendRadius) .style("fill", (d) => brewerscale(d)) .attr('opacity', 0.7) legend .append('text') .attr("x", 10 + 8) .attr("y", (d, i) => i * 20 + 11 + Math.floor(legendRadius / 2)) .text((d) => groupsIdHash[d]) .style("fill", '#aaaaaa') const node = svg.selectAll(".node") .data(nodes) const nodeEnter = node .enter() .append("g") .attr("class", "node") .call(drag(simulation)) nodeEnter.append('defs') // define the clipPath .append('clipPath') // define a clip path .attr("id", (d) => `node-${d.id}`) .append("circle") .attr("cx", 0) .attr("cy", 0) .attr('r', 20) .attr("fill", (d) => brewerscale(d.groupid)) nodeEnter.append("text") .attr("dx", 20) .attr("dy", ".35em") .text((d) => d.name) .attr("fill", (d) => brewerscale(d.groupid)) // Append images const images = nodeEnter.append("svg:image") .attr("xlink:href", (d) => `${imgRoot}${d.id}.jpg`) .attr('x', -30) .attr('y', -30) .attr("height", 50) .attr("width", 50) .attr('clip-path', (d) => `url(#node-${d.id})`) .attr("cursor", "pointer") // whenever clickable add pointer .on("click", (d) => handleClick(d, svg, brewerscale, links)) const update = nodeEnter.merge(node) function linkArc(d) { const dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; } simulation.on("tick", () => { link.attr("d", linkArc) update.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")") svg.selectAll('g.linklabelholder') .attr("transform", (d) => `translate( ${(d.source.x + d.target.x) / 2} , ${(d.source.y + d.target.y) / 2})` ) }) return svg.node() }3e:Tb4f,handleClick = (d, svg, brewerscale, links) => { const keywidth = 120 const nodeId = d.id const displayData = [ { "text": d.name, key: "name", color: brewerscale(d.groupid) }, { "text": d.title, key: "title", color: "#aaaaaa" }, { "text": "connections", key: "connections", color: "grey" } ] const relLinks = links.filter((l) => l.source.id === d.id || l.target.id === d.id) svg .selectAll(".feature-image") .remove() svg .append("svg:image") .attr("class", "feature-image") .attr("xlink:href", `${imgRoot}${d.id}.jpg`) .attr("x", 120) .attr("y", 0) .attr("height", 75) .attr("width", 75) svg .selectAll(".infoBox-text") .remove() .exit() .data(displayData) .enter() .append("text") .attr("class", "infoBox-text") .attr("x", 0) .attr("y", 0) .attr("font-size", (d) => d.key === "name" ? "18px" : "12px") .text((display) => display.text) .attr("fill", (s) => s.color) .attr("transform", (display, i) => display.key === "connections" ? `translate(${200 + 5}, ${30 + i * 16})` : `translate(${200 + 5}, ${30 + i * 14})`) svg.append("rect") .attr("height", 2) .attr("width", keywidth) .attr("x", 0) .attr("y", 0) .attr("fill", "grey") .attr("transform", `translate(${200 + 5}, ${30 + 2 * 16 + 3})`) let maxTextLength = 0 const PADDING = 5 const connections = svg .selectAll(".infoBox-text-conns") .remove() .exit() const connEnter = connections .data(relLinks, (d) => d.source.name + d.index) connEnter .enter() .append("text") .attr("class", "infoBox-text-conns") .attr("id", (d) => `infobox-${d.index}`) .attr("x", 0) .attr("y", 0) .attr("font-size", "12px") .attr("fill", "#aaaaaa") .text((s) => s.source.id === nodeId ? s.target.name : s.source.name) .attr("transform", (key, i) => `translate(${200 + PADDING}, ${30 + i * 14 + 14 * displayData.length + 10})`) .each((d, i, n) => { const thisWidth = n[i].getComputedTextLength() || 0 maxTextLength = Math.max(maxTextLength + 0.1, thisWidth) }) .attr("cursor", "pointer") connEnter .enter() .append("text") .attr("class", "infoBox-text-conns") .attr("x", 0) .attr("y", 0) .attr("font-size", "12px") .attr("fill", "#aaaaaa") .text((s) => s.scene) .attr("transform", (key, i) => `translate(${200 + PADDING * 2 + maxTextLength}, ${30 + i * 14 + 14 * displayData.length + 10})`) }3f:T197c,{ const root = tree(formatted_table) const height = width root.x0 = height / 2 root.y0 = 0 root.descendants().forEach((n) => { if (n.children) { if (n.depth >= 3) { n._children = n.children n.children = null } } }) const svg = d3.select(DOM.svg(width, height)) svg .style("width", width) .style("height", height) const updateNodes = (source) => { const height = width const scale = d3.scaleLinear().domain([0, 12]).range([0.2, 1.0]) const color = (d) => d3.interpolateRainbow(scale(d)) const duration = 600 const nodes = root.descendants() const links = root.links() const size = 0 let maxTextLength = 0 // Update the nodes... const node = svg.selectAll("g.node") .data(nodes, (d) => d.data.data.id) // Enter any new modes at the parent"s previous position. const nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", (d) => ` rotate(${source.x0 * 180 / Math.PI - 90}) translate(${source.y0},0)`) .attr("fill", "none") nodeEnter.selectAll(".textLabels").remove() const offset = 2 nodeEnter.append("text") .attr("dy", ".2em") .attr("class", "textLabels") .attr("font-size", "8px") .attr("text-anchor", function (d) { return d.x < 180 ? "start" : "end"; }) .attr("transform", function (d) { const distance = d.children ? 2.5 : 5 + offset return d.x < 180 ? `translate(${distance})` : `rotate(180)translate(-${distance})` }) .text((d) => d.data.data.id) .each(function (d, i, n) { if (d._children) { const distance = d.children ? 2.5 : 5 + offset const thisWidth = n[i].getComputedTextLength() maxTextLength = Math.max(maxTextLength, d.y + thisWidth + distance) } }) const updateSvg = () => { // THIS IS WHERE THE RESIZE MAGIC HAPPENS const newSize = maxTextLength * 2 svg .transition() .duration(1500) .style("width", width) .style("height", height) .style("padding", "10px") .style("box-sizing", "border-box") .style("font", "8px sans-serif") .attr("preserveAspectRatio", "xMidYMid meet") .attr("viewBox", `-${newSize / 2} -${newSize / 2} ${newSize} ${newSize}`) } updateSvg() // ****************** nodes section *************************** nodeEnter.append("circle") .attr("class", "circleNode") .attr("r", 1e-6) .attr("title", (d) => d.depth) .attr("cursor", "pointer") .on("click", (d) => { if (d.depth > 2) { d.children = d.children ? null : d._children; updateNodes(d) } }) const nodeUpdate = nodeEnter.merge(node) nodeUpdate.transition() .delay(800) .duration(duration) .attr("fill", (d) => d._children ? "white" : color(d.depth)) .attr("stroke", (d) => d._children ? color(d.depth) : "none") .attr("stroke-width", (d) => d._children ? 1 : 0) .attr("transform", (d) => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `) .attr("cursor", "pointer") nodeUpdate.selectAll(".circleNode") .attr("r", (d) => d.children ? 2.5 : 5) .attr("cursor", (d) => d.children ? "pointer" : "auto") // Update the node attributes and style nodeUpdate.selectAll(".textLabels") .attr("stroke", "white") .attr("stroke-width", 0) .attr("fill", (d) => d._children ? color(d.data.level) : 0) .style("fill-opacity", (d) => d._children ? 1 : 0) .each(function (d, i, n) { if (d._children) { const distance = d.children ? 2.5 : 5 + offset const thisWidth = n[i].getComputedTextLength() maxTextLength = Math.max(maxTextLength, d.y + thisWidth + distance) } }) .call(updateSvg) // Remove any exiting nodes const nodeExit = node.exit().transition() .duration(duration / 2) .attr("d", d3.linkRadial() .angle((d) => source.x0) .radius((d) => source.y0)) .remove() // On exit reduce the node circles size to 0 nodeExit.select("circle") .attr("r", 1e-6) .attr("fill", "none") // On exit reduce the opacity of text labels nodeExit.selectAll(".textLabels") .attr("fill", "none") // ****************** links section *************************** // Update the links... const link = svg.selectAll("path.link") .data(links, function (d) { return d.target.data.data.id; }) // Enter any new links at the parent"s previous position. const linkEnter = link.enter().insert("path", "g") .attr("class", "link") .attr("d", d3.linkRadial() .angle((d) => source.x0) .radius((d) => source.y0)) .attr("fill", "none") .attr("stroke-width", 1) .attr("stroke", "grey") // UPDATE const linkUpdate = linkEnter.merge(link); // Transition back to the parent element position linkUpdate.transition() .duration(duration) .delay(800) .attr("d", d3.linkRadial() .angle((d) => d.x) .radius((d) => d.y)) // Remove any exiting links link.exit().transition() .duration(duration) .attr("d", d3.linkRadial() .angle((d) => source.x0) .radius((d) => source.y0)) .remove(); // Store the old positions for transition. nodes.forEach(function (d) { d.x0 = d.x; d.y0 = d.y; }) } updateNodes(root) return svg.node() }40:T8d7,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }41:[] 30:{"id":"744e08dd2f6c367a","slug":"svg-primitives","title":"D3 Workshop: Creating Data Visuals that Sparkle ","thumbnail":"2eb327a4507c0b82bbc9ca30782879d01940a711bdc1b09d51fb83d4ab0c71b3","access_level":"public","create_time":"$D2019-05-24T21:20:29.776Z","update_time":"$D2020-03-06T20:41:47.016Z","view_time":null,"first_public_time":"$D2019-05-24T21:40:23.441Z","has_unpublished_edits":null,"fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":2844,"publish_version":2844,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Workshop: Creating Data Visuals that Sparkle ","cells":[{"id":2165,"value":"md`# D3 Workshop: Creating Data Visuals that Sparkle

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"md`# Table of Contents\n1. [SVG Graphical Primitives](#primitives)\n2. [Data Joins](#dataJoins)\n3. [Scales and Axes](#scales)\n4. [Bar Chart](#barChart)\n5. [Force Directed Graph](#forceDirected)\n5. [Optimization](#optimization)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2176,"value":"preamble = md`# Pre-Workshop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2837,"value":"md`This workshop was created for beginners to d3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2184,"value":"import {apiChart} from '@ahoak/d3-api-analysis'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"md`D3 API is huge! This workshop will focus on areas within dataViz which is core to creating data visualizations. For awareness, we will be using other parts of D3 and these are nice to have but not essential. For an in-depth analysis of the D3 API, check out Elijah Meeks [post](https://medium.com/@Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2191,"value":"apiChart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2501,"value":"md`In this tutorial we have imported all of D3 but it is recommended that you import only specific modules (ie d3-array, d3-shapes, etc.) to limit bundle size`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2483,"value":"md`### Using D3 in React`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2486,"value":"md`There are several ways to use D3 in React but one technique is to create a D3 component using an svg tag and use the ref from that element to manipulate. For dynamic data, you can create an enter() function that executes on mount and an update function that will execute as part of the useEffect lifecycle. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2492,"value":"md`Example Render:
\n~~~javascript\n render() {\n return ( \n

\n )\n }\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2498,"value":"md`~~~ javascript\nconst enter = () => {\n const svg = d3.select(this.svgElement)\n}\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2744,"value":"md`### Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2748,"value":"md`This workshop mentions animation but here are some basics to get you familiar to using animation in D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2753,"value":"html`\n

\n Move\n \n

\n Resize\n \n

\n Opacity\n \n

\n Color\n \n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2798,"value":"viewof durationSelection = number({placeholder: 800, title: \"transition duration\", step :100, min: 800, max: 2000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2811,"value":"viewof delaySelection = number({placeholder: 0, title: \"transition delay\", step :100, min: 0, max: 1000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2751,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2756,"value":"animationSvg = () => {\n\t//Make an SVG Container\n\tconst svg = d3.select(DOM.svg(400, 200))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n \n \t// Draw the Rectangle\n var rectangle = svg.append(\"rect\")\n .attr(\"x\", 50)\n .attr(\"y\", 50)\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .attr('class', 'rect-selector')\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"primitives = md`# Part 1: SVG Graphical Primitives`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`Adding basic elements such as circles, lines, text to an SVG. A full list of SVG primitive elements on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`### Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md` Much like jQuery, D3 binds to DOM elements. In order to select and manipulate DOM elements, you will need to retrieve a selector object. Commonly used D3 functions to do this are select and selectAll. \n\nAll methods of D3 are available under the namespace: *d3*\n\nUsing *d3.select([css-selector or element])* will return the first of its type, while *d3.selectAll([css-selector or element])* will return all matching elements. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`**Example**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"{\n const width = 400\n const height = 80\n const svg = d3.select(DOM.svg(width, height))\n svg\n .append('circle')\n .attr('class', 'my-first-selection')\n .attr('cx', 20)\n .attr('cy', 15)\n .attr('r', 10)\n .attr('id', 'circle-1')\n .style('fill', 'blue')\n svg\n .append('circle')\n .attr('class', 'my-first-selection')\n .attr('cx', 60)\n .attr('cy', 15)\n .attr('r', 10)\n .attr('id', 'circle-2')\n .attr('fill', 'red')\n svg\n .append('circle')\n .attr('class', 'my-first-selection')\n .attr('cx', 100)\n .attr('cy', 15)\n .attr('r', 10)\n .attr('id', 'circle-3')\n .attr('fill', 'green')\n svg\n .append('text')\n .attr('x', 10)\n .attr('y', height -10 )\n .text(\"classname: 'my-first-selection'\")\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"d3.select(\".my-first-selection\")\n // .style(\"fill\", \"purple\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"d3.selectAll(\".my-first-selection\")\n // .style(\"fill\", \"orange\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`**Common DOM manipulation methods:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`| Method | Description |\n| ------------- |:-------------:|\n| text(\"content\") | Gets/Sets text of selection |\n| append(\"element name\") | Adds element inside selected element |\n| insert(\"element name\") | insert new element to selection |\n| remove() | removes element from DOM |\n| attr(\"name\", \"value\") or property(\"name\", \"value\") | Gets/Sets attribute of selection |\n| style(\"name\", \"value\") | Gets/Sets style for element |`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`** text() method**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"{\n const width = 400\n const height = 30\n const svg = d3.select(DOM.svg(width, height))\n svg\n .append(\"text\")\n .attr(\"x\", 10)\n .attr(\"y\", 20 )\n .attr(\"class\", \"my-text\")\n .attr(\"fill\", \"purple\")\n .text(\"This is Text with SVG\")\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`** append() / insert() / remove() method**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"{\n const width = 400\n const height = 60\n const svg = d3.select(DOM.svg(width, height))\n svg\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"height\", 50)\n .attr(\"width\", 50)\n .style(\"fill\", \"red\")\n \n svg.insert(\"circle\")\n .attr(\"cx\", 300)\n .attr(\"cy\", 10)\n .attr(\"r\", 10)\n \n svg.insert(\"circle\")\n .attr(\"cx\", 330)\n .attr(\"cy\", 10)\n .attr(\"r\", 10)\n // uncomment below to remove the circles\n // svg.selectAll(\"circle\").remove()\n // uncomment below to remove everything!\n // svg.selectAll(\"*\").remove()\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`### Line Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`D3 has built in helper functions to create complex paths easily. These include: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`\n| Method | Description |\n| ------------- |:-------------:|\n| line | pass in data points to create multi-segment line |\n| arc | pass datapoints and generates arc at specified angle |\n| stack | pass in multi-series data and generates array for each series containing lower and upper bounds |\n| area | pass data points to define area between two lines |\n| pie | similiar to arc, pass area of data, outputs data with start and end angles |\n| symbol | generates path data for common symbols such as stars, diamonds |\n\nref: [D3 in Depth](https://www.d3indepth.com/shapes/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`\n\nCheck out this SVG in the console and look how we can make complex paths simply by using the d3.line() and d3.arc()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"viewof pressAddCircle = button({value: \"Add Circle\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2537,"value":"{\n // on click add random circle to svg\n pressAddCircle\n if(pressAddCircle !== undefined) {\n d3.select(primitiveSvg)\n .append(\"circle\")\n .attr(\"r\", 10)\n .attr(\"cx\", Math.floor(Math.random() * 400) + 100)\n .attr(\"cy\", Math.floor(Math.random() * 400) + 100)\n .attr(\"class\", \"dynamic-circle\")\n \n return primitiveSvg\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"dataJoins = md`# Part 2 : Data Joins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md` ### Static Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`Say we have an array of integers, and for each integer we want to create a circle at that value. How do we do this? We could loop through our array and append a circle but d3 has a better (and easier) way to do this!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`we can use the **.data()** operand to tell d3 that we want to convert our data array values to svg elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md`** Example **`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"{\n // ---- constants ----\n const width = 400\n const height = 50\n const myData = [10, 50, 30 ]\n const colors = [\"red\", \"green\", \"blue\"]\n const svg = d3.select(DOM.svg(width, height))\n const nodes = svg.selectAll(\"circle\")\n .data(myData) // use .data to append myData to SVG\n nodes\n .enter() // apply data elements and specify how to handle them\n .append(\"circle\") // appends circle for each data point\n .attr(\"cx\", (d) => d) // <-------- access to data item\n .attr(\"cy\", 20)\n .attr(\"r\", 10)\n .attr(\"fill\", (d, i) => colors[i % 3])\n \n // alternative :\n // nodes\n // .join(\"circle\") \n // .attr(\"cx\", (d) => d) \n // .attr(\"cy\", 20)\n // .attr(\"r\", 10)\n // .attr(\"fill\", (d, i) => colors[i % 3])\n \n \n return svg.node() \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`If we want to remove the circles we can call: *d3.selectAll(\"circle\").remove()*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md` ### Dynamic Data: (Enter/Update/Exit)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`The above works great for static data but clearing and repainting is not the most efficient way to work with dynamic datasets. \n\nWhen we are dealing with dynamic data, we need to use a pattern named **enter/update/exit**. You will most likely use this when creating dynamic data visualizations like changing filters on a bar chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1925,"value":"md`### Enter-Update-Exit Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1978,"value":"md`Press play to watch animation. \n1. Add dataset1 (a,b,c,d). The .data() method will compare dataset1 with previous data\n2. Since no previous data, all data items will go through the enter() method and append to SVG based on index \n3. Replace current data with dataset2 (c,d,e,f)\n4. Compare datasets for overlap. **c,d** occur in both dataset1 and dataset2\n5. new data (e,f) go to enter(), overlap data (c,d) go to update\n6. remove members in dataset1 that are not in dataset2 (a,b)\n7. update indexes (c,d) to new indexes from dataset2\n
repeat pattern for all new datasets\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2199,"value":"import { playUpdatePattern } from '@ahoak/d3-update-pattern-walkthrough'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2215,"value":"playUpdatePattern(true) //restart by pressing play ----->","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1974,"value":"md`### Watch data joins in action!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2430,"value":"md`1. Join old and new Data *.data()* \n2. Enter *.enter()*, Append *.append()*, DOM Elements, any overlapping data will go into the update function\n3. Exit *.exit()*, Remove *.remove()* DOM Elements no longer needed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1961,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2427,"value":"md`1. Join new and old Data *.data()* \n2. Update existing overlapping nodes\n3. Enter *.enter()*, Append *.append()*, new DOM Elements\n4. Exit *.exit()*, Remove *.remove()* DOM Elements no longer needed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1994,"value":"{\n\t// PATTERN 2 (update, enter(), exit())\n\tlet alpha = \"abcdefghijklmnopqrstuvwxyz\".split(\"\")\n\tconst WIDTH = width\n\tconst height = 200\n\n\tconst svg = d3.select(DOM.svg(WIDTH, height))\n\n\tupdate(alpha)\n\tsetInterval(() => {\n\t\tupdate(shuffled(alpha))\n\t}, 2000)\n\n\tfunction update(arr) {\n\t\tconst t = svg.transition().duration(500)\n\t\tconst t2 = svg.transition().duration(1000)\n\n\t\t// DATA BIND\n\t\tconst text = svg.selectAll(\".alpha-text\").data(arr, (d) => d)\n\n\t\t// UPDATE\n\t\ttext.attr(\"fill\", \"blue\")\n\t\t\t.transition().duration(500)\n\t\t\t.attr(\"x\", (d, i) => i * 15 + 100)\n\n\t\t// ENTER\n\t\ttext.enter().append(\"text\")\n\t\t\t.text((d) => d)\n\t\t\t.attr(\"class\", \"alpha-text\")\n\t\t\t.attr(\"fill\", \"green\")\n\t\t\t.attr(\"y\", 40)\n\t\t\t.attr(\"x\", (d, i) => -100)\n\t\t\t.transition().duration(500)\n\t\t\t.attr(\"x\", (d, i) => i * 15 + 100)\n\t\t\t.attr(\"y\", 100)\n\n\t\t// EXIT\n\t\ttext.exit()\n\t\t\t.attr(\"fill\", \"red\")\n\t\t\t.transition().duration(1000)\n\t\t\t.attr(\"x\", 500)\n\t\t\t.attr(\"y\", 30)\n\t\t\t.remove()\n\t}\n\treturn svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2423,"value":"md`1. Join Data *.data()* \n2. Enter *.enter()*, Append *.append()*, Merge *.merge() (if applicable)* DOM Elements\n3. Exit *.exit()*, Remove *.remove()* DOM Elements no longer needed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2023,"value":"{\n\t// PATTERN 3 (.merge)\n\tlet alpha = \"abcdefghijklmnopqrstuvwxyz\".split(\"\")\n\tconst WIDTH = width\n\tconst height = 200\n\n\tconst svg = d3.select(DOM.svg(WIDTH, height))\n\n\tupdate(alpha)\n\tsetInterval(() => {\n\t\tupdate(shuffled(alpha))\n\t}, 2000)\n\n\tfunction update(arr) {\n\t\tconst t = svg.transition().duration(500)\n\t\tconst t2 = svg.transition().duration(1000)\n\n\t\t// DATA BIND\n\t\tconst text = svg.selectAll(\".alpha-text\").data(arr, (d) => d)\n\n\t\t// // UPDATE\n\t\ttext.attr(\"fill\", \"blue\")\n\n\t\t// ENTER\n\t\tconst enterNodes = text.enter().append(\"text\")\n\t\t\t.text((d) => d)\n\t\t\t.attr(\"class\", \"alpha-text\")\n\t\t\t.attr(\"fill\", \"green\")\n\t\t\t.attr(\"y\", 40)\n\t\t\t.attr(\"x\", (d, i) => -100)\n\n const update = enterNodes.merge(text) // apply to both new and exiting nodes\n update\n .transition().duration(500)\n .attr(\"y\", 100)\n \t\t\t.attr(\"x\", (d, i) => i * 15 + 100)\n\t\t// EXIT\n\t\ttext.exit()\n\t\t\t.attr(\"fill\", \"red\")\n\t\t\t.transition().duration(1000)\n\t\t\t.attr(\"x\", 500)\n\t\t\t.attr(\"y\", 30)\n\t\t\t.remove()\n\t}\n\treturn svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2001,"value":"md`### What if you want to set property on both entering and updating nodes?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2009,"value":"{\n\t// ========== CONSTANTS ========== \n\tconst MARGIN = 25\n\tconst HEIGHT = 300\n\tconst WIDTH = width\n\t// learn more on data joins: https://bost.ocks.org/mike/join/\n\tconst svg = d3.select(DOM.svg(WIDTH, HEIGHT))\n\n\t// continous call to update function\n\tconst interval = d3.interval((t) => {\n\t\tif (t > 1500 * 10) { // stop after 10 times\n\t\t\tinterval.stop()\n\t\t\treturn\n\t\t}\n\t\tlet endIndex = Math.floor(Math.random() * circleData.length - 1)\n\t\tif (endIndex < 1) {\n\t\t\tendIndex = 1\n\t\t}\n // change updateFruit() to updateFruit2()\n\t\treturn updateFruit2(svg, d3.shuffle([...circleData]).slice(0, endIndex).sort())\n\t}, 1500)\n\n\treturn svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2005,"value":"md` Use the .merge() method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2113,"value":"md`[Here](https://observablehq.com/@ahoak/data-join-example) is a guided example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`### Excercise \n
create 3 circles based on testData which entering nodes start at (0, 0) and update each node such that the cx = testData at each respected position, and cy = 20 (ie new positions are (15, 50), (45, 50), (75, 50)). Make sure to add a radius to your circles.\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2447,"value":"import { updateExercise, axisExample, axisWithData, getNodeLinks } from '@ahoak/d3-workshop-exercises'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2444,"value":"updateExercise(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"scales = md`# Part 3: Scales and Axes

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`Remember that (0,0) is on the top left.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`Similiarly we can build y-axis:\n\\`\\`\\`javascript\nconst yscale = d3.scaleLinear().domain([200, 0]).range([30, 150])\n\\`\\`\\` \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`Our y-axis will have values 0 - 200 where 0 will start at 150pt on SVG. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`D3 has a helper function to create ticks and axis lines.\n\\`\\`\\`javascript\nconst xaxis = d3.axisBottom().scale(xscale)\n\\`\\`\\`\nNow append axis to the SVG:\n\\`\\`\\`javascript\nconst xaxis_container = svg.append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"transform\", \\`translate(0, widthFromTop)\\`)\n .call(xaxis)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"md`** Example**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"viewof scaleType = select([\"linear\", \"time\", \"point\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md`### Excercise \n
Use the template below to create a x-axis and y-axis where x values go from 20-100, and y values go from 0-30.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"axisExample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"{\n const height = 300\n const margin = {top: 30, bottom: 30, left: 40, right: 40}\n const svg = d3.select(DOM.svg(width, height))\n // === create x and y scales ===\n // const xScale = \n // const yScale = \n \n // === create axis ===\n // const yAxis = \n // const xAxis = \n \n // === Append each axis to svg ===\n \n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2507,"value":"axisWithData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2510,"value":"md`Copy your code from above and add in circles based on the data given`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2513,"value":"{\n const height = 300\n const margin = {top: 30, bottom: 30, left: 40, right: 40}\n const data = [{x:30, y:20}, {x:55, y:8},{x:79, y:24}] // <------ Circle Data\n const radius = 10 // circle radius\n const svg = d3.select(DOM.svg(width, height))\n // YOUR AXIS HERE \n \n // append circle data to the Axis\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md`Scales can also be used to scale radius of circles and scale colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"viewof colorSelection = select([\"Brewer\", \"Rainbow\", \"Blues\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`**Colors! Colors! Colors!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"md`Check out all the color scales [here](https://github.com/d3/d3-scale-chromatic)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"barChart = md`# Part 4 : Bar Chart

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md`Below is an example of using transitions, data joins, scales to create a dynamic chart. The Candy Bar Ranking was from 2017 data published [here](https://fivethirtyeight.com/features/the-ultimate-halloween-candy-power-ranking/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"barData = {\n const candyDataEndpoint = 'https://raw.githubusercontent.com/ahoak/data-visualization-workshop/master/data/candy-data.csv'\n const rawBarData = await d3.csv(candyDataEndpoint)\n const processCandyData = (data) => {\n return data.map((o) => {\n const chocolate = o.chocolate === '1' ? true : false\n const fruity = o.fruity === '1' ? true : false\n const caramel = o.caramel === '1' ? true : false\n const nuts = o.nuts === '1' ? true : false\n const price = +((o.pricepercent * 100).toFixed(2))\n const sugar = +((o.sugarpercent * 100).toFixed(2))\n const votes = +((o.winpercent * 1).toFixed(2))\n return {\n name: o.name,\n chocolate,\n fruity,\n caramel,\n nuts,\n price,\n sugar,\n votes\n } \n }) \n }\n return processCandyData(rawBarData)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"legendOptions = {\n const USE_COLOR = '#272491'\n const FRUITY_COLOR = '#FA3DBD'\n const NUTS_COLOR = '#44BE67'\n const CARAMEL_COLOR = '#DC8600'\n const CHOCOLATE_COLOR = '#583500'\n const NONE = '#0796D2'\n const colors = {\n 'fruity': FRUITY_COLOR,\n 'nuts': NUTS_COLOR,\n 'caramel': CARAMEL_COLOR,\n 'chocolate' : CHOCOLATE_COLOR,\n 'none' : NONE\n }\n const types = {\n 'fruity': 'fruity',\n 'nuts': 'nuts',\n 'caramel' : 'caramel',\n 'chocolate' : 'chocolate'\n } \n return { types, colors, width: 100, height: 90, rHeight: 10, rWidth: 20}\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"viewof candyViewSelector = select([\"votes\", \"sugar\", \"price\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"{\n // === OPTIMIZATION ===\n const svg = d3.select(chart)\n let maxTextLength = 100\n const angleDegrees = -45\n const angleRadians = angleDegrees * (Math.PI / 180)\n const padding = 100\n // Adjust axis text so that when we angle it, all text is visible\n // hypotenuse = this.getBBox().width\n // solve pythagorean theorem for opposite which is total distance from top\n svg.selectAll(\".xAxis text\") \n .style(\"font-family\", \"Segoe UI, Tahoma, Geneva, Verdana, sans-serif\")\n .attr(\"transform\", function(d, n, i) {\n maxTextLength = Math.max(maxTextLength + 0.1, this.getBBox().width)\n return `translate( ${this.getBBox().height*-2}, ${-(this.getBBox().width * Math.sin(angleRadians))/2})rotate(${angleDegrees})`\n })\n // add extra padding to move svg up is needed so that text doesn't get cut off due to svg height constraint \n svg.attr(\"transform\", `translate( 0, ${padding - maxTextLength + 10})`)\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"md` ### Excercise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"value":"md`Below is data for the most common Unisex names in America in 2013. Plot each name on an x,y axis where the x value is the name and y value is the count. Use circles to represent your datapoint and color each circle on a scale of your choice.
Bonus: create a chart where x values are names and y values are malePercent and femalePercent. Data from [fivethirtyeight](https://fivethirtyeight.com/features/there-are-922-unisex-names-in-america-is-yours-one-of-them/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"unisexNames = await d3.csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/unisex-names/unisex_names_table.csv', function(d, i) {\n return {\n name: d.name, \n \"rank\": i, \n \"males\": parseFloat(d[\"male_share\"]), \n \"females\": parseFloat(d[\"female_share\"]) \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"md`~note : we don't need to make this transition on exit because the data changing does not have any overlap. If you are interested in seeing how to animate an update, check out this [example](https://bl.ocks.org/ricardo-marino/ca2db3457f82dbb10a8753ecba8c0029)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"viewof unisexSelector = radio({title: \"View\", options:[\"Most Popular\", \"Least Popular\"], value: \"Most Popular\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2243,"value":"import {unisexNamesChart} from '@ahoak/barchart-names-exercise'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2398,"value":"unisexNamesChart(unisexSelector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2252,"value":"processNamesData = (selector) => {\n const startIndex = selector === \"Most Popular\" ? 0 : (unisexNames.length -1) - 10\n const endIndex = selector === \"Most Popular\" ? 10 : (unisexNames.length -1) \n const data = unisexNames.slice(startIndex, endIndex)\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"handleData = (type, data, filter ) => {\n const coloredData = data.map((d) => {\n if(!type) {\n d.color = legendOptions.colors['none']\n } else {\n d.color = d[type] ? legendOptions.colors[type] : legendOptions.colors['none']\n }\n return d\n })\n const sortedData = coloredData.sort((x, y) =>{\n return d3.descending(x[filter], y[filter])\n })\n return sortedData.slice(0, 15)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"mapDataToType = (type) => {\n const data = barData\n return data.map((d) => {\n if(!type) {\n d.color = legendOptions.colors['none']\n } else {\n d.color = d[type] ? legendOptions.colors[type] : legendOptions.colors['none']\n }\n return d\n })\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"forceDirected = md`# Part 5 : Force Directed Graph

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2715,"value":"md` ### Expand and Shrink ViewBox`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2720,"value":"import {formatted_table} from '@ahoak/hac-on-time-series-data'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2591,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2596,"value":" tree = (d) => (d3.tree()\n .size([2 * Math.PI, width / 5 - 10])\n .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)\n (d3.hierarchy(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2729,"value":"md`### Map HTML coordinates to SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2734,"value":"md`
\n