Scatter Chart
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
This 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.
## Design
The 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.
Each 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.
## Files
- `index.html` - main HTML file
- `data.csv` - Total Suspended Solids (TSS) water quality monitoring data
- `main.js` - JavaScript for the visualization
- `README.md` - Blockbuilder metadata
## Data
TSS 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.
## Instructions
Hover over any circle to see the facility name, sample date, sample location, parameter value, and the regulatory limit.
This 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>.
The 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.
)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// Add the axis labels
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis);
// Add x-axis title
svg.append("text")
.attr("transform", "translate(" + (w/2) + ", " + (h+50) + ")")
.style("text-anchor", "middle")
.text("Sample Date");
// Add y-axis title
svg.append("text")
.attr("transform", "translate(-40," + h/2 + ")rotate(-90)")
.style("text-anchor", "middle")
.text("TSS Concentration (mg/L)");
// Add an annotation for the NAL
svg.append('g')
.attr("class", "limit")
.selectAll("line")
.data([100])
.enter()
.append("line")
.attr("y1", yScale(100))
.attr("y2", yScale(100))
.attr("x1", 0)
.attr("x2", w)
.style("stroke-dasharray", ("5, 2"))
.style("stroke","#333333")
.style("stroke-width", 1);
// Add the axes
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.attr("font-weight", "bold")
.text("Total Suspended Solids (" + units + ")");
// Add the limit line
svg.append("line")
.attr("class", "line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", yScale(limit))
.attr("y2", yScale(limit))
.style("stroke", "#333333")
.style("stroke-width", 2)
.style("stroke-dasharray", ("5, 2"));
// Add x-axis label
svg.append("text")
.attr("transform", "translate(" + (w/2) + "," + (h + 50) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add y-axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - 50)
.attr("x", 0 - (h / 2))
.attr("dy", "1em")
.style("text-anchor","middle")
.text("Total Suspended Solids (mg/L)");
// Add x-axis
svg.append("g")
.attr("class", "xAxis")
.attr("transform","translate(0," + h + ")")
.call(xAxis);
// Add y-axis
svg.append("g")
.attr("class", "yAxis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Parameter Value (" + units + ")");
//Add a zero line
svg.append("line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", yScale(0))
.attr("y2", yScale(0))
.attr("stroke","#999999)
.attr("stroke-width",1);
// Add the limit line
svg.append("line")
.attr("x1",0)
.attr("x2", w)
.attr("y1", yScale(limit))
.attr("y2", yScale(limit))
.attr("stroke", "#333333")
.attr("stroke-dasharray", ("5, 2"))
.attr("stroke-width", 2);
// Add the x-axis
svg.append("g")
.attr("class","xAxis")
.attr("transform","translate(0,"+h+")")
.call(xAxis);
// Add the y-axis
svg.append("g")
.attr("class","yAxis")
.call(yAxis);
// Add text labels for the x-axis
svg.append("text")
.attr("transform","translate(" + (w/2) + "," + (h + margin.bottom - 10) + ")")
.style("text-anchor","middle")
.text("Date");
// Add text labels for the y-axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (h / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text(parameter + " (" + units + ")");
// Add the threshold (limit) line
svg.append('g')
.attr("class", "line")
.selectAll("line")
.data([limit])
.enter()
.append("line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", function(d) {return yScale(d); })
.attr("y2", function(d) {return yScale(d); })
.attr("stroke", function(d) {return colorScale(0);})
.attr("stroke-width",2)
.style("stroke-dasharray", ("5, 2"));
// Add the x-axis
svg.append("g")
.attr("class", "xAxis")
.attr("transform","translate(0," + h + ")")
.call(xAxis);
// Add the y-axis
svg.append("g")
.attr("class", "yAxis")
.call(yAxis);
// Add the axis labels
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (h/2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Concentration (" + units + ")");
svg.append("text")
.attr("transform","translate(" + (w/2) + "," + (h + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add the horizontal dashed line that marks the limit
svg.append('line')
.attr({
'x1': 0,
'x2': w,
'y1': yScale(limit),
'y2': yScale(limit),
'class': 'line'
})
.style("stroke-dasharray", ("5, 2"))
.style("stroke", "black")
.style("stroke-width", 2);
// Add x-axis
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
// Add y-axis
svg.append("g")
.attr("class", "yAxis")
.call(yAxis);
// Add axis labels
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (h / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("fill", "#333333")
.style("font-size", "14px")
.text("Total Suspended Solids (mg/L)");
svg.append("text")
.attr("transform", "translate(" + (w/2) + " ," + (h + margin.bottom - 5) + ")")
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", "#333333")
.text("Date");
// Add the limit line at 100 mg/L
svg.append("line")
.attr("class", "limitLine")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", yScale(limit))
.attr("y2", yScale(limit))
.attr("stroke", "#333333")
.attr("stroke-dasharray", ("5, 2"))
.attr("stroke-width", 2);
// Add the axes
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis);
// Add text label for the y-axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (h / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("fill","#333333")
.style("font-size", 14)
.text("TSS Concentration (mg/L)");
// Add text label for the x-axis
svg.append("text")
.attr("transform", "translate(" + (w/2) + "," + (h + 50) + ")")
.style("text-anchor","middle")
.style("font-size",14)
.text("Date");
// Add a horizontal line at the limit
// (removed limit line assuming there may be more than one limit, so the line would be arbitrary)
/*
svg.append("line")
.attr("class","line")
.attr("x1",0)
.attr("y1", yScale(limit))
.attr("x2", w)
.attr("y2", yScale(limit));
*/
// Add the axes
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis);
// Add x-axis label
svg.append("text")
.attr("transform","translate(" + (w/2) + "," + (h+35) + ")")
.style("text-anchor","middle")
.text("Date of Sample");
// Add y-axis label
svg.append("text")
.attr("transform","translate(-40," + (h/2) + ")rotate(-90)")
.style("text-anchor","middle")
.text("Total Suspended Solids (mg/L)");
};
var dataVar = d3.csv("data.csv",function(d) {
d.parameter = d.parameter;
d.facility = d.project;
d.sampleLocation = d.samplePoint;
d.date = parseDate(d.date);
d.value = +d.value;
d.units = d.units;
d.limit = +d.limit;
d.percentExceeded = exceedance(+d.value,+d.limit);
return d;
},
function(error,dataset) {
if (error) throw error;
dataVis();
});
function exceedance(value,limit) {
return ((value - limit)%limit);
}
//from: https://bl.ocks.org/mbostock/3887118
Need a concise description that includes
- the visualization type
- what is encoded (data set, # of attributes)
- the visual channels used
- key interactions
The description should be a single sentence (or two short sentences) that
covers these key facts, no need for general background on data vis.
Additional notes to consider:
- this viz was "forked" from another visualization but appears to be new/different
- It appears the date range is from 2017-10-28 to 2018-04-08 with 12 samples
- Each sample point is tracked over time
- Color is used to encode percent exceedance
- Looks like an animated chart might have been intended (no animation in code found)
A 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.)
```
What changes should I make to this description to conform to the following guidelines?
Guidelines:
- Should be 2-4 sentences.
- Should be around 25-30 words per sentence, targeting a total of ~80-120 words.
- No Markdown. Use only plain text.
- Limit numbers and proper nouns.
- Start with "A" or "An" as the first word.
- Use technical terms, but avoid jargon and don't over-explain.
- Focus on what the graphic shows, not the code, framework, or license. Do not mention tooltips, hover effects, or other implementation details.
- Make sure the graphic can stand alone (no context needed to understand).
- Make sure the writing is efficient: if there are multiple same-type entities, use the plural instead of listing them all.
- Avoid attribution, including "forked from" and the original author.
- Avoid web URLs of any sort.
Your task:
Rewrite the existing description to satisfy these constraints. It currently says:
Scatter Chart
TSS 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.
Exceedance calculated as `(value - limit)%limit`.
Need to conform to the gallery rules:
- 3-10 sentences
- Must be under 250 characters, including markdown
- Must have two sections: "What it shows" and "How it works"
- Must be written in present tense
- Must not mention the source, author, or license
- Must not refer to specific files
- The title, code, and any text outside these sections will be ignored.
- Format as markdown with a "What it shows" heading and a "How it works" heading, in that order.
- When "d3" is mentioned, use lower-case "d3".
- No YAML frontmatter or code block.
Valid example, for reference:
Title: Bar Chart
What it shows: This chart displays the top 25 most popular baby names in the US in 2015.
Bars are sorted by rank. Hovering over a bar highlights its label and value. The bars are
rendered using SVG rects with d3's scaleBand for the x-axis.
How it works: Data is loaded from a CSV with three columns, name, rank, and count. The
visualization 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.
Tooltips are rendered by inserting a div into the DOM and positioning it under the mouse.
The x-axis is categorical, using an ordinal scale. The y-axis is linear.
-----
Write the description to be displayed in the gallery and keep it concise (150 words
or fewer). The goal is for readers to understand the visualization quickly and
accurately. Include the following details from the metadata:
- data source
- author
- release
- license
- D3 version
- framework
- rendering method
Do not use markdown, do not use line breaks. You must only write one single paragraph description.
The description should include:
- a data visualization analysis (why it's an effective or ineffective visualization)
- appropriate reference to visual encodings (e.g. x, y, color) that helps the reader anticipate what they will see.
For the gallery, the description should not include the d3.csv data loading details. The title and the
metadata are already on the page, so only the description is needed.
Important: All values for attributes in the data (e.g. parameter, facility) need to be
described in terms of the 'visualization' rather than the 'data'. If it's relevant,
reference "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.
Try 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.
**
** Your task: Write a concise description of the visualization. You
should include the title (the Title line above) and provide the context
and visual narrative in a couple of sentences. Do not use mark-up, just plain text for your entire response. Use a single
paragraph. Keep it under 300 words.
Scatter Chart
This 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.