27:null 28:["$","title",null,{"children":"Data Processing and Visualization | HungVu | Observable"}] 2d:T82a,

Data Processing and Visualization

A scatter plot to analyze the relationship between car mileage and price

A line graph to display the trend of car prices over the years.

A bar chart to compare the average prices of different car models.

A histogram or density plot to show the distribution of engine capacities

A pie chart or donut chart to display the percentage distribution of exterior colors.

2e:T883,selection = { const width = 628; const height = 300; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; const x = d3.scaleLinear() .domain([0, d3.max(data, d => d["price (AUD)"])]).nice() .range([marginLeft, width - marginRight]) .unknown(marginLeft); const y = d3.scaleLinear() // Fill in the missing code here. Hint: Refer to the calculation of x. .range([height - marginBottom, marginTop]) .unknown(height - marginBottom); const svg = d3.select('#scatter-chart') .attr("viewBox", [0, 0, width, height]) .property("value", []); svg.selectAll("*").remove(); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.append("text") .attr("x", width - marginRight + 20) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("price (AUD)")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 20) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("mileage (KM)")); const dot = svg.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .selectAll("circle") .data(data) .join("circle") .attr("transform", d => `translate(${x(d["price (AUD)"])},${y(d["mileage"])})`) .attr("r", 1); svg.call(d3.brush().on("start brush end", ({selection}) => { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("stroke", "gray") .filter(d => x0 <= x(d["price (AUD)"]) && x(d["price (AUD)"]) < x1 && y0 <= y(d["mileage"]) && y(d["mileage"]) < y1) .style("stroke", "steelblue") .data(); } else { dot.style("stroke", "steelblue"); } svg.property("value", value).dispatch("input"); })); return svg.node(); }2f:T681,lineChart = { const width = 600; const height = 350; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; const x = d3.scaleLinear(d3.extent(dataLine, d => d.year), [marginLeft, width - marginRight]); const y = d3.scaleLinear( // Fill in the missing code here. [height - marginBottom, marginTop] ); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.avgPrice)); const svg = d3.select('#line-chart') .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.selectAll("*").remove(); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickFormat(d3.format("d"))) .call(g => g.append("text") .attr("x", width - marginLeft - 10) .attr("y", 20) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Year")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ price (AUD)")); svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line(dataLine)); return svg.node(); }30:T593,barChart = { const width = 700; const height = 400; const marginTop = 30; const marginRight = 0; const marginBottom = 30; const marginLeft = 50; const x = d3.scaleBand() .domain(d3.groupSort(dataBar, ([d]) => -d.avgPrice, (d) => d.model)) .range([marginLeft, width - marginRight]) .padding(0.1); const y = d3.scaleLinear() // Fill in the missing code here. .range([height - marginBottom, marginTop]); const svg = d3.select("#bar-chart") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.selectAll("*").remove(); svg.append("g") .attr("fill", "steelblue") .selectAll() .data(dataBar) .join("rect") .attr("x", (d) => x(d.model)) .attr("y", (d) => y(d.avgPrice)) .attr("height", (d) => y(0) - y(d.avgPrice)) .attr("width", x.bandwidth()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickFormat((y) => y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Frequency (%)")); return svg.node(); }31:T725,densityChart = { const width = 960; const height = 500; const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 40; const bins = d3.bin() .thresholds(40) .value((d) => d) (dataHistogram); const x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range([height - marginBottom, marginTop]); const svg = d3.select("#histogram-chart") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.selectAll("*").remove(); svg.append("g") // Fill in the missing code here. .selectAll() .data(bins) .join("rect") .attr("x", (d) => x(d.x0) + 1) .attr("width", (d) => x(d.x1) - x(d.x0) - 1) .attr("y", (d) => y(d.length)) .attr("height", (d) => y(0) - y(d.length)); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .call((g) => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Engine rate (%) →")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call((g) => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Frequency (no. of engine)")); return svg.node(); }32:T6f9,pieChart = { const width = 700; const height = 500; const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.67) .outerRadius(radius - 1); const color = d3.scaleOrdinal() .domain(dataPie.map(d => d.color)) .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), dataPie.length).reverse()) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.count); const labelRadius = arc.outerRadius()() * 0.8; const arcLabel = d3.arc() .innerRadius(labelRadius) .outerRadius(labelRadius); const arcs = pie(dataPie); const svg = d3.select("#pie-chart") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; background-color: #f0f0f0;"); svg.selectAll("*").remove(); svg.append("g") .attr("stroke", "white") .selectAll() .data(arcs) .join("path") // Fill in the missing code here. .attr("d", arc) .append("title") .text(d => `${d.data.color}: ${d.data.count.toLocaleString("en-US")}`); svg.append("g") .attr("text-anchor", "middle") .selectAll() .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.color)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.count.toLocaleString("en-US"))); return svg.node(); }33:[{"id":"a6a3e221bbb29d640a283f0096e0b95c68bacf625434ed8ba62237b7e5e3c5175afdc7abbd8fb1ebccaba323d610fa91e392c8040cdace922c5f8a9d0d414986","href":"https://static.observableusercontent.com/files/a6a3e221bbb29d640a283f0096e0b95c68bacf625434ed8ba62237b7e5e3c5175afdc7abbd8fb1ebccaba323d610fa91e392c8040cdace922c5f8a9d0d414986","name":"cars.csv","type":"text/csv","lastModified":1759204042202.819,"size":6116263}] 2b:{"id":"f714c28214bfcb10","slug":null,"title":"Data Processing and Visualization","thumbnail":"9b9a1b1a5148ed0b35c2386d0b8990269a2f578da4d33a919f9087021bc55dc4","access_level":"public","create_time":"$D2025-09-30T03:47:22.202Z","update_time":"$D2025-09-30T03:47:22.202Z","view_time":null,"first_public_time":"$D2025-10-03T01:23:10.078Z","has_unpublished_edits":null,"fork":{"id":"4be24a83c17ba669","slug":null,"title":"Data Processing and Visualization","owner":{"id":"de4cf56bd3511674","login":"tran-xuan-huong","name":"Louisa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f5c7309b26125fcc","login":"hungvu","name":"HungVu","avatar_url":"https://avatars-next.observableusercontent.com/e05ed76fee20675b8e0b08541d3662553fef60af1246d701a500b9069a501315","tier":"starter_2024"},"version":483,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40925a5c5b74838c","login":"hung-vu","name":"Hưng Vũ","avatar_url":"https://avatars-next.observableusercontent.com/a47aa48d8885ba215f17080681efcb152b7cd359e840b63a0657d39e5248eebe","tier":null}],"members":[{"type":"team","id":"f5c7309b26125fcc","login":"hungvu","name":"HungVu","avatar_url":"https://avatars-next.observableusercontent.com/e05ed76fee20675b8e0b08541d3662553fef60af1246d701a500b9069a501315","tier":"starter_2024","role":"editor"},{"type":"individual","id":"40925a5c5b74838c","login":"hung-vu","name":"Hưng Vũ","avatar_url":"https://avatars-next.observableusercontent.com/a47aa48d8885ba215f17080681efcb152b7cd359e840b63a0657d39e5248eebe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Data Processing and Visualization","cells":[{"id":0,"value":"# Data Processing and Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"$2d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"

Exercise Instructions

\nObjective: Complete the provided code snippets to generate the correct graphical outputs.\n

Instructions

\n1. Read the Exercise: Start by reading through the entire notebook to understand the expected outcomes and the provided data.
\n2. Identify the Incomplete Code: Look for comments within the code blocks that say: \"// Fill in the missing code here\". These comments indicate where you need to write your code.
\n3. Write Your Code: Use the hints and your knowledge of programming to fill in the missing pieces of the code.
\n4. Run Your Code: After writing the code, execute the cell to see the output. Make sure the graph or output matches the expected results discussed at the beginning of the exercise.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"

1. A scatter plot to analyze the relationship between car mileage and price.

\nThis line of code is crucial for defining the vertical scale of the scatter plot. It sets the domain of the Y-axis by calculating the maximum 'mileage' from the data and adjusting the axis accordingly to display all data points effectively. To complete this functionality, you should use a D3.js method to dynamically compute the maximum value of 'mileage' from the dataset and apply the .nice() method to round this domain for better axis tick placement. Ensure the axis scales properly by updating the .domain() method of the Y-axis scale.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"data = FileAttachment(\"cars.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"

2. A line graph to display the trend of car prices over the years.

\nThis line of code is crucial for defining the scale of the Y-axis in your line chart. It sets the domain of the Y-axis to span from zero to the maximum value of 'avgPrice' in your data. To implement this, you should use D3.js methods to find the maximum value of 'avgPrice' from the dataset and set this as the upper bound of your Y-axis domain. This ensures that all data points are visible and proportionately scaled on the plot. Use the d3.max() function to find this maximum value and make sure to set the domain correctly in the scaleLinear function for the Y-axis.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"dataLine = Array.from(\n d3.rollups(data, v => d3.mean(v, d => d['price (AUD)']), d => d.year_of_manufacture),\n ([key, value]) => ({ year: key, avgPrice: value })\n ).sort((a, b) => a.year - b.year).filter(item => item.year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"

3. A bar chart to compare the average prices of different car models.

\nThis line is crucial for defining the Y-axis scale of your bar chart. It sets the domain from 0 up to the highest 'avgPrice' found in your dataset, ensuring that the bars fit proportionately within the chart's vertical space. To complete this task, you should calculate the maximum 'avgPrice' across your dataset and use this value to define the upper limit of your Y-axis scale. Utilize the d3.max() function to dynamically determine this maximum value, ensuring that your scale linearly maps the data values to pixel values for accurate bar heights.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"dataBar = d3.rollups(data, v => d3.mean(v, d => +d['price (AUD)']), d => d.car_model)\n .map(([model, avgPrice]) => ({ model, avgPrice }))\n .sort((a, b) => d3.descending(a.avgPrice, b.avgPrice));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"

4. A histogram or density plot to show the distribution of engine capacities

\nThis line of code sets the fill color of the bars in the histogram. By specifying a color such as 'steelblue', you can enhance the visual clarity and appeal of your chart, making the data more engaging and easier to interpret. To complete this aspect of your histogram, you should choose an appropriate color for the bars that reflects the context of the data being displayed. The .attr(\"fill\", \"colorName\") method is used to apply this color to all rectangles in the histogram. You might consider different colors depending on the theme or purpose of your visualization.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"dataHistogram = data.map(d => {\n const capacityMatch = d.engine.match(/(\\d+(\\.\\d+)?) L/);\n return capacityMatch ? parseFloat(capacityMatch[1]) : null;\n }).filter(capacity => capacity != null);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"

5. A pie chart or donut chart to display the percentage distribution of exterior colors.

\nThis line is responsible for setting the color of each segment in the pie chart. By dynamically assigning colors from the data (d.data.color), you allow for each segment to be visually distinct based on its corresponding data value. This visual distinction is crucial for helping viewers quickly identify and differentiate between different segments of the pie chart. To implement this, you should use the .attr(\"fill\", d => 'colors') method, which assigns the color attribute from your dataset to the fill property of each pie segment. Make sure that your data includes a 'color' property for each item to utilize this feature effectively","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"dataPie = d3.rollups(data, v => v.length, d => d.exterior_color)\n .map(([color, count]) => ({ color, count }))\n .sort((a, b) => d3.descending(a.count, b.count))\n .filter(item => item.count > 500);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"

6. A heatmap to explore the correlations between various numerical features such as mileage, engine capacity, and price.

\nThis heatmap provides a visual representation of the correlations between a car's mileage, engine capacity, and possibly its price, presented on the x-axis as mileage and y-axis as engine capacity. The color intensity on the chart indicates the concentration of data points, with darker shades representing higher densities of cars with particular combinations of mileage and engine capacity.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"dataHeatmap = data.map(d => {\n const capacityMatch = d.engine.match(/(\\d+(\\.\\d+)?) L/);\n if (capacityMatch)\n return {\n mileage: +d.mileage,\n capacity: parseFloat(capacityMatch[1]),\n price: +d['price (AUD)']\n }\n}).filter(item => item);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"Plot.contour(dataHeatmap, {x: \"mileage\", y: \"capacity\", fill: \"price\", blur: 4}).plot({color: {type: \"diverging\"}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2c:"$2b:body"