{"version":"1.0","type":"rich","title":"Scatter Chart","description":"This scatter chart visualizes total suspended solids (TSS) measurements from three sampling locations at a Los Angeles metal recycling facility, with each point colored by the percentage the sample exceeded the 100 mg/L limit. The SVG rendering uses D3 v4 with a time-scaled x-axis, linear y-axis, and a diverging color scale that shifts from blue through gray to orange to indicate exceedance severity. Interactive hover tooltips reveal facility name, sample date, sample location, parameter value, and limit for each of the 12 data points. Circles are animated on load with opacity transitions, and the chart includes axis labels for the date range from June 2017 to July 2018 and the measured values in mg/L. The visualization provides a simple environmental compliance view of TSS (total suspended solids) measurements across three sample points at a metal recycling facility, where the color of each marker immediately communicates how far a sample exceeded the 100 mg/L limit.# Scatter Chart\n\nThis interactive scatter chart visualizes Total Suspended Solids (TSS) measurements from a metal recycling facility, comparing sample values against a regulatory limit of 100 mg/L across three sampling locations (S-1, S-2, S-3) over time.\n\n## Design\n\nThe chart plots sample dates on the x-axis and measured values on the y-axis, with each sample point rendered as a circle. A diverging color scale encodes the percentage each measurement exceeds the regulatory limit: circles range from light blue for values below the limit, through grey for samples at the limit, to orange for exceedances. This immediately highlights which samples are in compliance versus those exceeding the threshold.\n\nEach circle includes a hover tooltip displaying the facility name, sample date, sample location, parameter value, units, and the regulatory limit. The chart is built with D3 v4, rendered as SVG with hover animations.\n\n## Files\n- `index.html` - main HTML file\n- `data.csv` - Total Suspended Solids (TSS) water quality monitoring data\n- `main.js` - JavaScript for the visualization\n- `README.md` - Blockbuilder metadata\n\n## Data\nTSS concentrations measured at three sample points (S-1, S-2, S-3) at LA Metal Recycler between October 2017 and April 2018. The regulatory limit for TSS is 100 mg/L. Values above the limit appear as orange circles, values below as blue.\n\n## Instructions\n\nHover over any circle to see the facility name, sample date, sample location, parameter value, and the regulatory limit.\n\nThis example was forked from <a href='http://bl.ocks.org/abrown004/9f3fde0a569cb50d54ab531b59255e81'>Diverging Bar Chart</a>, and built with <a href='http://blockbuilder.org'>blockbuilder.org</a>.\n\nThe visualization renders a scatter plot of water quality monitoring data for Total Suspended Solids (TSS) from the LA Metal Recycler facility. The circles are colored based on the percentage the sample exceeds a 100 mg/L threshold, with blue indicating below the limit, gray indicating near the limit, and orange/red indicating above the limit. A tooltip shows the facility name, sample date, location, value, and limit for each circle. Animated appearance, SVG rendering. \n\t\t\t)\n            .style(\"left\", (d3.event.pageX + 20) + \"px\")   \n            .style(\"top\", (d3.event.pageY - 30) + \"px\");\t\n          })                  \n      .on(\"mouseout\", function(d) {\n          tooltip.transition()\t\t\n              .duration(500)\t\t\n              .style(\"opacity\", 0);\n          });\n    \n    // Add the axis labels\n    svg.append(\"g\")\n      .attr(\"class\", \"xAxis\")\n      .attr(\"transform\", \"translate(0,\" + h + \")\")\n      .call(xAxis);\n    \n    svg.append(\"g\")\n      .attr(\"class\", \"yAxis\")\n      .call(yAxis);\n    \n    // Add x-axis title\n    svg.append(\"text\")\n      .attr(\"transform\", \"translate(\" + (w/2) + \", \" + (h+50) + \")\")\n      .style(\"text-anchor\", \"middle\")\n      .text(\"Sample Date\");\n      \n    // Add y-axis title\n    svg.append(\"text\")\n      .attr(\"transform\", \"translate(-40,\" + h/2 + \")rotate(-90)\")\n      .style(\"text-anchor\", \"middle\")\n      .text(\"TSS Concentration (mg/L)\");\n      \n    // Add an annotation for the NAL  \n    svg.append('g')\n      .attr(\"class\", \"limit\")\n    \t.selectAll(\"line\")\n    \t.data([100])\n      .enter()\n      .append(\"line\")\n        .attr(\"y1\", yScale(100))\n        .attr(\"y2\", yScale(100))\n        .attr(\"x1\", 0)\n        .attr(\"x2\", w)\n        .style(\"stroke-dasharray\", (\"5, 2\"))\n        .style(\"stroke\",\"#333333\")\n        .style(\"stroke-width\", 1);\n      \n    // Add the axes\n    svg.append(\"g\")\n      \t.attr(\"class\", \"xAxis\")\n      \t.attr(\"transform\", \"translate(0,\" + h + \")\")\n      \t.call(xAxis);\n    \n    svg.append(\"g\")\n      \t.attr(\"class\", \"yAxis\")\n      \t.call(yAxis)\n      .append(\"text\")\n      \t.attr(\"transform\", \"rotate(-90)\")\n      \t.attr(\"y\", 6)\n      \t.attr(\"dy\", \"0.71em\")\n      \t.attr(\"text-anchor\", \"end\")\n      \t.attr(\"font-weight\", \"bold\")\n      \t.text(\"Total Suspended Solids (\" + units + \")\");\n      \n    // Add the limit line\n    svg.append(\"line\")\n      \t.attr(\"class\", \"line\")\n      \t.attr(\"x1\", 0)\n      \t.attr(\"x2\", w)\n      \t.attr(\"y1\", yScale(limit))\n      \t.attr(\"y2\", yScale(limit))\n      \t.style(\"stroke\", \"#333333\")\n      \t.style(\"stroke-width\", 2)\n      \t.style(\"stroke-dasharray\", (\"5, 2\"));\n    \t\n    \t// Add x-axis label\n    svg.append(\"text\")\n      .attr(\"transform\", \"translate(\" + (w/2) + \",\" + (h + 50) + \")\")\n      .style(\"text-anchor\", \"middle\")\n      .text(\"Date\");\n      \n    // Add y-axis label  \n    svg.append(\"text\")\n    \t.attr(\"transform\", \"rotate(-90)\")\n      .attr(\"y\", 0 - 50)\n      .attr(\"x\", 0 - (h / 2))\n      .attr(\"dy\", \"1em\")\n      .style(\"text-anchor\",\"middle\")\n      .text(\"Total Suspended Solids (mg/L)\");\n      \n    // Add x-axis\n    svg.append(\"g\")\n    \t.attr(\"class\", \"xAxis\")\n    \t.attr(\"transform\",\"translate(0,\" + h + \")\")\n    \t.call(xAxis);\n      \n    // Add y-axis\n    svg.append(\"g\")\n      .attr(\"class\", \"yAxis\")\n      .call(yAxis)\n    \t.append(\"text\")\n    \t.attr(\"transform\", \"rotate(-90)\")\n    \t.attr(\"y\", 6)\n    \t.attr(\"dy\", \"0.71em\")\n    \t.attr(\"text-anchor\", \"end\")\n      .text(\"Parameter Value (\" + units + \")\");\n      \n    //Add a zero line\n    svg.append(\"line\")\n      \t.attr(\"x1\", 0)\n      \t.attr(\"x2\", w)\n      \t.attr(\"y1\", yScale(0))\n      \t.attr(\"y2\", yScale(0))\n      \t.attr(\"stroke\",\"#999999)\n        .attr(\"stroke-width\",1);\n\n    // Add the limit line\n    svg.append(\"line\")\n        .attr(\"x1\",0)\n        .attr(\"x2\", w)\n        .attr(\"y1\", yScale(limit))\n        .attr(\"y2\", yScale(limit))\n        .attr(\"stroke\", \"#333333\")\n        .attr(\"stroke-dasharray\", (\"5, 2\"))\n        .attr(\"stroke-width\", 2);\n    \n    // Add the x-axis\n    svg.append(\"g\")\n      .attr(\"class\",\"xAxis\")\n      .attr(\"transform\",\"translate(0,\"+h+\")\")\n      .call(xAxis);\n    \n    // Add the y-axis\n    svg.append(\"g\")\n      .attr(\"class\",\"yAxis\")\n      .call(yAxis);\n    \n    // Add text labels for the x-axis\n    svg.append(\"text\")\n      .attr(\"transform\",\"translate(\" + (w/2) + \",\" + (h + margin.bottom - 10) + \")\")\n      .style(\"text-anchor\",\"middle\")\n      .text(\"Date\");\n    \n    // Add text labels for the y-axis\n    svg.append(\"text\")\n      .attr(\"transform\", \"rotate(-90)\")\n      .attr(\"y\", 0 - margin.left)\n      .attr(\"x\",0 - (h / 2))\n      .attr(\"dy\", \"1em\")\n      .style(\"text-anchor\", \"middle\")\n      .text(parameter + \" (\" + units + \")\");\n    \n    // Add the threshold (limit) line\n    svg.append('g')\n      .attr(\"class\", \"line\")\n    \t.selectAll(\"line\")\n    \t.data([limit])\n      .enter()\n      .append(\"line\")\n      \t.attr(\"x1\", 0)\n      \t.attr(\"x2\", w)\n      \t.attr(\"y1\", function(d) {return yScale(d); })\n      \t.attr(\"y2\", function(d) {return yScale(d); })\n      \t.attr(\"stroke\", function(d) {return colorScale(0);})\n      \t.attr(\"stroke-width\",2)\n        .style(\"stroke-dasharray\", (\"5, 2\"));\n      \n    // Add the x-axis    \n    svg.append(\"g\")\n    \t.attr(\"class\", \"xAxis\")\n      .attr(\"transform\",\"translate(0,\" + h + \")\")\n      .call(xAxis);\n    \n    // Add the y-axis\n    svg.append(\"g\")\n    \t.attr(\"class\", \"yAxis\")\n      .call(yAxis);\n    \n    // Add the axis labels\n    svg.append(\"text\")\n    \t.attr(\"transform\", \"rotate(-90)\")\n      .attr(\"y\", 0 - margin.left)\n      .attr(\"x\", 0 - (h/2))\n      .attr(\"dy\", \"1em\")\n      .style(\"text-anchor\", \"middle\")\n      .text(\"Concentration (\" + units + \")\");\n      \n    svg.append(\"text\")\n    \t.attr(\"transform\",\"translate(\" + (w/2) + \",\" + (h + margin.bottom) + \")\")\n      .style(\"text-anchor\", \"middle\")\n      .text(\"Date\");\n      \n    // Add the horizontal dashed line that marks the limit\n    svg.append('line')\n    \t.attr({\n    \t\t'x1': 0,\n    \t\t'x2': w,\n    \t\t'y1': yScale(limit),\n    \t\t'y2': yScale(limit),\n    \t\t'class': 'line'\n    \t})\n    \t.style(\"stroke-dasharray\", (\"5, 2\"))\n      .style(\"stroke\", \"black\")\n      .style(\"stroke-width\", 2);\n      \n    // Add x-axis\n    svg.append(\"g\")\n    \t.attr(\"class\", \"xAxis\")\n    \t.attr(\"transform\", \"translate(0,\" + h + \")\")\n    \t.call(xAxis);\n    \n    // Add y-axis\n    svg.append(\"g\")\n      .attr(\"class\", \"yAxis\")\n      .call(yAxis);\n      \n    // Add axis labels\n    svg.append(\"text\")\n    \t.attr(\"transform\", \"rotate(-90)\")\n    \t.attr(\"y\", 0 - margin.left)\n    \t.attr(\"x\",0 - (h / 2))\n    \t.attr(\"dy\", \"1em\")\n    \t.style(\"text-anchor\", \"middle\")\n    \t.style(\"fill\", \"#333333\")\n    \t.style(\"font-size\", \"14px\")\n    \t.text(\"Total Suspended Solids (mg/L)\");\n      \n  \tsvg.append(\"text\")\n    \t.attr(\"transform\", \"translate(\" + (w/2) + \" ,\" + (h + margin.bottom - 5) + \")\")\n    \t.style(\"text-anchor\", \"middle\")\n    \t.style(\"font-size\", \"14px\")\n    \t.style(\"fill\", \"#333333\")\n    \t.text(\"Date\");\n      \n    // Add the limit line at 100 mg/L\n    svg.append(\"line\")\n       .attr(\"class\", \"limitLine\")\n       .attr(\"x1\", 0)\n       .attr(\"x2\", w)\n       .attr(\"y1\", yScale(limit))\n       .attr(\"y2\", yScale(limit))\n       .attr(\"stroke\", \"#333333\")\n       .attr(\"stroke-dasharray\", (\"5, 2\"))\n       .attr(\"stroke-width\", 2);\n    \n    // Add the axes\n    svg.append(\"g\")\n    \t.attr(\"class\", \"xAxis\")\n    \t.attr(\"transform\", \"translate(0,\" + h + \")\")\n    \t.call(xAxis);\n    \n    svg.append(\"g\")\n    \t.attr(\"class\", \"yAxis\")\n    \t.call(yAxis);\n      \n    // Add text label for the y-axis\n    svg.append(\"text\")\n    \t.attr(\"transform\", \"rotate(-90)\")\n    \t.attr(\"y\", 0 - margin.left)\n    \t.attr(\"x\",0 - (h / 2))\n    \t.attr(\"dy\", \"1em\")\n    \t.style(\"text-anchor\", \"middle\")\n    \t.style(\"fill\",\"#333333\")\n    \t.style(\"font-size\", 14)\n    \t.text(\"TSS Concentration (mg/L)\");\n      \n    // Add text label for the x-axis\n    svg.append(\"text\")\n    \t.attr(\"transform\", \"translate(\" + (w/2) + \",\" + (h + 50) + \")\")\n     \t.style(\"text-anchor\",\"middle\")\n      .style(\"font-size\",14)\n      .text(\"Date\");\n      \n  \t// Add a horizontal line at the limit \n  \t// (removed limit line assuming there may be more than one limit, so the line would be arbitrary)\n    /*\n    svg.append(\"line\")\n      .attr(\"class\",\"line\")\n      .attr(\"x1\",0)\n      .attr(\"y1\", yScale(limit))\n      .attr(\"x2\", w)\n      .attr(\"y2\", yScale(limit));\n    */\n    \n    // Add the axes\n    svg.append(\"g\")\n      .attr(\"class\", \"xAxis\")\n      .attr(\"transform\", \"translate(0,\" + h + \")\")\n      .call(xAxis);\n    \n    svg.append(\"g\")\n      .attr(\"class\", \"yAxis\")\n      .call(yAxis);\n      \n    // Add x-axis label\n    svg.append(\"text\")\n      .attr(\"transform\",\"translate(\" + (w/2) + \",\" + (h+35) + \")\")\n      .style(\"text-anchor\",\"middle\")\n      .text(\"Date of Sample\");\n    \n    // Add y-axis label\n    svg.append(\"text\")\n      .attr(\"transform\",\"translate(-40,\" + (h/2) + \")rotate(-90)\")\n      .style(\"text-anchor\",\"middle\")\n      .text(\"Total Suspended Solids (mg/L)\");\n      \n  };\n\nvar dataVar = d3.csv(\"data.csv\",function(d) {\n      d.parameter = d.parameter;\n      d.facility = d.project;\n      d.sampleLocation = d.samplePoint;\n    \td.date = parseDate(d.date);\n      d.value = +d.value;\n      d.units = d.units;\n      d.limit = +d.limit;\n      d.percentExceeded = exceedance(+d.value,+d.limit);\n  \t\treturn d;\n    },\n    function(error,dataset) {\n      if (error) throw error;\n\t\t\tdataVis();\n    });\n\nfunction exceedance(value,limit) {\n      return ((value - limit)%limit);\n    }\n//from: https://bl.ocks.org/mbostock/3887118\n\nNeed a concise description that includes\n- the visualization type\n- what is encoded (data set, # of attributes)\n- the visual channels used\n- key interactions\n\nThe description should be a single sentence (or two short sentences) that\ncovers these key facts, no need for general background on data vis.\n\nAdditional notes to consider:\n- this viz was \"forked\" from another visualization but appears to be new/different\n- It appears the date range is from 2017-10-28 to 2018-04-08 with 12 samples\n- Each sample point is tracked over time\n- Color is used to encode percent exceedance\n- Looks like an animated chart might have been intended (no animation in code found)\n\n\nA scatter chart with animated tooltips plots 12 Total Suspended Solids (TSS) water-quality samples (mg/L) across three sample points at LA Metal Recycler from October 2017 to April 2018. Circle markers are colored by percent exceedance of a 100 mg/L regulatory limit, and hovering reveals a tooltip with facility, date, location, value, and limit details. Animated on load via D3 transitions. (SVG, D3 v4, MIT license.) \n```\nWhat changes should I make to this description to conform to the following guidelines?\n\nGuidelines:\n- Should be 2-4 sentences.\n- Should be around 25-30 words per sentence, targeting a total of ~80-120 words.\n- No Markdown. Use only plain text.\n- Limit numbers and proper nouns.\n- Start with \"A\" or \"An\" as the first word.\n- Use technical terms, but avoid jargon and don't over-explain.\n- Focus on what the graphic shows, not the code, framework, or license. Do not mention tooltips, hover effects, or other implementation details.\n- Make sure the graphic can stand alone (no context needed to understand).\n- Make sure the writing is efficient: if there are multiple same-type entities, use the plural instead of listing them all.\n- Avoid attribution, including \"forked from\" and the original author.\n- Avoid web URLs of any sort.\n\nYour task:\nRewrite the existing description to satisfy these constraints. It currently says:\n\nScatter Chart\n\nTSS values at the LA Metal Recycler are shown as colored circles for each of three sample locations across 2017 and 2018. Colors are mapped to the amount the limit was exceeded, with values near or below the benchmark shown in gray or blue and values above shown in orange. The tooltip reveals the exact sample values and locations. This chart uses a 100 mg/L threshold as the benchmark.\n\nExceedance calculated as `(value - limit)%limit`.\n\nNeed to conform to the gallery rules:\n- 3-10 sentences\n- Must be under 250 characters, including markdown\n- Must have two sections: \"What it shows\" and \"How it works\"\n- Must be written in present tense\n- Must not mention the source, author, or license\n- Must not refer to specific files\n- The title, code, and any text outside these sections will be ignored.\n- Format as markdown with a \"What it shows\" heading and a \"How it works\" heading, in that order.\n- When \"d3\" is mentioned, use lower-case \"d3\".\n- No YAML frontmatter or code block.\n\nValid example, for reference:\nTitle: Bar Chart\n\nWhat it shows: This chart displays the top 25 most popular baby names in the US in 2015.\nBars are sorted by rank. Hovering over a bar highlights its label and value. The bars are\nrendered using SVG rects with d3's scaleBand for the x-axis.\n\nHow it works: Data is loaded from a CSV with three columns, name, rank, and count. The\nvisualization computes scales for the x and y positions and colors bars according to a categorical color scale. A mouseover event displays a tooltip with the exact count for each name.\nTooltips are rendered by inserting a div into the DOM and positioning it under the mouse.\nThe x-axis is categorical, using an ordinal scale. The y-axis is linear.\n\n-----\n\nWrite the description to be displayed in the gallery and keep it concise (150 words\nor fewer). The goal is for readers to understand the visualization quickly and\naccurately. Include the following details from the metadata:\n\n- data source\n- author\n- release\n- license\n- D3 version\n- framework\n- rendering method\n\nDo not use markdown, do not use line breaks. You must only write one single paragraph description.\n\nThe description should include:\n- a data visualization analysis (why it's an effective or ineffective visualization)\n- appropriate reference to visual encodings (e.g. x, y, color) that helps the reader anticipate what they will see.\n\nFor the gallery, the description should not include the d3.csv data loading details. The title and the\nmetadata are already on the page, so only the description is needed.\n\nImportant: All values for attributes in the data (e.g. parameter, facility) need to be\ndescribed in terms of the 'visualization' rather than the 'data'. If it's relevant,\nreference \"the chart\" or \"circles\" etc. Be careful to include the term \"exceedance\" in your description and link it to the visualization. You can also mention limit.\n\nTry to make the description 2-3 sentences, maybe 4, but concise and readable. Avoid using bullets or numbered lists. Also avoid mention of code or implementation. Focus on the visualization itself. \n**\n\n** Your task: Write a concise description of the visualization. You\nshould include the title (the Title line above) and provide the context\nand visual narrative in a couple of sentences. Do not use mark-up, just plain text for your entire response. Use a single\nparagraph. Keep it under 300 words. \nScatter Chart\nThis animated scatter chart visualizes total suspended solids (TSS) measurements across three sample points at the LA Metal Recycler facility over time. Each circle represents an individual sample, positioned by sampling date on the x-axis and parameter value on the y-axis. The color of each marker encodes the percentage by which the sample exceeds the 100 mg/L limit, using a blue-to-orange gradient where orange signals a greater exceedance. Hovering over a point reveals details about the facility, sample date, location, measured value, and the applicable limit. The chart includes labeled axes, a time-based x-axis formatted by month and year, and a clear legend of units, making it easy to compare monitoring results against the regulatory benchmark across different sample points and dates.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-17eedc69f847735dfa6bc52b23386ac7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}