25:["$","title",null,{"children":"Film Flowers 🌼 | DigitalGnome | Observable"}] 4b:T707,{ // convert data JSON object into an array of objects // const dataArr = [] // for (let id in data) { // dataArr.push(data[id]) // } const mainDiv = document.querySelector('div'); mainDiv.style.cssText = ` // text-align: center; `; const svg = DOM.svg(800, 680) svg.style.cssText = ` // background-color: rgba(46, 134, 222, 0.02); background-color: rgba(255, 250, 101, 0.03); // background-color: rgba(48, 51, 107, 0.015); // background-color: rgba(224, 86, 253, 0.015); // background-color: rgba(149, 175, 192, 0.05); border: 3px solid rgba(46, 134, 222, 0.8); border-radius: 8px; padding: 0rem; `; const ratingMinMax = d3.extent(data, d => +d.imdbRating) const votesMinMax = d3.extent(data, d => +d.imdbVotes.replace(',', '')) const sizeScale = d3.scaleLinear().domain(ratingMinMax).range([0.25, 1]) const numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([4, 12]) // const d = data[122] let numPetals = null const flowersData = _.map(data, d => { numPetals = numPetalScale(+d.imdbVotes.replace(',', '')) const petSize = sizeScale(+d.imdbRating) return { petSize, petals: _.times(numPetals, i => { return { angle: i * 360 / numPetals, petalPath } }), numPetals } }) const flowers = d3.select(svg) .selectAll('g') .data(flowersData) .enter() .append('g') .attr('transform', (d, i) => `translate(${(i % 25) * petalSize}, ${Math.ceil(i / 8.75) * petalSize})scale(${d.petSize})`) flowers.selectAll('path') .data(d => d.petals).enter().append('path') .attr('d', d => d.petalPath) .attr('transform', d => `rotate(${d.angle})`) .attr('fill', (d, i) => d3.interpolateRainbow(d.angle / 360)) return svg }4c:[] 47:{"id":"81773bfe7740b3e7","slug":"film-flowers","title":"Film Flowers 🌼","thumbnail":"fdd803e5739420cdb38db505b1212ddcd906c25b9bc1ba18de9784011be92649","access_level":"public","create_time":"$D2020-07-22T05:31:14.030Z","update_time":"$D2020-07-22T21:07:08.211Z","view_time":null,"first_public_time":"$D2020-07-22T20:39:00.627Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f88c6c44198ab93e","login":"digitalgnome","name":"DigitalGnome","avatar_url":"https://avatars-next.observableusercontent.com/4434d03e27bee366bd28900eb160aa3aecbab2d120b982e9eedb84b782bada7b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":531,"publish_version":531,"role":null,"authored":false,"authors":[{"type":"individual","id":"81fbdfcddca11d4d","login":"digitalgnome","name":"DigitalGnome","avatar_url":"https://avatars-next.observableusercontent.com/4434d03e27bee366bd28900eb160aa3aecbab2d120b982e9eedb84b782bada7b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"81fbdfcddca11d4d","login":"digitalgnome","name":"DigitalGnome","avatar_url":"https://avatars-next.observableusercontent.com/4434d03e27bee366bd28900eb160aa3aecbab2d120b982e9eedb84b782bada7b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Film Flowers 🌼","cells":[{"id":0,"value":"md`# Film Flowers 🌼`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md`## A variation on Introduction to D3.js with Shirley Wu on the Coding Train YouTube Channel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`### Coded by Tariq Khan`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`\n### SVG (Scalable Vector Graphics) D3.js Path Methods:
\nMove to M(x, y)
\nCurve to C(px1, py1, px2, py2, x2, y2)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`The petal size path and size variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"petalPath = 'M 0,0 C 10,0 0,-50 0,-50 C -1,-50 30,2 0,0';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"petalSize = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`The shape of an individual petal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"md`Adding the d3 instance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`Adding lodash functionality to the project`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md`Import IMDb movie data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"data = d3.json('https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json').then(d => _.values(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null