Skip to main content
100%

Reading - Line Chart with Circles D3 V4

✓ Published0🌍 Public
Aalandunning
Last edited Oct 5, 2017
Created on Oct 5, 2017

This line chart visualizes reading assessment scores across seven modules, with each data point represented by a circle. The x-axis encodes module numbers with corresponding dates as secondary labels, while the y-axis shows T Scores. A dashed horizontal line marks the clinical cut-off value of 70, with a labeled annotation. The chart loads JSON data via d3.json, uses linear scales for both axes, and renders the data line and circles as SVG. Gridlines enhance readability, and axis titles clarify the variables.

AI-generated description

This chart is based on <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3883245'>Line Chart</a>

it uses a json file storing year values and population values. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/alandunning/'>alandunning</a>'s block: <a href='http://bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3'>Line Chart with Circle Tooltip D3 V4</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/ec827207c092f61cdb290755db7e0dd6'>Reading - Line Chart with Circle Tooltip D3 V4</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3 implementation testing

A scatterplot-style visualization maps four series of quarterly literacy and line-level scores as static steelblue circles, with each circle’s vertical position determined by its Q1 value. The chart uses d3.csv to load the dataset, d3.scaleLinear for both x and y axes, and d3.axisBottom plus d3.axisLeft to render the axes. All circles share a fixed radius of 20 pixels, and the SVG rendering is driven by standard d3 selections and data joins.

Aannelid
76% match
Loading thumbnail…

Reading - 3 Bars Grouped Bar Chart with Pulse D3 V4 JSON

This grouped bar chart visualizes changes in scores across three time points—Before Treatment, After Treatment, and Follow Up—for eight categories, with each category represented by three grouped bars. The chart uses D3 v4 with SVG rendering and animation, applying ordinal scales for the x-axis and color encoding, a linear scale for the y-axis, and SI-prefix formatting. A key feature is the clinical cutoff line at 65, with bars flagged as clinically significant pulsing in pink via CSS animation. The data is loaded from a JSON file, and the visualization incorporates conventional margins, grid lines, and labeled axes to clearly compare the three measurement periods per category.

Aalandunning
75% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between math and reading scores for individual students, with each point's color indicating whether the writing score exceeds 70. Built with D3 v7, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` with `d3.autoType` to parse the student performance data. Points are rendered as circles with a fixed radius and 70% fill opacity.

RRohith Reddy
75% match
Loading thumbnail…

ice 6 -2

This scatter plot shows the relationship between math and reading scores for individual students from the StudentsPerformance dataset. Each circle represents a student, with positions determined by their math score on the x-axis and reading score on the y-axis. The visualization uses d3.csv to load the remote dataset, d3.scaleLinear for both axes, and d3.axisBottom/d3.axisLeft to render the axes. Circles are appended via d3.selectAll and styled with steelblue fill, turning orange on hover. The SVG rendering includes labeled axes for both score dimensions.

Ssaiprasadpilla937@gmail.com
74% match
Loading thumbnail…

A scatter plot Graph.js

This scatter plot visualizes the average marks achieved across various modules, with each circle representing a course positioned by its mark on the x-axis and module name on the y-axis. The chart uses D3 v5's `scaleLinear` and `scalePoint` for axes, while `axisLeft` and `axisBottom` generate the tick marks. Data is loaded from a CSV file and rendered as SVG circles with steelblue fill. The visualization includes axis labels and a title, with styling applied via CSS.

Ssoundaryasure
74% match
Loading thumbnail…

line chart Ice_7

This line chart shows the exam scores of ten students alongside their study hours, with each score point rendered as a distinct shape that changes by score range: triangles for scores under 60, diamonds for scores between 60 and 80, and crosses for scores above 80. The line itself uses a vertical gradient stroke, transitioning from green at lower scores to red at higher scores, with a dashed pattern. Built with D3 v7, the code employs `d3.scalePoint`, `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` with triangle, diamond, and cross generators, all rendered as SVG elements.

HHarshithaDontha@my.unt.edu
74% match
Loading thumbnail…

A scatter plot Graph.js

This scatter plot shows the average marks achieved across university modules, with each module represented as a circle positioned along a linear mark scale and a point-based module axis. The visualization uses D3 v5 to load CSV data, apply linear and point scales, and render SVG circles with a steelblue fill. It includes custom axes with tick lines, formatted tick labels, and a marks axis label. The graph emphasizes distribution and comparison of module performance through clear spatial encoding.

WW9183907
74% match
Loading thumbnail…

IC6

This visualization, part of a student performance analysis, uses D3 v7 to render two SVG charts. The first is a multi-series line chart showing how average math, reading, and writing scores trend with binned math ability, using `d3.scaleLinear` and a monotone curve. The second is a combined bar and line chart, built with `d3.rollups`, displaying score distributions across parental education levels. Data is loaded from a CSV Gist, with a categorical color scale and grid lines for clarity.

Ssakethpapareddy@gmail.com
73% match