J

JerlineJJ

@JerlineJJ·19 public vizzes

Loading thumbnail…

Fork of [VizStudy]Week6: Add a menu

This interactive scatter plot visualizes the 2019 World Economic Freedom Index dataset from a GitHub gist. Users can dynamically select which four attributes—teaching, research, citations, and total_score—to display on the x and y axes via React dropdown menus. Built with React hooks (useState), the chart renders SVG circles using D3 v5 scales (scaleLinear) and extent for axis domains. The code includes custom React components for axes and marks, with CSV data loading through D3’s csv function and axis labels updating based on menu selections.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a word cloud visualization embedded as a static SVG image, showing the distribution of terms with varying font sizes and colors. The page renders the word cloud from an external SVG file hosted on GitHub Gist, using a simple HTML structure. The code relies on the `<img>` tag to load the SVG directly, with CSS styling attributes controlling the image width, height, and centering via the `class="center"` property. No JavaScript libraries or interactive APIs are used; the visualization is entirely static and pre-rendered.

Loading thumbnail…

ICE-5: JERLINE JEYARAJ CANDY- dataset reading CSV file

This example displays a static candy-themed SVG image alongside a text summary of a CSV dataset. The page uses D3 v7’s `d3.csv` to fetch and parse remote data, then computes the file size in kilobytes, row count, and column count, rendering the results in a `<pre>` element. The SVG is embedded via an `<img>` tag from a GitHub gist, while the page styling uses basic CSS with green and grey backgrounds.

Loading thumbnail…

University Analysis

This visualization presents a static analysis of university-related data through a compact SVG graphic. The code embeds an image and renders the graphic using raw SVG paths, with no interactive elements or dynamic data processing. Built with React and JavaScript, it relies on SVG's native shape-drawing capabilities rather than external visualization libraries. The graphic appears to be a word cloud or similar text-based representation, though the specific data source is not visible in the provided files. The rendering approach is straightforward, using predefined path data to display the visual content.

Loading thumbnail…

image

This example displays the text "Hello HTML!" centered and enlarged to 13em using CSS, presented on a blank HTML page. It demonstrates a minimal static visualization using plain HTML and CSS styling, with no JavaScript or data processing involved. The page relies solely on the browser’s default rendering of HTML elements, with the message styled via a CSS class. The source is a simple static file with no external libraries or data sources.

Loading thumbnail…

Fork of Fork of Interactive pie and bar

This interactive dashboard combines a pie chart and bar chart to compare the top 5 countries across teaching, research, and citations. Hovering over a bar updates the pie chart and legend to display the corresponding data breakdown. Built with React and D3 v3, it uses SVG rendering with animations via `transition().duration(500)` to smoothly update bar heights and colors. The data is processed from a JavaScript object containing frequency values for each category.

Loading thumbnail…

Network Graph

A network graph displays seven named nodes connected by weighted links, with node sizes and link thickness reflecting connection strength. The data, loaded from a JSON file, is rendered as an SVG using D3.js v4's force layout, which applies gravity, charge, and distance parameters to position nodes dynamically. Users can click and drag nodes to rearrange the network, while node labels and red-bordered yellow circles remain visible. The visualization uses `d3.layout.force` for simulation and `force.drag` for interactivity, with tick events updating link coordinates and node transforms.

Loading thumbnail…

ICE8 Family Tree

A family tree visualization maps ten individuals across four generations, using colored circular nodes to distinguish each depth level and labeled text for names. The hierarchical data is structured with `d3.stratify` and laid out with `d3.tree`, producing curved bezier paths via SVG path elements. Node colors switch through a depth-based palette, while the light green background and manual `translate` offset frame the 900-by-900 pixel SVG canvas rendered with D3 v5.

Loading thumbnail…

ICE 8 Jerline country map

This map of the United States uses a violet fill for land areas and red strokes for state boundaries, rendered as an SVG. Built with React and D3 v5, it applies a `geoAlbersUsaTerritories` projection to US Atlas TopoJSON data, using `geoPath` to draw features and `geoGraticule` for the interior mesh.

Loading thumbnail…

ICE8 Jerline world map

This example displays a world map of countries as colored paths on a natural Earth projection, with a purple sphere background and red-bordered beige country shapes. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render geographic features, while TopoJSON’s `feature` converts the world-atlas 110m dataset into GeoJSON. The SVG is populated by appending a sphere path and then country paths asynchronously fetched from the unpkg-hosted JSON file, with styling applied via CSS classes.

Loading thumbnail…

ICE 8 Jerline Familytree

This interactive family tree uses a D3.js (v6) tree layout to display a genealogy dataset, with nodes as green circles labeled with names like William, Richard, Jessica, and Mary. The visualization animates the drawing of connecting paths and the appearance of circles and text labels, using D3 transitions to stagger the text fade-in based on node depth. Rendered as SVG, the tree splits from a single root into branches down to descendants like Leo and Melvin.

Loading thumbnail…

ICE 7 Area Chart

This example visualizes US unemployment rates from 1920 to 1980 using an area chart rendered in SVG. The chart combines a blue filled area with a black line, using curveBasis smoothing, while both axes display gridlines and labels. Data is loaded from a CSV file and parsed with d3.csv, then scales are created with d3.scaleLinear, axes with d3.axisLeft and d3.axisBottom, and the area and line paths are generated using d3.area and d3.line within a React framework.

Loading thumbnail…

Line Chart

This line chart displays the US unemployment rate from 1920 to 1980. It uses D3 v5 with scales from `d3.scaleLinear` and `d3.scaleTime`, and axes from `d3.axisLeft` and `d3.axisBottom`. The line is generated with `d3.line`, and the data is loaded as CSV from a GitHub gist. The SVG rendering includes styled grid lines, axis labels, and a title, with the blue stroke path emphasized via CSS.

Loading thumbnail…

ICE 7 Jerline piechart

This pie chart displays the fuel efficiency of cars by manufacturer, with each slice sized proportionally to its Fuel_efficiency value and labeled in a legend showing both the manufacturer name and the corresponding numerical value. Built with D3 v5, the visualization loads CSV data from a GitHub gist via `d3.csv` in `getData.js`, then uses `d3.pie` and `d3.arc` to generate SVG path segments, with `d3.scaleOrdinal` providing categorical colors. The chart renders to a 960×500 SVG canvas, and legends are manually positioned using `svg.append` and `attr transform` translations.

Loading thumbnail…

Reusable D3 scattter plot Jerline

This example demonstrates a reusable scatter plot component built with D3 v6, visualizing the classic Iris Dataset. Data points represent flower measurements, with petal width and sepal length mapped to the x and y axes, while color encodes species (setosa, versicolor, virginica). The scatterPlot function encapsulates core chart logic, including axes, scaling, and circle rendering, and is configurable via fluent setters. An animation cycles through different column combinations every two seconds, updating the plot’s axes. The visualization is rendered as SVG, with a legend and custom styling applied via CSS.

Loading thumbnail…

ICE-6 Part 1

This bar chart displays the fuel efficiency of cars from 20 manufacturers, sourced from a CSV file accessed via a gist URL. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering positions named bars, with axis ticks drawn from `xScale.ticks()`. Data is loaded asynchronously via `d3.csv`, and the chart is rendered inside a React component using `ReactDOM.render`.

Loading thumbnail…

Ice 6 part 2

This example visualizes the Iris dataset, mapping petal length and width to x/y positions while coloring each circle by species. The circles also encode sepal length and width through rx and ry attributes, creating an elliptical distortion. The visualization renders as an SVG using d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom, and d3.csv to load and parse the data. Axis labels are added manually via SVG text elements, and the color mapping uses a simple switch statement for the three species.

Loading thumbnail…

Fork of Smiley Jerline

This example shows a static smiley face rendered as a pink circle with red eyes and a black-outlined mouth, using SVG shapes positioned through React components. The face is built with D3’s arc generator for the mouth paths, while circles define the head and eyes. The code relies on React 16.9 and D3 v5, with hardcoded dimensions and coordinates rather than data-driven values. The rendering approach uses a central `<g>` transform for the head and eyes, alongside a separate transformed group for the mouth, producing a split facial layout.

Loading thumbnail…

Fork of Smiley Face ICE

This example shows a yellow smiley face composed of a large background circle, two eyes, and a curved mouth, all rendered as SVG elements. React manages the component structure, while D3’s `arc` function generates the mouth path using specified inner and outer radii and start/end angles. The `BackgroundCircle` component is a reusable React piece, and the entire graphic is centered via a `<g>` transform. The code uses React 16.9, D3 v5, and the `arc` API, with no external data source.