2a:T72f,{ const svgContainer = d3.select(svg) // clean out our previous render svgContainer.selectAll('*').remove() const margin = { top: 50, bottom: 100, left: 100, right: 50 } const innerWidth = width - margin.left - margin.right const innerHeight = height - margin.top - margin.bottom const xValue = d => d.nrOfNominations const yValue = d => d.imdbRating const xAxisLabel = "Number of Nominations" const yAxisLabel = "IMDB Rating" const scaleX = d3.scaleLinear() .domain(d3.extent(data, xValue)) .range([0, innerWidth]) const scaleY = d3.scaleLinear() .domain(d3.extent(data, yValue)) .range([innerHeight, 0]) .nice() const g = svgContainer.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const xAxis = d3.axisBottom(scaleX) .ticks(10) .tickPadding(10) const yAxis = d3.axisLeft(scaleY) .tickPadding(10) .tickFormat(d3.format(".1f")) const xAxisG = svgContainer.append('g') .call(xAxis) .attr('transform', `translate(${margin.left},${margin.top + innerHeight})`) const yAxisG = svgContainer.append('g') .call(yAxis) .attr('transform', `translate(${margin.left},${margin.top})`) g.append('text') .attr('class', 'axis-label') .attr('x', innerWidth / 2) .attr('y', innerHeight) .attr('dy', 50) .attr('fill', 'black') .text(xAxisLabel) g.append('text') .attr('class', 'axis-label') .attr('x', -innerHeight / 2) .attr('y', - 50) .attr('transform', 'rotate(-90)') .attr('fill', 'black') .text(yAxisLabel) const circles = g.selectAll('circle') .data(data).enter().append('circle') .attr('r', 5) .attr('cx', d => scaleX(xValue(d))) .attr('cy', d => scaleY(yValue(d))) .attr('fill', 'steelblue') }2b:[{"id":"02449bfbeb1343be6c32cfb873aa2ed96c6de24217108f1901a6fb59bc7397af04e0235eb624af7be5f9af436fafe7f58093b0074f21a8f683a788fef2f2cdff","href":"https://static.observableusercontent.com/files/02449bfbeb1343be6c32cfb873aa2ed96c6de24217108f1901a6fb59bc7397af04e0235eb624af7be5f9af436fafe7f58093b0074f21a8f683a788fef2f2cdff","name":"imdb.csv","type":"text/csv","lastModified":1582065228912.056,"size":3439992}] 29:{"title":"Let's Make a Chart with D3.js","cells":[{"id":0,"value":"md`# Let's Make a Chart with D3.js\n\nVisualizing the [IMDB Movie Dataset](https://www.kaggle.com/orgesleka/imdbmovies/data) \n\n<Orges Leka / CC0>\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"svg = DOM.svg(width, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"data = d3.csvParse(imdb, d => {\n const autoTypedData = d3.autoType(d)\n autoTypedData.year = new Date(autoTypedData.year, 0, 1)\n return autoTypedData\n}).filter(\n d => (d.nrOfNominations < 1000) && (typeof d.imdbRating === 'number')\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"d3","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"imdb = FileAttachment('imdb.csv').text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}