fresh block

100%

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 27, 2017

This visualization uses a parallel coordinates chart to compare five socioeconomic metrics across different types of educational institutions, with data loaded from a CSV file. The SVG rendering uses d3.svg.axis, d3.svg.line, and d3.scale.ordinal to draw axes and paths, while d3.svg.brush enables interactive filtering along each dimension. Users can drag axes to reorder dimensions and brush ranges to highlight specific institutions, with a d3.divgrid table below showing the raw data values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example presents a parallel coordinates chart showing the relationship between college tier and five numerical factors: the proportion of female students, married students, parental income, kid earnings, and mobility rate. The visualization uses grey background lines for all data categories and blue foreground lines for the currently focused tier. Users can brush along any axis to filter the displayed lines. The implementation relies on d3.v3, specifically using `d3.svg.brush` for interactive filtering, `d3.scale.ordinal().rangePoints` for the categorical axis, and `d3.svg.line()` to draw the polylines, with data loaded from the included `mrc_table.csv` file.

GGoomble

84% match

Loading thumbnail…

fresh block

This visualization gallery entry presents a suite of D3.js charts, each embedded via external scripts and configured through data attributes. It shows multiple interactive views of 2018 data, including regional comparisons, partner breakdowns, and beneficiary analyses, with toggles for sorting and average lines. The code leverages D3.js for rendering, with responsive layouts and lazy loading, while the source data is fetched from linked gist-hosted scripts.

GGerardoFurtado

80% match

Loading thumbnail…

fresh block

The visualization is a matrix-style dot chart where each student is a circle, with batches on the y-axis, branches on the x-axis, and color indicating gender. The chart maps the categorical data from `data.json`, encoding branch and batch positions spatially, while gender is encoded through color. Rendered as SVG with D3 v5, the chart’s interactive filtering likely allows exploration by class or batch, though the core display highlights the distribution of students across academic programs and years, with a legend clarifying the color coding for male and female.

663anp3ca

80% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

79% match

Loading thumbnail…

fresh block

A bar chart displays six hardcoded numeric values as vertically scaled blue rectangles, with white strokes separating them. Each bar's height is proportional to the value divided by the maximum of the dataset, computed using `d3.max`. The chart renders in SVG via `d3.select` and `selection.append`, positioning bars with `attr('x')` based on their index and using a percentage-based height. The data is static, and the visualization uses d3.v4 without axes or labels.

MMilliners-Son

78% match

Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE

77% match

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste

77% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

77% match