I created this visualization using chart.js.

Data Observations

• Bacteria: Abstract, Nominal (i.e. Labels)
• Mapped to X-Axis
• Drug Type: Abstract, Nominal (i.e. Labels)
• Color Coded Per Label
• MIC: Physical, Quantitative-Ratio (i.e. Integers)
• Mapped to Y-Axis
• Stain?: Abstract, Nominal (i.e. Labels)
• Unmapped, planning on highlighting x-axis text if I can figure out how to alter the element.

Initial Questions

What question do I want to answer?

What drug works most effectively for which bacterial infection given a measure: minimum inhibitory concentration, of the effectiveness of the antibiotic. On a secondary note, is there any correlation between low doses and pos/neg gram staining?

What problem am I trying to solve?

Low levels of a drug needed to kill something probably mean that it’s effective, so higher concentrations of the drug probably signify that it’s not effective against a bacteria.

What decisions am I trying to make?

What drug to choose when given a certain bacteria?

What outcomes am I hoping for?

An easy-to-read diagram that demonstrates both what antibiotics are best applied to each bacteria (i.e which antibiotics in the lowest concentration prevent growth in vitro). Also, a display of some sort to identify a pattern with gram staining and low doses needed to prevent growth.

What story do I want to tell?

I’m trying to demonstrate that X drug is most affective against Y bacteria because it requires such a low concentration of the drug (therefore, less resource intensive) to prevent growth. I also want to see if there’s a correlation between negative gram stains and lower doses needed to kill it.

What are my main challenges?

1. The MIC Quantitative value has a massive range, from 0.001 to 870.00.
2. Larger numbers aren’t good - smaller numbers are. This is counterintuitive to how we normally read graphs, and I don’t want to alter the data because I don’t know a way to normalize them to make the smaller values appear larger.
3. The data isn’t positional - it isn’t multidimensional. There isn’t an easy way to make a second axis.
4. There are four different variables, so I’m at risk of over plotting if I attempt to put them on the same graph.

1. The MIC is only useful as a comparison. The integer itself isn’t as helpful for the story that I’m trying to tell. The task is to demonstrate which antibiotic is most helpful for each type of bacteria, not the exact ratios needed. The raw MIC can be secondary, so the data’s range isn’t as large of an issue if I can properly demonstrate what the lowest MIC for each bacteria was (and what antibiotic was associated with it).
   • Because the range of the MICs is so vast, I decided to set the y-axis on a logarithmic scale to help the reader better visualize patterns in the data.
2. I decided that a line graph would be the best way to demonstrate the differences among the MICs of the varying drug types. While I can't explicitly signal to the reader that lower MICs are better without involving some sort of prior knowledge, it becomes obvious what the low scores are based on their position on the graph.
3. After deliberating over several rough designs, I figured that even though there are a variety of labels for the drugs used in the experiment, they would still make a good identifier for varying points (even though intervals of time are usually better suited to these kinds of graphs). The graph might mistakenly give the impression of some kind of development over time as a result.
4. Mapping the binary classifier of the gram stain was the most difficult decision of the design. Eventually I decided on a simple highlight on the x-axis to indicate whether a bacteria was a positive or negative stain (TBD if I can get it done, it's hard getting ahold of each of Chart.js's individual elements).