yasmeenha

Fork of Japan Country

This example visualizes the Japan country shape as an interactive SVG map, where a slider controls the level of terrain simplification by filtering out triangular areas below a threshold. The map redraws dynamically on slider input and window resize, using topojson.presimplify to precompute simplification weights and d3.geoTransform with d3.geoPath to project only points meeting the threshold. The code loads geographic data from a remote TopoJSON file and applies a Mercator projection via d3.geoMercator, rendering the result as green-filled paths with black strokes.

Mar 26, 2023

Social Graph

This visualization shows a social network graph of ten people connected by friendship links, with each person represented as a labeled circle. The graph uses a force-directed layout powered by `d3.forceSimulation`, with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Nodes are draggable via D3’s drag behavior, and hovering highlights a circle by increasing its stroke width. The data comes from a JSON file containing nodes and links, and all elements are rendered as SVG, with arrow markers on each link.

Graph

This example shows a social network graph of people connected by friendship ties, with nodes labeled by name and edges drawn as directed lines. The graph is rendered as SVG and uses D3 v6’s force-directed layout, specifically `d3.forceSimulation`, `d3.forceLink`, and `d3.forceCenter`, to position nodes. Each node is a circle with a label, and links have arrowheads via an SVG marker. The data comes from a JSON file listing relationships with weights, and nodes are draggable through `d3.drag`. Hovering highlights a node by increasing its stroke width.

Fork of ICE 8 - Country Map

This fork of ICE 8 displays a map of the United States using SVG, with each state filled in green and outlined in dark gray against a light blue ocean background. The visualization loads US Atlas TopoJSON data via `d3.json` and converts it to GeoJSON features with `topojson.feature`. It projects the map using `d3.geoPath` with the `d3.geoAlbersUsa` projection, which centers the contiguous states while placing Alaska and Hawaii in insets. The code is built with D3 v4 and React.

Fork of Japan Country

This example shows a simplified map of Japan, rendered as an aquamarine SVG path with black outlines. A slider controls the level of simplification, removing smaller geographic details in real time as the threshold increases. The visualization uses D3 v4's `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoTransform` with TopoJSON's `presimplify` to filter points based on their triangular area. The map data comes from a remote TopoJSON file of Japan, and the canvas resizes dynamically with the window.

Dinosaur Species

This interactive visualization displays a branching tree of dinosaur species, with major groups like Sauropodomorpha, Cerapoda, and Theropoda splitting into individual genera. Users can click any node to collapse or expand its subtree, with smooth transitions animating the layout changes. Built with React and D3.js, the code uses `d3.layout.tree` and `d3.svg.diagonal` to position nodes and draw curved links, while SVG circles and text labels render the hierarchy. The dataset is hardcoded in JavaScript, and clicking triggers the `update` function to recompute positions with a 750-millisecond duration.

Fork of Swedish map - ICE 8

This example displays a choropleth map of Sweden’s regions, rendered as filled polygons with colored boundaries. The map is built using React and D3 v5, with topojson data loaded from a remote URL. Geographic paths are generated via `d3.geoPath` and a `geoMercator` projection, fitted to the viewport with `fitExtent`. Interior borders are highlighted using a mesh computed from the topojson features.

world assignment

This visualization displays a world map rendered as beige countries with black borders against a sky-blue background. Using a Natural Earth projection, the map is generated by loading TopoJSON data from the world-atlas dataset and converting it to GeoJSON features with topojson.feature. D3’s geoPath and geoNaturalEarth1 handle the projection and path generation, while each country is appended as an SVG path element. The React framework is used for the overall application structure.

yasmeen pie

This example visualizes annual car sales for different companies as a pie chart, with each slice labeled by its sales value in thousands and accompanied by a color-coded legend. It uses D3 v5 to load CSV data via `d3.csv`, compute pie angles with `d3.pie`, render SVG paths with `d3.arc`, and apply a ordinal color scale. The data comes from a GitHub gist, and the chart is centered with a title.

yasmin Reuse

This example visualizes the Iris dataset as a scatter plot, mapping petal width to the x-axis, sepal length to the y-axis, and using distinct symbols to represent different species. Built with D3 v6, it utilizes `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to construct the plot, while `symbol` and `symbols` generate the species-specific markers. The plot is rendered as an SVG that fills the browser window, with data loaded via `csv` from a remote URL.

yas line

This example visualizes Amazon stock prices over time using a line chart. The chart plots the stock price on the y-axis and the year on the x-axis, with tick marks and axis labels rendered in green. The line is drawn in maroon with a stroke width of three. The visualization uses D3 version 5, specifically the `scaleTime` and `scaleLinear` functions for the axes, and the `line` generator to create the path. It loads data from a CSV and parses dates with `d3.timeParse`.

Reuse

A D3 scatter plot visualizes the Iris Dataset, mapping petal width to sepal length and using distinct symbols for each species. The SVG rendering populates a full-window plot with axes and a bold title, while the code modularizes the chart via a reusable `scatterPlot` function. It leverages `d3.csv` for data loading, `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` APIs, with a light blue background styling.

yas area

This area chart visualizes laptop prices over time, with monthly cost values plotted on a time-based x-axis and a linear y-axis. The visualization combines a red line path and pink filled area beneath it, using `d3.area()` and `d3.line()` with a basis curve for smooth interpolation. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, scaled with `d3.scaleTime` and `d3.scaleLinear`. Data comes from a CSV file parsed with `d3.csv`, where dates are converted using `d3.timeParse`. The chart renders as SVG with styled tick labels, axes, and a bold red title.

Mar 11, 2023

yasmeen pie

This example visualizes annual car sales for different companies using a pie chart. It displays each company’s sales as colored slices with value labels and a legend showing company names and sales figures. The data is loaded from a CSV file via `d3.csv`, and D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions generate the chart and color mapping. The SVG rendering positions slices at the center of a 960-by-500 canvas, with legend items placed to the right.

Mar 11, 2023

yasmeen assign 6a

This visualization displays a scatter plot of penguin species, mapping flipper length and body mass along the axes while coloring each point pink, violet, or green according to species. The code loads a CSV dataset using `d3.csv`, parses numeric fields, and renders SVG circles with `d3.scaleLinear` for positioning, `d3.axisLeft` and `d3.axisBottom` for axes, and `selectAll().join()` to create marks. Axis labels are added as SVG text elements, with a title noting the dataset of penguin measurements.

Mar 5, 2023

yasmeen elevations of mountain

This visualization displays the elevations of 25 mountain peaks in feet as horizontal bars, with mountain names listed along the vertical axis. The bars are colored green and rendered as SVG rectangles, while the horizontal scale ranges from 14,000 feet to the maximum elevation in the dataset. The chart uses React for component management and hooks, with D3 v5 functions like `scaleBand`, `scaleLinear`, and `csv` to load and map the data from a GitHub-hosted CSV file. Axis ticks are manually drawn as red lines with text labels.

Mar 4, 2023

Fork of Loading CSV Data yasmeen

This example demonstrates loading and parsing CSV data using D3.js v5, displaying the dataset’s size, row count, and column count in a large text element. It fetches CSS Named Colors data from a GitHub gist via `d3.csv`, then formats the raw CSV with `d3.csvFormat` to calculate its kilobyte size. The code also includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, showing different approaches to asynchronous data loading. The visualization is minimal, focusing on the data-loading process rather than graphical rendering, suitable for a React-free environment.

yasmeen

This example displays metadata about an Uber Cab dataset from New York, showing the file size in kilobytes, row count, and column count. A background image of a cab is displayed via CSS, and the metadata is presented in a large, bold preformatted text block. The page uses D3 v7’s `d3.csv` to load the dataset and `d3.csvFormat` to calculate its size, while the title and link provide context and access to the raw CSV file hosted on GitHub.

Untitled

This example shows a stylized background image of a San Francisco cab map rendered behind a single large centered preformatted text element, with headings and text aligned to the center of the page. The page is built with plain HTML and CSS, using the `body` background-image property to load an SVG from a GitHub gist and control its size and position. The code relies on standard HTML/CSS for layout and styling, with no JavaScript or external visualization libraries beyond the embedded SVG data source.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying the dataset’s size in kilobytes, row count, and column count. It uses the `d3.csv` method to fetch and parse the data, then reports the results using `d3.csvFormat` and `data.columns`. The page also includes commented-out alternatives using `fetch` and async/await, as well as a separate example with D3’s `csv` import from the v5 module, highlighting different approaches to asynchronous data loading.

Fork of Loading CSV

This example demonstrates how to load a CSV dataset and display its contents as raw JSON text on the page. It fetches the Iris Dataset from a remote GitHub URL using the `csv` function from D3 v5, then formats the parsed data with `JSON.stringify` for readability. The code appends a `<pre>` element to the document body using `select` and `append`, showing the structured array of objects that results from parsing the CSV. The visualization is minimal, focusing purely on data loading and inspection.

Fork of Fork of Ellipse flower - image

A generative flower composed of hundreds of overlapping, rotated ellipse pairs and circles radiates from the center of an SVG canvas. Each ellipse pair draws two crossed shapes with swapped radii, while a smaller circle sits at their intersection. The 500 elements are positioned with random x and y coordinates scaled by an index, creating a scattered, organic bloom against a dark green-to-black gradient. Colors shift from dark reds to warm oranges as the index increases, rendered with React and SVG primitives.

Fork of yasmmen html;

This page displays metadata about an Uber car service customer dataset, including its size in kilobytes, row count, and column count, presented as text within a styled HTML page. The visualization uses D3 version 7.3 to fetch the CSV data from a remote GitHub Gist via `d3.csv()` and computes the message content using `d3.csvFormat()`. The page’s appearance is defined by CSS, including a background image, and the result is rendered in a `<pre>` element. The dataset link is provided as a clickable reference for the user.

yasmmen html;

This example displays metadata about an Uber car service customer dataset, including its size in kilobytes, row count, and column count. The page loads a CSV file from a GitHub gist using d3.csv, then computes the formatted data length with d3.csvFormat and updates the text content of a pre element. Styling includes a background image, centered headings, and a red hyperlink to the raw dataset.

Fork of Face by yasmeen

A stylized cartoon face rendered with SVG primitives, built as a React component using D3's `arc()` generator for the mouth, eyes, and ears. The face features layered circles for eyes and irises, an ellipse rotated for a nose, colored lines for eyebrows and mouth details, and shaped arc paths for eyebrows and ears. All elements are positioned within a single SVG group using template literals for translate transforms, demonstrating how React and D3 can be combined for declarative drawing.

Feb 20, 2023

Fork of Smiley Face Part IIIm

This example shows a stylized smiley face rendered as an SVG, with a pink circular head, two dark eyes, and a mouth drawn as an arc. The face is centered using a translated group element, and all shapes are defined with React JSX components. The visualization uses React for component structure and D3’s `arc` API to generate the mouth path, with fixed dimensions and coordinates for the facial features. It demonstrates a simple integration of D3 geometry within a React-rendered SVG.

Feb 20, 2023

Fork of Smiley Face Part IIo

This interactive smiley face adapts to the browser window, centering a pink circle with a maroon outline and two black eyes. Built with React and rendered as SVG, the visualization uses ReactDOM to compute window dimensions and position elements dynamically. The code defines facial feature parameters like eye offset and radius, then constructs the face using SVG circle elements within a transformed group. No D3 functions are called despite the library being loaded.

Feb 20, 2023

Fork of Fork of Let's Make a Face Part Iyyy

This visualization shows a partially complete smiley face, with a yellow circular head and two black eyes, but no mouth. The SVG is rendered using basic circle elements positioned within a 960 by 500 viewport. The code relies on the SVG `circle` and `svg` APIs, setting coordinates and stroke properties directly in the HTML. No JavaScript libraries or data sources are used beyond the static markup, which uses a yellow fill and black stroke for the face outline.

Feb 19, 2023